GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs: Remove dead link & Update dead images (#23427) 

* docs: Replace image

* update link
pull/23431/head
二货机器人 5 years ago
committed by GitHub
parent
5a10d29796
commit
2105a330dd
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      docs/spec/data-list.md
  2. 58
      docs/spec/form-page.md

12
docs/spec/data-list.md
View File

@ -33,13 +33,13 @@ title:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*D-8wTbCA1REAAAAAAAAAAABkARQnAQ">
兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。（[待开发的版本](https://yuque.antfin-inc.com/bigfish/fqm0ux/lgo878)）
兼顾浏览性与展示性。垂直排列，趋向于展示对象的基础概述，有层次地展示内容，适合快速扫读。特别当展示空间存在限制，如较小的弹窗、侧栏、下拉面板等容器中，使用列表。
### 卡片列表 Card list
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fu2gQ6DQaGgAAAAAAAAAAABkARQnAQ">
强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。（[待开发的版本](https://yuque.antfin-inc.com/bigfish/fqm0ux/cwtl6v)）
强调展示性。网格布局无特定浏览顺序，每个对象拥有更平等的展示机会，网格布局在页面中更具吸引力，适合突出对象时使用。
## 操作行为
@ -115,7 +115,7 @@ title:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i6PJT6ArtcgAAAAAAAAAAABkARQnAQ">
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。[更多模式](https://yuque.antfin-inc.com/bigfish/fqm0ux/hya8hw)
当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。
### 新建
@ -129,7 +129,7 @@ title:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2OsyRpOCCIYAAAAAAAAAAABkARQnAQ">
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾（参考[虚线按钮用法](https://yuque.antfin-inc.com/ui-assets/bgt2gr/ars4mz#jws7v),[可编辑列表模板](https://yuque.antfin-inc.com/docs/share/9a86324a-8e0e-45fa-9e28-9d4949668456)）。
点击新建，在按钮位置出现对象编辑区，完成新建后即在该位置展示该新建对象。虚线新建按钮位置放在列表首或尾。
### 删除
@ -155,7 +155,7 @@ title:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cPBwQ74TTFQAAAAAAAAAAABkARQnAQ">
在较小的空间中集成列表所需的常用功能，非常推荐使用，详情可见 [列表工具栏](https://yuque.antfin-inc.com/ui-assets/bgt2gr/xr7z6k) 规则
在较小的空间中集成列表所需的常用功能，非常推荐使用。
## 布局
@ -167,4 +167,4 @@ title:
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8iBER4YJmdQAAAAAAAAAAABkARQnAQ">
当列表无数据或无搜索结果时，应展示空状态，详见 [空状态](https://yuque.antfin-inc.com/ui-assets/bgt2gr/blx4ny) 规则。
当列表无数据或无搜索结果时，应展示空状态。

58
docs/spec/form-page.md
View File

@ -20,17 +20,17 @@ title:
## 设计原则
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574311351853-033b6079-aa32-4dee-b411-a349ce4f0b3b.png#align=left&display=inline&height=271&name=image.png&originHeight=450&originWidth=1240&size=69733&status=done&style=none&width=746)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/qbgluDd7ko/shejiyuanze.png)
### Do & Don't
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1571297420574-d270628f-4eeb-4c79-80fb-1c30cf99e934.png#align=left&display=inline&height=264&name=image.png&originHeight=264&originWidth=568&size=26159&status=done&style=none&width=568)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/1VLX%24%26lNcF/rule1.png)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1571297381128-b22c5cd0-088a-46c2-a5a2-b3811b729e23.png#align=left&display=inline&height=284&name=image.png&originHeight=284&originWidth=568&size=29905&status=done&style=none&width=568)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/xQckp2tMMQ/rule2.png)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1571297475106-5376028f-764c-4f93-9855-a32b8ea63d75.png#align=left&display=inline&height=264&name=image.png&originHeight=264&originWidth=568&size=15542&status=done&style=none&width=568)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/TdU3YwlK0r/rule3.png)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1571297499650-4fec5e5e-4bf9-46ca-b5a9-13d17985bc3e.png#align=left&display=inline&height=264&name=image.png&originHeight=264&originWidth=568&size=22652&status=done&style=none&width=568)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/hlqQKF2YMA/rule4.png)
## 如何设计
@ -51,7 +51,7 @@ title:
当需要完成一个简单快速的任务，例如输入少量信息即可完成创建。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574311488703-264672b4-efa2-41bd-a7b0-88f8929795c8.png#align=left&display=inline&height=323&name=image.png&originHeight=1291&originWidth=1694&size=190539&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/LZJOdo51Z7/putongbuju.png)
### 任务拆解和编排
@ -65,7 +65,7 @@ title:
适用于具有明确的线性逻辑的任务。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574312524017-8fe5f244-7377-42d0-bc5f-680e173a0dd7.png#align=left&display=inline&height=563&name=image.png&originHeight=1126&originWidth=4830&size=236444&status=done&style=none&width=2415)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/2Oh8jRih71/renwuchaijiehebianpai.png)
#### 模板 - 同页分步表单  (Coming soon...)
@ -73,7 +73,7 @@ title:
用户需要在同一页面查看表单的完整上下文，而不是像基础分步表单那样拆解为多个独立任务。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574357993810-99fbcb07-12e7-40ce-aa01-ae2f8d5d9674.png#align=left&display=inline&height=286&name=image.png&originHeight=572&originWidth=847&size=51276&status=done&style=none&width=423.5)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/a2m8t1K3wj/tongyefenbubiaodan.png)
#### [模板 - 分组表单](http://preview-techui.dockerlab.alipay.net/groupviews)
@ -81,7 +81,7 @@ title:
单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574313449192-5b1502cc-faff-4293-a06a-f28094c803b0.png#align=left&display=inline&height=413&name=image.png&originHeight=1649&originWidth=1694&size=157454&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/qALbGC%26UWd/fenzubiaodan.png)
#### 模板 - 分组编辑
@ -89,7 +89,7 @@ title:
内容量特别大的表单或常常仅需编辑部分内容的表单，该模式常见于详情页的内容编辑。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574313868617-676253da-b0f5-4260-9fe1-5071c26754ef.png#align=left&display=inline&height=286&name=image.png&originHeight=572&originWidth=847&size=43258&status=done&style=none&width=423.5)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/6T4ATJ08Cx/fenzubianji.png)
#### 模板 - 可编辑列表 (开发中...)
@ -101,7 +101,7 @@ title:
A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要单独的标题使用。 B. 可编辑表格：建议条目表单数 2 ～ 5 项 时使用，以使得每行内容可被完整呈现。 C. 折叠面板编辑：建议条目表单数在 6 ～ 8 项 时使用。 D. 抽屉编辑：建议条目表单表单数 >8 项 时使用 E. 规则树：应用于规则编辑场景。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574320088090-3538959e-b415-4858-9274-76d6507f34ed.png#align=left&display=inline&height=1457&name=image.png&originHeight=2914&originWidth=4830&size=775944&status=done&style=none&width=2415)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/c90pFAXI29/kebianjiliebiao.png)
#### 模板 -  联动表单 (Coming soon...)
@ -109,7 +109,7 @@ A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要
一般分为显示联动、数据联动、事件联动，当需要展示联动选项的时候使用。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574317965978-c2c8c735-247c-4d34-959d-a26483d0ee94.png#align=left&display=inline&height=286&name=image.png&originHeight=572&originWidth=847&size=45460&status=done&style=none&width=423.5)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/gEk0Lsc48%24/liandongbiaodan.png)
### 填写和预览
@ -117,7 +117,7 @@ A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要
#### 模板 - 下单页(Coming soon...)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574317642788-d179583a-7017-44c1-aa8d-f791823650c5.png#align=left&display=inline&height=286&name=image.png&originHeight=572&originWidth=847&size=50268&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/oLIvbWHkLr/xiadanye.png)
### 特定场景模板
@ -137,21 +137,21 @@ A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要
- 数量 7~ 15 个建议分组；
- 数量 >15 个建议使用页签分组；
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574320838737-6c1c39c4-2ba6-4efe-9a00-cd52ee61e94f.png#align=left&display=inline&height=1011&name=image.png&originHeight=2022&originWidth=3260&size=284012&status=done&style=none&width=1630)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/jHVAIq%26wAV/shezhi.png)
#### [模板 - 登录](https://preview.pro.ant.design/user/login)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574321400288-b3d2625e-319a-4335-b132-b1b4057d8779.png#align=left&display=inline&height=261&name=image.png&originHeight=1043&originWidth=1694&size=122773&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/PzIlaIzCXP/denglu.png)
#### [模板 - 注册](https://preview.pro.ant.design/user/register)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/101/1574321413674-6755ce8b-c5ea-42e6-8940-cf13e4a561e7.png#align=left&display=inline&height=259&name=image.png&originHeight=1035&originWidth=1694&size=117080&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/e1%26%264knIYi/zhuce.png)
### 设计建议
#### 前期准备
- 表单页的核心由表单项组成，设计前建议先熟悉[表单基础规则](https://yuque.antfin-inc.com/ui-assets/bgt2gr/qhm36a)；
- 表单页的核心由表单项组成，设计前建议先熟悉表单基础规则；
- 梳理用户当前信息录入任务中所涉及的信息类型，并根据 [antd 数据录入规则](https://ant.design/docs/spec/data-entry-cn#header) 确定所使用的组件；
#### 布局方式
@ -164,42 +164,38 @@ A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要
> 以下“区域”特指页面、抽屉、弹窗、卡片内或分组标题下。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574736092458-3657adca-9924-4c16-a572-91aa0f8d0156.png#align=left&display=inline&height=230&name=image.png&originHeight=308&originWidth=750&size=10065&status=done&style=none&width=560)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/LVM7Wacqsw/jichubuju.png)
**弱分组**
在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574736122151-0ffa03e4-9a3f-4cb9-bb42-a18a3f05ecc1.png#align=left&display=inline&height=209&name=image.png&originHeight=280&originWidth=750&size=15978&status=done&style=none&width=560)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/5D%24GIinshq/ruofenzu1.png)
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574736007056-7cd51e62-fb5c-4d50-8d34-ccccbf49e858.png#align=left&display=inline&height=233&name=image.png&originHeight=312&originWidth=750&size=14670&status=done&style=none&width=560)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/mCxfEh3T%24B/ruofenzu2.png)
为避免和弱分组布局的阅读顺序混淆，一个区域内禁用多列表单。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574736941043-8aa9ff26-abf7-400d-a2f9-76b8716ab6d6.png#align=left&display=inline&height=334&name=image.png&originHeight=334&originWidth=560&size=14560&status=done&style=none&width=560)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/G78FNhcfYa/ruofenzu3.png)
**区域内分组**
当一个区域中内容较多且存在可分类归纳性时，可通过区分标题来进行区域内分组。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574738030270-76103fab-d3ba-40f8-9107-6c4723538aa5.png#align=left&display=inline&height=286&name=image.png&originHeight=378&originWidth=560&size=7283&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/ECga%24A1EgS/quyuneifenzu.png)
**卡片分组**
当一个页面中内容众多（通常大于两屏）且存在可分类归纳性时，可通过卡片分组来承载。每个卡片需要包含一个大标题。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574738079391-28fd1b9b-2d34-4012-98bb-536e886b8330.png#align=left&display=inline&height=286&name=image.png&originHeight=378&originWidth=560&size=7767&status=done&style=none&width=424)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/OM9iaWOM48/qiapianfenzu1.png)
关于使用何种布局方式的判断，和详情页类似，应从信息的复杂度和关联性两个维度去梳理。随后可选择相匹配的模板，进行页面快速搭建。将相关的元素分组到一起。
![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/86564/1574738157001-abf07523-31b7-4dcf-b53b-3af11631502a.png#align=left&display=inline&height=975&name=image.png&originHeight=975&originWidth=1140&size=107023&status=done&style=none&width=1140)
![image.png](https://gw.alipayobjects.com/zos/antfincdn/GccgrpeoPm/qiapianfenzu2.png)
## 4. 扩展阅读
### 会用到哪些全局规则
- [表单](https://yuque.antfin-inc.com/ui-assets/bgt2gr/qhm36a)
### 会用到哪些模块或组件
- [数据录入组件](https://ant.design/components/form-cn/#header)
@ -207,6 +203,6 @@ A. 动态增减：建议条目表单数 <=3 项，并且每个输入框不需要
### 相关页面
- [列表页](https://yuque.antfin-inc.com/ui-assets/bgt2gr/akzstg)
- [结果页](https://yuque.antfin-inc.com/ui-assets/bgt2gr/mome0a)
- [详情页](https://yuque.antfin-inc.com/ui-assets/bgt2gr/gbucb9)
- [列表页](/docs/spec/research-list)
- [结果页](/docs/spec/research-result)
- [详情页](/docs/spec/detail-page)

Write Preview
Loading…
Cancel
Save