Skip to content

F
frontend_docs
Commit 09ce8b34 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

Initial commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1062 additions and 0 deletions
.gitignore 0 → 100644
View file @ 09ce8b34
node_modules
\ No newline at end of file
docs/.vuepress/config.ts 0 → 100644
View file @ 09ce8b34
module.exports = {
head: [
['meta', { name: 'referrer', content: 'no-referrer' }]
],
plugins: [
["vuepress-plugin-auto-sidebar",{}],
'permalink-pinyin'
],
themeConfig: {
nav: [
{ text: '设计语言', link: '/she-ji-yu-yan/' },
{ text: '组件说明', link: '/zu-jian-shuo-ming/' },
]
}
}
\ No newline at end of file
docs/index.md 0 → 100644
View file @ 09ce8b34
---
home: true
actionText: 快速上手 →
actionLink: /she-ji-yu-yan/1ac-designjie-shao
---
\ No newline at end of file
docs/组件说明/10分隔按钮.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 分割按钮
---
由两部分组成的按钮，左侧触发操作，右侧触发菜单。
<a name="X5WgZ"></a>
### 使用指南
- 分隔按钮由按钮和弹层菜单组成，右侧icon按钮部分为弹层菜单的触发区域，包含多个操作，左侧按钮部分则进行操作触发；
- 推荐按钮操作大于3种时使用。
![截屏2022-03-20 下午12.20.58.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647750074055-59e5ddbc-a118-4f15-85ba-9c36114b23f9.png#clientId=ubc68b94b-d7a5-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u364868f0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.20.58.png&originHeight=287&originWidth=247&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19205&status=done&style=none&taskId=u5a13fa21-9039-499f-b8ac-1cb19c11861&title=)
docs/组件说明/10单选框.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 单选框
---
单选框，从一组可选项中单项选择。
<a name="MsYiB"></a>
### 使用指南
- 用户从一个数据集中选择单个选项时
<a name="MNIGj"></a>
## ![截屏2022-03-20 下午4.16.36.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764208955-80a0b2bb-52b4-48b9-bfca-4c659b3a0757.png#clientId=u28d3ac95-0bb3-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u3c7a3068&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.16.36.png&originHeight=180&originWidth=625&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17304&status=done&style=none&taskId=uf5f4fc37-9887-4ba3-9233-9cdc9649838&title=)<br /><br />
docs/组件说明/10图片轮播.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 图片轮播
---
旋转木马，一组轮播的区域。
<a name="vTC7b"></a>
### 使用指南
- 当有一组平级的内容。
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
- 常用于一组图片或卡片轮播。
![截屏2022-03-21 上午11.35.19.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647833775930-76aace4a-0dec-472f-ae14-97eff2f10b33.png#clientId=u22210216-8282-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue274d805&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.35.19.png&originHeight=571&originWidth=803&originalType=binary&ratio=1&rotation=0&showTitle=false&size=270005&status=done&style=none&taskId=ued1d9bbd-314c-4a30-80c0-1eccd27d0ae&title=)![截屏2022-03-21 上午11.35.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647833775915-d5b2bdf7-033b-4f7d-97d3-3e540fbc204e.png#clientId=u22210216-8282-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u41c6e493&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.35.27.png&originHeight=283&originWidth=764&originalType=binary&ratio=1&rotation=0&showTitle=false&size=160263&status=done&style=none&taskId=ud4203e61-4ad5-4ac2-aa97-eccd4555527&title=)
docs/组件说明/10瀑布图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 瀑布图
---
瀑布图形似瀑布流水，采用绝对值与相对值结合的方式，适用于表达数个特定数值之间的数量变化关系。<br />![WaterfallChart 瀑布图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226594561-e2db85fa-299a-44b9-8c8b-e57aa1027f39.png#clientId=u9b6682cd-6feb-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u33e7a9ef&margin=%5Bobject%20Object%5D&name=WaterfallChart%20%E7%80%91%E5%B8%83%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15534&status=done&style=none&taskId=u5fd2f785-1b9c-4a89-a6b3-796b10ef6aa&title=)
docs/组件说明/11区段选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 区段选择器
---
用于在给定的范围内选择一个值。
<a name="xf128"></a>
### 使用指南
- 在数值输入过程中，需要提供实时的可视化数据比例反馈时。
![截屏2022-03-20 下午4.18.38.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764342310-8787cea0-79c9-41c6-9651-d39bb7bb5898.png#clientId=ub8f52ed5-bdb8-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8927c4f2&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.18.38.png&originHeight=309&originWidth=325&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17447&status=done&style=none&taskId=u3ec983a0-4998-41a0-bab8-644be39bee5&title=)![截屏2022-03-20 下午4.18.43.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764342358-c9e54930-26fe-4712-ad75-315cf6bb627f.png#clientId=ub8f52ed5-bdb8-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u02f66ee6&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.18.43.png&originHeight=223&originWidth=474&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16486&status=done&style=none&taskId=ucfe0749e-8b97-43f9-a8c0-5615af36fc0&title=)
docs/组件说明/11基础条形图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 基础条形图
---
使用条形显示维度的数值。纵轴显示分类维度，横轴显示相应的值。<br />![BarChart 基础条形图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226634582-b0277b6b-25b4-4b01-b52e-bcbf862e3409.png#clientId=u44ddc0c5-0ed9-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uc5699ec4&margin=%5Bobject%20Object%5D&name=BarChart%20%E5%9F%BA%E7%A1%80%E6%9D%A1%E5%BD%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11436&status=done&style=none&taskId=u3c1d776d-6232-49d2-a035-98613d01970&title=)
docs/组件说明/11排版.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 排版
---
文本的基本格式。
<a name="Tx6cl"></a>
### 使用指南
- 当需要展示标题、段落、列表内容时使用，如文章/通知的文本样式。
![截屏2022-03-20 下午12.21.40.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647750127582-11308470-81c6-40db-8cce-ac6b6e28fffe.png#clientId=ubb2fa716-ea18-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u28c28d7d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.21.40.png&originHeight=459&originWidth=1013&originalType=binary&ratio=1&rotation=0&showTitle=false&size=78767&status=done&style=none&taskId=ue4aa3c4a-b111-45fd-a74a-55cc527865d&title=)
docs/组件说明/11表格.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 表格
---
用于展示同类多种数据，方便组织、对比和分析。
<a name="CJCET"></a>
### 使用指南
- 需要展示的信息内容较多时，方便用户浏览和获取批量数据
- 需要对数据进行归纳分类，方便用户快速了解差异，关联和区别时
- 需要对数据进行排序、筛选等操作时
![截屏2022-03-20 下午4.43.23.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765817653-b2c23aab-e85d-454d-b45d-14a3581819b3.png#clientId=u180c6a54-c677-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u63b1ee1d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.43.23.png&originHeight=378&originWidth=1304&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47196&status=done&style=none&taskId=uba245284-6d85-411b-a45b-59161cce197&title=)
docs/组件说明/12堆叠条形图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 折堆叠条形图
---
使用颜色不同的堆叠的条形来显示各维度的数值。纵轴标示出第一个分类维度，颜色标示出第二个分类维度，横轴显示相应的值。<br />![StackedBarChart 堆叠条形图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226666246-eb9e014f-2c44-4fff-a170-311b8876de17.png#clientId=u614f7f87-00bb-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9c27d118&margin=%5Bobject%20Object%5D&name=StackedBarChart%20%E5%A0%86%E5%8F%A0%E6%9D%A1%E5%BD%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12774&status=done&style=none&taskId=u3669db37-daf2-4df8-8f29-68b3998f875&title=)
docs/组件说明/12标签.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 标签
---
进行标记和分类的小标签。
<a name="IqrDP"></a>
### 使用指南
- 用于标记事物的属性和维度。
- 数据量较多时，通过关键词快速获取相关内容
- 用户需要编辑分类标签时
![截屏2022-03-20 下午4.43.54.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765845860-36727eed-f2cf-4dab-9591-def73c6e7b54.png#clientId=u395895e5-ca9f-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8e5a9989&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.43.54.png&originHeight=198&originWidth=577&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17302&status=done&style=none&taskId=uda6a1d7e-5688-4f3f-86be-d722af5d974&title=)
docs/组件说明/12评分.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 评分
---
评分组件通常用于用户反馈场景。
<a name="kSwjf"></a>
### 使用指南
- 对评价进行展示。
- 对事物进行快速的评级操作。
<br />![截屏2022-03-20 下午4.20.53.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764467139-e5694934-b265-4a0e-9f12-670faa3a47a8.png#clientId=u6df7f75a-ed71-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ud3395535&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.20.53.png&originHeight=180&originWidth=319&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12477&status=done&style=none&taskId=ud9ce063a-5339-42e7-870a-512975d87fe&title=)
docs/组件说明/13区间条形图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 区间条形图
---
通过绘制每个数据点的两个 Y 值来显示数据范围。使用的每个 Y 值被绘制为条形柱的上限和下限。<br />![RangeBarChart 区间条形图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226841014-5ba4cd8d-216d-4d88-b03b-8a16a165ec84.png#clientId=ubac86e9c-4802-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4d5bc6ef&margin=%5Bobject%20Object%5D&name=RangeBarChart%20%E5%8C%BA%E9%97%B4%E6%9D%A1%E5%BD%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11235&status=done&style=none&taskId=u87e3fa99-c57e-4c7d-853a-6577e2ee9f2&title=)
docs/组件说明/13搜索.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 搜索
---
搜索组件。
<a name="Yjn8k"></a>
### 使用指南
- 页面、表单数据搜索时使用。
![截屏2022-03-20 下午4.28.01.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764898043-3d0de82e-c797-4fb6-b7b1-3177808cc801.png#clientId=u93def65f-1a62-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u1ff23ad0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.28.01.png&originHeight=185&originWidth=647&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17846&status=done&style=none&taskId=u43fcbeb4-e42a-4e5c-a8f4-7bc51b0be71&title=)
docs/组件说明/13时间轴.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 头像时间轴
---
垂直展示的时间流信息。
<a name="DpTqM"></a>
### 使用指南
- 当有一系列信息需要按时间排列时。
![截屏2022-03-20 下午4.44.21.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765880080-6e644fec-7442-422e-945a-566c472cc2d7.png#clientId=ue5d8c940-7b3c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u1e575871&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.44.21.png&originHeight=333&originWidth=372&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25182&status=done&style=none&taskId=uc309f77c-b5c8-4b49-8437-9250b51cfa5&title=)
docs/组件说明/14分组条形图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 分组条形图
---
分组条形图是基础条形图的扩展形式，适合于在同一个轴上展示不同维度下相同分类的数据。相比于堆叠条形图，分组条形图更适合进行不同维度下同一分类的横向数值的比较，但缺点是无法直观的看到各维度总和的对比。<br />![GroupedBarChart 分组条形图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226888159-319ec825-09ea-4041-b21b-c594f2272521.png#clientId=u36ade7ed-f1bb-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubb215a39&margin=%5Bobject%20Object%5D&name=GroupedBarChart%20%E5%88%86%E7%BB%84%E6%9D%A1%E5%BD%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12725&status=done&style=none&taskId=u46812009-cd41-430e-ad26-051f01773c3&title=)
docs/组件说明/14树形控件.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 树形控件
---
多层次的结构列表。
<a name="SPsE7"></a>
### 使用指南
用于文件夹、组织架构、生物分类、国家地区等等。完整展现其中的层级关系，并具有展开收起选择等交互功能。<br />![截屏2022-03-20 下午4.44.53.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765906712-70b8ec0a-f730-4c26-a521-41235217af3e.png#clientId=u986f8c05-8258-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uf5456bca&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.44.53.png&originHeight=299&originWidth=566&originalType=binary&ratio=1&rotation=0&showTitle=false&size=21933&status=done&style=none&taskId=uaaa7570f-ea49-4e6d-b995-652484e7b02&title=)
docs/组件说明/14选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 选择器
---
用于收纳大量选项的组件。
<a name="Zy695"></a>
### 使用指南
- 需要在有限的空间展示大量选项时
![截屏2022-03-20 下午4.29.00.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764963151-9656d4a3-702b-4789-a66c-a16de007aad4.png#clientId=u7f3dc9fe-7dc4-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u890a7dcf&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.00.png&originHeight=314&originWidth=322&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17012&status=done&style=none&taskId=ud991ac77-61b9-4891-92c1-0bdc9d1168a&title=)![截屏2022-03-20 下午4.29.03.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764963191-ef366aca-c367-4b56-8973-5b9efe75bc4a.png#clientId=u7f3dc9fe-7dc4-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uadf48c63&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.03.png&originHeight=255&originWidth=306&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13293&status=done&style=none&taskId=uccc53843-b657-4086-b78f-2e06c05274c&title=)![截屏2022-03-20 下午4.29.07.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764963274-3ba232a3-7a18-4ad3-b64a-67ea2b80ca74.png#clientId=u7f3dc9fe-7dc4-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5d0edce1&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.07.png&originHeight=244&originWidth=326&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13217&status=done&style=none&taskId=u67e3f82b-2af9-426b-a353-fda977c0d72&title=)
docs/组件说明/15开关组件.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 开关组件
---
用于打开或关闭状态之间进行切换的组件。
<a name="o18gp"></a>
### 使用指南
- 需要表示开关状态或仅有两种状态之间的切换时；
- 操作后立即生效。
![截屏2022-03-20 下午4.29.36.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765003954-cd50ff0e-bf1f-4a59-b521-0574ff50e151.png#clientId=u585f56df-44a1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u7f2cf5ae&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.36.png&originHeight=190&originWidth=333&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12837&status=done&style=none&taskId=u74c882c5-e68c-4dde-a73f-292b536bc23&title=)![截屏2022-03-20 下午4.29.41.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765004000-b76dd565-5cf9-413c-8067-4a401b2871e3.png#clientId=u585f56df-44a1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u678f31d7&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.41.png&originHeight=128&originWidth=320&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10761&status=done&style=none&taskId=u11bc9ce7-f017-4953-b8d0-b4ab2016ac4&title=)![截屏2022-03-20 下午4.29.45.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765004021-be079caa-46a7-4ec4-9169-48dddb25a3a1.png#clientId=u585f56df-44a1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub2284d2b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.45.png&originHeight=130&originWidth=324&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11244&status=done&style=none&taskId=u1d51c8f1-be6c-45b5-bdb0-de2f9503d09&title=)![截屏2022-03-20 下午4.29.48.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765004050-91d3496f-8009-45e8-ac15-28fb1b412f7a.png#clientId=u585f56df-44a1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u3dc46444&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.29.48.png&originHeight=141&originWidth=258&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9532&status=done&style=none&taskId=u6ae49335-bdfb-4594-8467-c4620b2023a&title=)
docs/组件说明/15饼图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 饼图
---
饼图主要用于表示不同分类的占比情况。饼图中的每个扇形切片表现一个分类，扇形切片的弧度表示该分类在整体中的占比，所有切片构成一个整体，即 100%。<br />![PieChart 饼图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226919787-acecdd71-03b6-4b81-8028-3a1a0358b117.png#clientId=u94a95697-dc1e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u202c8e1a&margin=%5Bobject%20Object%5D&name=PieChart%20%E9%A5%BC%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19211&status=done&style=none&taskId=u59a1f1bc-ac26-455a-a684-9e76c8a7684&title=)
docs/组件说明/16环形图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 环形图
---
环图与饼图基本功能类似，用于比较整体和部分的关系，每个弧形切片表示整体中的一个分类。由饼图挖空中心部分构成，通常在中心部分会放置解释性文本。<br />![DonutChart 环形图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226945157-0f041ebf-b25b-434a-8fd2-39123f875459.png#clientId=uf2deca08-ee63-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uc5c821ad&margin=%5Bobject%20Object%5D&name=DonutChart%20%E7%8E%AF%E5%BD%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=24512&status=done&style=none&taskId=u6ab22c49-6d01-4bf9-8704-b6a3e3974c1&title=)
docs/组件说明/16穿梭框.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 穿梭框
---
在两栏中移动选项元素，是对选项进行单个或批量移动从而完成挑选的数据容器。左栏是“源”，右边是“目标”。
<a name="r1xUe"></a>
### 使用指南
- 用直观的方式在两栏中移动元素，完成选择行为。
- 需要在多个可选项中进行多选时。
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
![截屏2022-03-20 下午4.30.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765043737-a25295cc-d281-42ea-b9e2-ac4aa79f2288.png#clientId=u57ea282a-667c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u6d7613fa&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.30.27.png&originHeight=364&originWidth=466&originalType=binary&ratio=1&rotation=0&showTitle=false&size=27467&status=done&style=none&taskId=uc43e9f23-970f-4a5f-ac85-80767f5ce60&title=)![截屏2022-03-20 下午4.30.31.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765043803-fdc39ee3-fe20-4988-92d2-7c36c2690e68.png#clientId=u57ea282a-667c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u44771e2e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.30.31.png&originHeight=346&originWidth=470&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25923&status=done&style=none&taskId=ubd6b40ee-bce1-4163-826a-eab5b02377f&title=)
docs/组件说明/17树形选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 树形选择器
---
类似 Select 的信息录入控件，适用于选择树形的数据结构。
<a name="v80zT"></a>
### 使用指南
- 用于选取树形结构数据，如文件结构、组织架构、地理行政区等。
![截屏2022-03-20 下午4.32.34.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765168003-7f02bb11-4a31-4f97-903f-b34e79fceb89.png#clientId=u93478afc-1d1d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u361766b1&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.32.34.png&originHeight=315&originWidth=497&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22284&status=done&style=none&taskId=u3487b646-d9cf-479b-9213-d99479f8e99&title=)
docs/组件说明/17玫瑰图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 玫瑰图
---
展示数据在某一段时间段的数据变化,或比较各项数据间的情况。<br />![RoseChart 玫瑰图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227020561-485f1a51-9ff1-433f-9986-8ad13e635f7b.png#clientId=udf858535-6468-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u7d01ad79&margin=%5Bobject%20Object%5D&name=RoseChart%20%E7%8E%AB%E7%91%B0%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19509&status=done&style=none&taskId=u014ed741-c37e-4fb2-8d46-7a41a7531c2&title=)
docs/组件说明/18上传组件.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 折线图
---
文件选择上传和拖拽上传控件。
<a name="jVVtD"></a>
### 使用指南
- 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
![截屏2022-03-20 下午4.33.12.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765229297-a0974788-1508-4e3d-8751-8755b0e3f869.png#clientId=uf1f81f2f-4f19-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4d1683bf&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.33.12.png&originHeight=127&originWidth=375&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13459&status=done&style=none&taskId=u3f383529-b997-4f82-b956-c853e9bad71&title=)<br />![截屏2022-03-20 下午4.34.29.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765286969-db4c64c1-31a7-44f1-baf1-600b80c2a887.png#clientId=uf1f81f2f-4f19-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u991ad8d4&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.34.29.png&originHeight=213&originWidth=379&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16485&status=done&style=none&taskId=u288d89f5-c88a-49c9-bbe7-7229b7cd9c0&title=)![截屏2022-03-20 下午4.33.22.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765229346-e70387e0-bbaf-4564-b3fc-8057f5ebb8e8.png#clientId=uf1f81f2f-4f19-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8efe73d2&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.33.22.png&originHeight=275&originWidth=469&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19928&status=done&style=none&taskId=u735a69aa-ce44-4b5d-8af6-4c94d50d227&title=)![截屏2022-03-20 下午4.33.30.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765229386-00cbcb5e-b641-499a-91d9-cb801c691426.png#clientId=uf1f81f2f-4f19-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u7cf7f695&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.33.30.png&originHeight=224&originWidth=451&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32317&status=done&style=none&taskId=u5fb855ca-1107-4051-a1e5-d8ba6ddcb2f&title=)
docs/组件说明/18堆叠玫瑰图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 堆叠玫瑰图
---
将玫瑰图进行堆叠，从而展示更多的信息。<br />![StackedRoseChart 堆叠玫瑰图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227444750-13b6831b-a5b0-4433-846b-c0def8c103b9.png#clientId=u381b1df8-8af1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue0cb03e7&margin=%5Bobject%20Object%5D&name=StackedRoseChart%20%E5%A0%86%E5%8F%A0%E7%8E%AB%E7%91%B0%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25495&status=done&style=none&taskId=ufc6b46d3-5269-4483-bc4b-5fd6b0803c3&title=)
docs/组件说明/19分组玫瑰图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 分组玫瑰图
---
采用分组的形式对数据进行比较。<br />![GroupedRoseChart 分组玫瑰图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227816785-33de543b-91d2-4e26-916c-3e97f1bb65eb.png#clientId=u760bc2d6-91b1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ucf50fbd6&margin=%5Bobject%20Object%5D&name=GroupedRoseChart%20%E5%88%86%E7%BB%84%E7%8E%AB%E7%91%B0%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26309&status=done&style=none&taskId=u1d036b34-d200-470a-a313-6cd151e46e1&title=)
docs/组件说明/1固钉.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 固钉
---
将页面元素钉在可视范围。
<a name="hcCkf"></a>
### 使用指南
- 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。如表单的取消/提交按钮。
![截屏2022-04-01 上午2.04.46.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1648749934588-6a6df617-3b83-4d39-b602-ae9fdfc550aa.png#clientId=u13da3a0f-d565-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u071b922a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-04-01%20%E4%B8%8A%E5%8D%882.04.46.png&originHeight=307&originWidth=293&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12423&status=done&style=none&taskId=u3fbb2b6f-d9a9-4f01-8057-8efb3405cce&title=)
docs/组件说明/1头像.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 头像
---
用图标、图片、字符的形式展示用户或事物信息
<a name="pNqeC"></a>
### 使用指南
- 需要展示用户的个性化信息识别标示。
![截屏2022-03-20 下午4.36.10.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765392884-48cb8771-e877-4274-aee4-acb3e38fdddb.png#clientId=u4f62dff6-e87c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u92e43762&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.36.10.png&originHeight=190&originWidth=244&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14594&status=done&style=none&taskId=uca90eb33-a663-48b2-bf69-8387934b96d&title=)![截屏2022-03-20 下午4.36.17.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765392882-e89947c0-cfe3-40ea-b19a-b3fdd80404e0.png#clientId=u4f62dff6-e87c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u628235f7&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.36.17.png&originHeight=142&originWidth=223&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11709&status=done&style=none&taskId=u3e587b45-141a-4746-9a82-eecf1034076&title=)
docs/组件说明/1弹性布局.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 弹性布局
---
弹性布局组件——即Flex布局，可以简便、完整、响应式地实现多种页面布局。<br />任何一个容器都可以指定为 Flex 布局。行内元素也可以使用Flex布局。
<a name="BNthQ"></a>
### 使用指南
- 用于弹性布局, 通过display: flex实现。
- 支持大部分浏览器使用。
<a name="bzUCg"></a>
![截屏2022-03-20 下午12.11.07.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749485458-15ce6492-bc3c-4a1f-bf4e-e330193e3352.png)
docs/组件说明/1折线图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 折线图
---
使用一条折线的线段显示数据在一个具有顺序性的维度上的变化。<br />![LineChart 折线图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226147604-0febb7ea-edff-4e78-9aba-460c1751aafd.png#clientId=ueb2c58b0-6f56-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ude6e3961&margin=%5Bobject%20Object%5D&name=LineChart%20%E6%8A%98%E7%BA%BF%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18065&status=done&style=none&taskId=uc733fdf6-a7c6-4897-982c-aa3577ba72a&title=)
docs/组件说明/1气泡提示.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-1: 反馈
title: 气泡提示
---
文字提示的气泡框。
<a name="eOfRG"></a>
### 使用指南
- 当需要鼠标移到文字、图片、输入框等组件上方，需要展示文字解释说明时
![截屏2022-03-20 下午4.45.40.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765975431-cdf86cca-65cf-4527-a26f-1151dee23768.png#clientId=u84034962-4fb2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9af52593&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.45.40.png&originHeight=278&originWidth=444&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25697&status=done&style=none&taskId=u200b0fe2-28b7-408e-bcc8-fb6992d79d7&title=)![截屏2022-03-20 下午4.45.46.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765975421-272db047-4e67-4ba6-84cb-dee80a618f8d.png#clientId=u84034962-4fb2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u85c1a9bd&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.45.46.png&originHeight=252&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22929&status=done&style=none&taskId=u4bf0d971-9c94-4dae-9346-84940bf7cf5&title=)![截屏2022-03-20 下午4.45.52.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765975442-eafd9d67-0c35-467e-92c6-2512e4456cc3.png#clientId=u84034962-4fb2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5a08d94f&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.45.52.png&originHeight=282&originWidth=431&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25191&status=done&style=none&taskId=ue1f40886-45a3-4a22-8590-36d7ef53790&title=)![截屏2022-03-20 下午4.45.59.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765975437-9a96050a-7096-4eff-bb15-162e83ab67ca.png#clientId=u84034962-4fb2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubd4e024c&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.45.59.png&originHeight=214&originWidth=704&originalType=binary&ratio=1&rotation=0&showTitle=false&size=27529&status=done&style=none&taskId=u3560e0e3-2b9e-4b62-84ec-6719cf6d0c9&title=)
docs/组件说明/1级联选择.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 级联选择
---
级联选择适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。一般而言，级联选择包括：选择器和级联。
<a name="a8tYq"></a>
### 使用指南
- 当数据集合较大，且子集合数据间有结构性关联，需要多级分类以便用户选择时；
- 当数据信息有明确的层级结构，需要用户逐级查看、选择使用时。
![截屏2022-03-20 下午1.21.36.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753706480-01a42595-8c16-460b-85ae-dcca15690e32.png#clientId=u48da5b41-bb76-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0603d186&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.21.36.png&originHeight=284&originWidth=394&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28631&status=done&style=none&taskId=u4cc75f04-ede3-422c-80d1-202549a1247&title=)
docs/组件说明/20雷达图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 雷达图
---
雷达图又叫蜘蛛网图。传统的雷达图被认为是一种表现多维（4 维以上）数据的图表。它将多个维度的数据量映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就称为了雷达图。<br />![RadarChart 雷达图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227865681-21f5c2d5-4960-4533-8daf-2ca43caaedee.png#clientId=ua7e5020b-6c26-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ud2390808&margin=%5Bobject%20Object%5D&name=RadarChart%20%E9%9B%B7%E8%BE%BE%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=36008&status=done&style=none&taskId=ue478fefd-6fe4-40d7-babe-23d2e56e83b&title=)
docs/组件说明/21散点图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 散点图
---
散点图是将所有的数据以不同颜色的点的形式展现在平面直角坐标系上的统计图表。<br />![ScatterChart 散点图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227926327-ca4dffb8-02ad-472f-96a9-06b80844e9ad.png#clientId=u77978b2d-090c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0d86d179&margin=%5Bobject%20Object%5D&name=ScatterChart%20%E6%95%A3%E7%82%B9%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15668&status=done&style=none&taskId=u5636d3fd-7003-456d-9937-899a601f4c1&title=)
docs/组件说明/22气泡图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 气泡图
---
气泡图是一种多变量的统计图表，由笛卡尔坐标系（直角坐标系）和大小不一、颜色不同的圆组成，可以看作是散点图的变形。<br />![BubbleChart 气泡图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227954127-86555017-3739-4041-bd6d-1436502f17f8.png#clientId=ua1c63b32-5175-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ucf5ddd78&margin=%5Bobject%20Object%5D&name=BubbleChart%20%E6%B0%94%E6%B3%A1%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28099&status=done&style=none&taskId=u21707e97-2808-47d6-86d2-3c97d0a1d48&title=)
docs/组件说明/23热力图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 热力图
---
热力图，是一种通过对色块着色来显示数据的统计图表。<br />![HeatmapChart 热力图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227976654-170622e0-dca9-4b49-8776-475288284a62.png#clientId=u4497ed1e-edaf-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubb682a2c&margin=%5Bobject%20Object%5D&name=HeatmapChart%20%E7%83%AD%E5%8A%9B%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16495&status=done&style=none&taskId=u8a54cf61-8545-4cdd-80f3-65eb51d674d&title=)
docs/组件说明/24密度热力图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 密度热力图
---
密度热力图是一种绘制在地图之上散点区域型热力图。<br />![DensityHeatmapChart 密度热力图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647227999778-9bd2fa1a-4892-4b15-88e4-e16d5489dd39.png#clientId=u5baefcf9-c472-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2bf0a6ef&margin=%5Bobject%20Object%5D&name=DensityHeatmapChart%20%E5%AF%86%E5%BA%A6%E7%83%AD%E5%8A%9B%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=122855&status=done&style=none&taskId=u0bfeff0c-1ace-480c-a385-338bdb8ee10&title=)
docs/组件说明/25矩形树图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 矩形树图
---
用于层次结构的数据可视化。<br />![TreemapChart 矩形树图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647228154896-b182b83b-8fd6-4adf-8eed-dad96160ea48.png#clientId=ua457d880-7c3a-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2764aca3&margin=%5Bobject%20Object%5D&name=TreemapChart%20%E7%9F%A9%E5%BD%A2%E6%A0%91%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10172&status=done&style=none&taskId=u129641cc-39cb-4e3f-aed3-a4cd0f779c5&title=)
docs/组件说明/26日历图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 日历图
---
按日期记录的时间序列数据，以日历的方式在二维图形中进行展示，同时用不同的颜色表示观测数据的不同取值，就得到了日历图。我们可以用日历图展示金融数据，如收盘价、收益率、某种技术指标、回测信号等等。<br />![CalendarChart 日历图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647228382475-7b335178-478d-4a87-a4a2-5c4d0a820007.png#clientId=u23065f95-aaf5-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0ceb4960&margin=%5Bobject%20Object%5D&name=CalendarChart%20%E6%97%A5%E5%8E%86%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19605&status=done&style=none&taskId=u7b4c2fbe-b122-4299-bb84-d537f420ec6&title=)
docs/组件说明/27子弹图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 子弹图
---
通过巧妙地使用图层在单个可视化中对定量和定性指标进行编码。<br />![BulletChart 子弹图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647228531526-7d027b85-b80e-45d9-89fd-42e5b149d916.png#clientId=ua4627885-659e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u85a2cd0b&margin=%5Bobject%20Object%5D&name=BulletChart%20%E5%AD%90%E5%BC%B9%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9343&status=done&style=none&taskId=u4bd0a888-58ef-448a-a35e-5b922501e05&title=)
docs/组件说明/28仪表盘.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 仪表盘
---
可以具有更强的说服力，图表可以非常直观又明显的呈现出结果，具有更大的视觉冲击力。数据可视化还能够更好的促进决策人采取行动，这样遇到问题可以及时更正。<br />![GaugeChart 仪表盘.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230050434-fe7f2c9d-0d1e-4378-99b6-029c64a45b3c.png#clientId=uf996c034-7813-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u04b5724f&margin=%5Bobject%20Object%5D&name=GaugeChart%20%E4%BB%AA%E8%A1%A8%E7%9B%98.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23185&status=done&style=none&taskId=u5a3268e6-27c7-467f-b0df-9c15ab7c19c&title=)
docs/组件说明/29水波图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 水波图
---
一种用球形容器和其中的水平线位置来表示进度的示意图。<br />![LiquidChart 水波图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230585654-79c3635f-ae4c-4384-aad7-270fb73b6d72.png#clientId=u4878535c-056d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u21ac9c5a&margin=%5Bobject%20Object%5D&name=LiquidChart%20%E6%B0%B4%E6%B3%A2%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=27077&status=done&style=none&taskId=u35af9f10-98b7-4d11-abd6-53cdad55bb5&title=)
docs/组件说明/2复选按钮.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 复选按钮
---
在一组备选项中进行多选。
<a name="kN81M"></a>
### 使用指南
- 在一组可选项中进行多项选择时；
- 需要对在两种状态之间进行切换时，如选中/未选中，打开/关闭；
- 一个标记控件，通过触发操作按钮才能生效时，多用于表单提交等。
![截屏2022-03-20 下午1.22.11.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753743885-af784c70-98b6-420a-8536-a0ccf7c214fa.png#clientId=ue81093a9-1cbb-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uc6d60d17&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.22.11.png&originHeight=145&originWidth=610&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16787&status=done&style=none&taskId=ubbef1473-5c77-4f9f-8d3d-ed205f78d0f&title=)
docs/组件说明/2导航.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: 导航
title: 导航
---
为页面和功能提供导航的菜单列表，并提供跳转。
<a name="Rrfwv"></a>
### 使用指南
一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。<br />![截屏2022-03-12 下午10.11.49.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647094323831-f304f89c-d258-4544-a840-0599d8223470.png#clientId=ue9ad24c7-e4fc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4799d99a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-12%20%E4%B8%8B%E5%8D%8810.11.49.png&originHeight=202&originWidth=1318&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25412&status=done&style=none&taskId=u37ff8e67-dff2-4a94-8ea1-27e3552dec6&title=)<br />![截屏2022-03-13 上午10.43.59.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647139644723-73141f87-8d57-4b40-9041-c66891ca0ce8.png#clientId=ue6516200-cd8d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8a2e9ce5&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-13%20%E4%B8%8A%E5%8D%8810.43.59.png&originHeight=631&originWidth=309&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31004&status=done&style=none&taskId=ud1d37e4e-73df-499a-9d46-05ebcc4b414&title=)
docs/组件说明/2弹窗.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-2: 反馈
title: 弹窗
---
对话框，一种临时窗口，通常在不想中断用户整体流程，但又需要展示信息或需要用户反馈时，在页面中打开的窗口。
<a name="G2Cpg"></a>
### 使用指南
- 需要展示操作反馈或提示信息
- 需要填写或展示相关信息，需要中断用户操作，但不中断当前流程时
![截屏2022-03-20 下午4.46.29.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647766008060-ef348211-67dc-4901-b57d-afcf2c9aebb3.png#clientId=u459f145f-0f32-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u869b38e1&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.46.29.png&originHeight=380&originWidth=564&originalType=binary&ratio=1&rotation=0&showTitle=false&size=36575&status=done&style=none&taskId=uca91291d-e997-448f-b3d7-6acae9c0207&title=)![截屏2022-03-20 下午4.46.34.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647766008107-00eaa807-eb43-4eaf-a632-a243f28e515e.png#clientId=u459f145f-0f32-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2d456128&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.46.34.png&originHeight=356&originWidth=586&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31393&status=done&style=none&taskId=uec1ac9f5-139f-4338-943e-53a0744d115&title=)
docs/组件说明/2徽标数.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 徽标数
---
主要用于通知未读数的角标，提醒用户点击。
<a name="nLEZz"></a>
### 使用指南
- 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
![截屏2022-03-20 下午4.36.53.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765426024-49a05147-1b43-4323-be57-2576287bc90c.png#clientId=uc259865a-fa6f-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8c7b9454&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.36.53.png&originHeight=173&originWidth=202&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11460&status=done&style=none&taskId=u12b525d7-de20-4647-98c1-656d5a79140&title=)
docs/组件说明/2按钮.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 按钮
---
按钮用于触发一个操作，如提交表单。
<a name="xpWyp"></a>
### 使用指南
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
- 主要按钮：一个页面优先级最高的操作，引导用户去关注并操作
- 次要按钮：即描边按钮，通常与主要按钮搭配使用，弱于主要按钮，一般性操作
- 虚框按钮：常用语表单添加项
- 失效按钮：代表此按钮不会触发。
- 危险按钮：用于删除、修改权限等操作，引起用户警示
- 幽灵按钮：用于背景色深色处，如banner场景
- 文字按钮：视觉最弱的按钮，通常用于表格操作栏、文字链接等
![截屏2022-03-20 下午12.12.01.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749569417-db27d454-f397-44d0-80c2-3ec93500de25.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u115bd522&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.01.png&originHeight=326&originWidth=319&originalType=binary&ratio=1&rotation=0&showTitle=false&size=21423&status=done&style=none&taskId=u90c4f42b-ee2c-4198-bf62-4e1c044fe7f&title=)![截屏2022-03-20 下午12.12.07.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749569479-87c25d45-bfbd-4be9-ac8e-588d5bc4a89b.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u59814ea3&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.07.png&originHeight=308&originWidth=310&originalType=binary&ratio=1&rotation=0&showTitle=false&size=20961&status=done&style=none&taskId=uc94149e8-15f9-45c1-b8cc-230b65f99f8&title=)![截屏2022-03-20 下午12.12.12.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749569480-b619a170-8402-4193-8c43-22ab8cd0f0b5.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u60bc97a0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.12.png&originHeight=304&originWidth=288&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19042&status=done&style=none&taskId=ua1b8c600-db9a-405a-b8f8-4508c6f1137&title=)![截屏2022-03-20 下午12.12.16.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749569491-23903a90-c733-42e8-89ef-d777f4d9a99f.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue9836c4e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.16.png&originHeight=294&originWidth=281&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17761&status=done&style=none&taskId=u42864fac-c640-4864-8315-370b36ef6ba&title=)![截屏2022-03-20 下午12.12.23.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749569509-32bb9473-9790-47cd-a3d2-18072eade3e9.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u93252ed6&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.23.png&originHeight=299&originWidth=449&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25233&status=done&style=none&taskId=uc1af27a0-e5d1-4a5c-83b7-cb5016b8e3e&title=)![截屏2022-03-20 下午12.12.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749570148-071e41d0-9f1d-4c5e-89f6-4c63026a8094.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u981f435b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.27.png&originHeight=297&originWidth=273&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18178&status=done&style=none&taskId=u20e929d8-a3c5-4cf4-bb09-46deb5188e1&title=)![截屏2022-03-20 下午12.12.31.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749570238-24ee9815-4374-4c9f-a251-d5d5ff91ca1c.png#clientId=uc08b6222-802c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2f8e4eb9&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.12.31.png&originHeight=275&originWidth=255&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17633&status=done&style=none&taskId=u20b39938-ec5d-4adc-93c6-6ba449106f1&title=)
docs/组件说明/2锚点.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 锚点
---
用于跳转到页面指定位置。
<a name="bAXOA"></a>
### 使用指南
- 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
![截屏2022-03-21 上午11.43.10.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834201702-26e795b9-2280-4142-a969-0cf4f741f79c.png#clientId=uf487d86d-74e1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0af820f4&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.43.10.png&originHeight=286&originWidth=218&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15230&status=done&style=none&taskId=u4cf6296d-171f-4a76-98bc-6b55facf9ae&title=)
docs/组件说明/2阶梯折线图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 阶梯折线图
---
折线根据分类字段分为多根在 x 方向（时间）的信息是完全一致、颜色及 y 方向（变量）信息不一致的折线，通常用作同一时间区间内多个变量发展趋势的对比。<br />![StepLineChart 阶梯折线图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226186272-bb495429-d1c9-4420-a692-9e6ff6746677.png#clientId=u1cf1a160-ea1f-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ua32fdf0d&margin=%5Bobject%20Object%5D&name=StepLineChart%20%E9%98%B6%E6%A2%AF%E6%8A%98%E7%BA%BF%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12556&status=done&style=none&taskId=uafeee714-ffc7-4851-a2cd-d3208169c70&title=)
docs/组件说明/30词云.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 词云
---
“词云”就是通过形成“关键词云层”或“关键词渲染”，对文本中出现频率较高的“关键词”的视觉上的突出。 词云图过滤掉大量的文本信息，使浏览者只要一眼扫过文本就可以领略文本的主旨。<br />![WordCloudChart 词云.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230634024-8797d2cc-060a-4226-b0b7-cde36b664054.png#clientId=ue9a93127-96a6-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0de28ca9&margin=%5Bobject%20Object%5D&name=WordCloudChart%20%E8%AF%8D%E4%BA%91.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43868&status=done&style=none&taskId=u6b45959b-fecd-4354-ba17-59c32f9599d&title=)
docs/组件说明/31漏斗图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 漏斗图
---
用于表达数据从一个阶段到另一阶段逐步减少的过程。其中每个阶段的数据都表示为整体中的不同部分。 与饼图一样，“漏斗图”不使用任何轴。<br />漏斗的每个阶段代表总数的一部分。因此，它假定为漏斗形-第一阶段是最宽且最大的阶段。 显示的值按比例递减，总计总计为 100％。<br />![FunnelChart 漏斗图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230675857-721ab523-0012-4dd4-9057-7002102d3e11.png#clientId=u9587fe5a-b8b5-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u81d74a61&margin=%5Bobject%20Object%5D&name=FunnelChart%20%E6%BC%8F%E6%96%97%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14642&status=done&style=none&taskId=uca62c9f1-75d8-435c-bf8e-77712de5849&title=)
docs/组件说明/32中国地图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 中国地图
---
![ChinaMap 中国地图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230718795-b093e8e2-5e2f-405f-84a6-e658636d37f3.png#clientId=u833d9131-413e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ued8fc002&margin=%5Bobject%20Object%5D&name=ChinaMap%20%E4%B8%AD%E5%9B%BD%E5%9C%B0%E5%9B%BE.png&originHeight=1360&originWidth=1100&originalType=binary&ratio=1&rotation=0&showTitle=false&size=371550&status=done&style=none&taskId=u79f1e245-e158-435b-ab4e-fc8c7c7992f&title=)
docs/组件说明/33世界地图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 世界地图
---
![WorldMap 世界地图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647230748238-a66cc211-4ef8-411b-9406-ce80f6a72c6b.png#clientId=uce6a3bf8-40af-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u71e036b3&margin=%5Bobject%20Object%5D&name=WorldMap%20%E4%B8%96%E7%95%8C%E5%9C%B0%E5%9B%BE.png&originHeight=625&originWidth=1050&originalType=binary&ratio=1&rotation=0&showTitle=false&size=96980&status=done&style=none&taskId=ud6cb9720-203d-4e13-b93f-87ec0fd1138&title=)
docs/组件说明/3分隔符.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 分隔符
---
分割线，起到分割组织的作用，增加各模块之间的对比，使同模块的内容更整洁，便于用户理解层级关系。
<a name="RFYu6"></a>
### 使用指南
- 对文本段落进行分割。
- 在表格中对行内文字或链接进行分割。
![截屏2022-03-20 下午12.13.35.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749636160-3b440316-e030-4292-a336-5bdaf85df016.png#clientId=u6b18cf1e-b753-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=udaffd4b0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.13.35.png&originHeight=287&originWidth=601&originalType=binary&ratio=1&rotation=0&showTitle=false&size=24005&status=done&style=none&taskId=ua07400d1-7da0-4d6c-85ba-45429322c76&title=)![截屏2022-03-20 下午12.13.40.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749641702-fb0285e6-313a-4efe-b332-3aa837ee7fb0.png#clientId=u6b18cf1e-b753-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u41d7fa6a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.13.40.png&originHeight=87&originWidth=283&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8821&status=done&style=none&taskId=u1f89d7b3-8144-433c-ae38-a3960057e13&title=)
docs/组件说明/3动画.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 动画
---
让界面表达明确、清晰、流畅，从而增强用户感知。
<a name="jTiuO"></a>
### 使用指南
- 动效的持续时长和速度
大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间，这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来，而超过1秒的动效会让人有迟滞感。元素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果
- 缓动
缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然。动画曲线有助于正确传达讯息，甚至表达情绪和感觉。通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。
动画通过模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。<br />如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。<br />![截屏2022-03-21 上午11.43.48.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834242685-09f80440-70bd-4c8e-b53e-15100f038651.png#clientId=u8f1eef4b-724a-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub140d629&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.43.48.png&originHeight=828&originWidth=598&originalType=binary&ratio=1&rotation=0&showTitle=false&size=83634&status=done&style=none&taskId=ue24ba69f-5870-411b-982e-dac66b2e779&title=)
docs/组件说明/3抽屉.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-2: 反馈
title: 抽屉
---
抽屉常通过单击临近的按钮控件打开，从屏幕边缘滑入的浮层面板。
<a name="qVheR"></a>
### 使用指南
- 当需要一个附加的面板来对页面内容做补充说明时；
- 当需要在当前任务流中插入临时操作任务时。
![截屏2022-03-20 下午4.51.15.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647766292202-49d3e26d-8a1a-41a9-8b71-e42bfaa2abf8.png#clientId=u0157c9cb-534b-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u907e612e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.51.15.png&originHeight=659&originWidth=362&originalType=binary&ratio=1&rotation=0&showTitle=false&size=42223&status=done&style=none&taskId=ua8ca13ad-cb13-4f2b-8cf0-3bc9f24eb9b&title=)
docs/组件说明/3日历.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 日历
---
按照日历形式展示数据或日期的容器。
<a name="hGNM1"></a>
### 使用指南
- 当需要展示或操作与“日期”相关数据时。
![截屏2022-03-20 下午4.37.37.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765479534-8aeaaa9c-e36b-43b3-b051-5c6c64ec8f89.png#clientId=ued5e94e6-4348-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubcdfc13b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.37.37.png&originHeight=451&originWidth=615&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47275&status=done&style=none&taskId=u52acee16-432d-423a-864e-6d2cc7daeb0&title=)![截屏2022-03-20 下午4.37.41.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765479561-126eeaf8-3760-4e24-8222-f3fd5f491296.png#clientId=ued5e94e6-4348-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5b99b395&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.37.41.png&originHeight=428&originWidth=328&originalType=binary&ratio=1&rotation=0&showTitle=false&size=30738&status=done&style=none&taskId=ueabe85bd-d1a3-4f8b-bd7d-ff1231aa151&title=)![截屏2022-03-20 下午4.37.45.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765479568-39a13799-4196-4e86-a338-fcf1211c2d46.png#clientId=ued5e94e6-4348-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5ba52f65&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.37.45.png&originHeight=417&originWidth=349&originalType=binary&ratio=1&rotation=0&showTitle=false&size=20759&status=done&style=none&taskId=ueaf0b646-dfce-44d6-b3ff-86c56589893&title=)
docs/组件说明/3日期选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 日期选择器
---
用于选择某一具体日期或某一段日期区间。
<a name="a7IU8"></a>
### 使用指南
- 输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
![截屏2022-03-20 下午1.22.43.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753812894-21a169d5-2263-4311-bd01-12ea0cefebf2.png#clientId=u5e55c18c-d7ec-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=udbb79c4f&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.22.43.png&originHeight=307&originWidth=314&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18357&status=done&style=none&taskId=uc6bc4c88-ef0f-413b-b0fb-0d32e4dcded&title=)![截屏2022-03-20 下午1.22.47.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753812941-d82baf25-2053-41cb-b63d-99cf3e2e8521.png#clientId=u5e55c18c-d7ec-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uf693a209&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.22.47.png&originHeight=272&originWidth=300&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13943&status=done&style=none&taskId=u6d85cf12-9d23-4d5f-b665-32c418ec350&title=)![截屏2022-03-20 下午1.22.50.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753812972-bfb1c241-d291-477f-b8ae-5f3bba6667e2.png#clientId=u5e55c18c-d7ec-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u7a65880a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.22.50.png&originHeight=223&originWidth=305&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13418&status=done&style=none&taskId=u267d88ed-9663-49c4-aca4-fe1e4a91fe0&title=)![截屏2022-03-20 下午1.22.53.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753812975-f6b36dd9-4144-42df-96c1-0ce66c2a0e57.png#clientId=u5e55c18c-d7ec-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9cae839d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.22.53.png&originHeight=147&originWidth=318&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10390&status=done&style=none&taskId=u97e7ed29-8eef-4b19-a72a-18e91d8ca96&title=)
docs/组件说明/3翻页器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: 导航
title: 翻页器
---
当数据量过多时，可以使用分页组件，每次置加载一页数据。
<a name="eAtoK"></a>
### 使用指南
- 当数据内容较多，需要分页展示或分批加载时；
- 当表格、列表需要在不同页面切换内容时。
![截屏2022-03-20 下午1.10.19.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753057440-2f859bf1-9258-4363-86ab-e0781fd8a7e3.png#clientId=uceac1eb8-63ff-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5a8620db&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.10.19.png&originHeight=162&originWidth=492&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13999&status=done&style=none&taskId=u91aae776-625d-4771-88dc-64c4cd50529&title=)![截屏2022-03-20 下午1.10.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753057472-20794bbc-a49e-4af4-827e-81e5472b50a1.png#clientId=uceac1eb8-63ff-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uc9a070d4&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.10.27.png&originHeight=111&originWidth=361&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10076&status=done&style=none&taskId=u5860ffc8-77c7-4e97-93dc-1827d1d99b4&title=)![截屏2022-03-20 下午1.10.35.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753057708-c755d7eb-9a8d-4426-ac1a-5afe090957ca.png#clientId=uceac1eb8-63ff-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u973496df&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.10.35.png&originHeight=85&originWidth=231&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8999&status=done&style=none&taskId=u6e2aa1a9-463d-498f-9383-ef447a17fb9&title=)<br />![截屏2022-03-20 下午1.10.42.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753057697-f5df80bb-43b5-42f8-9acb-5dc9c1401639.png#clientId=uceac1eb8-63ff-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8f4b4a01&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.10.42.png&originHeight=77&originWidth=178&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8473&status=done&style=none&taskId=u7b0608d3-b47b-4418-86dc-50833715076&title=)
docs/组件说明/3面积图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 面积图
---
使用带填充区域的线段显示数据在一个具有顺序性的维度上的变化。<br />![AreaChart 面积图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226216018-4d182120-2c61-40ce-b1aa-9c2aba1592a6.png#clientId=u7c890c1c-9a3c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub4dbaee8&margin=%5Bobject%20Object%5D&name=AreaChart%20%E9%9D%A2%E7%A7%AF%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17717&status=done&style=none&taskId=u51a8aebc-2fcd-4cec-8e45-a0af70b8f4a&title=)
docs/组件说明/4全局配置组件.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 全局配置组件
---
在应用的最外层进行配置，一次设置，全局生效。一般用于设置国际化语言等功能。
<a name="y1Y2j"></a>
### 使用指南
实现多语言文案切换、修改默认组件尺寸等场景<br />![截屏2022-03-21 上午11.45.05.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834336549-4b6b8b0d-e678-4a27-8363-cd76fd73be3d.png#clientId=ue3c5448b-c23e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uf0656a5b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.05.png&originHeight=284&originWidth=317&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18721&status=done&style=none&taskId=u1f249f24-d046-4027-897d-f65f4646c9c&title=)
docs/组件说明/4加载.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-2: 反馈
title: 加载
---
在网络较慢或数据较多时，表示数据正在加载的状态。
<a name="WAoST"></a>
### 使用指南
- 当页面局部或全部处于数据处理等待中，需要缓解用户的焦虑感。
![截屏2022-03-21 上午11.39.20.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647833973756-756b7047-7d65-48fa-a5af-3fec3245ea8e.png#clientId=u046374f7-fcb3-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u83c7db2f&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.39.20.png&originHeight=188&originWidth=263&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12706&status=done&style=none&taskId=uc3b6d7c2-30fb-4373-b16e-49551f8f912&title=)
docs/组件说明/4卡片.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 卡片
---
通用卡片容器。
<a name="bKRCR"></a>
### 使用指南
- 当一个模块的同类信息不能自然形成区块感，可借助 Card 组件将信息整合，帮助界面信息模块感更强。
![截屏2022-03-20 下午4.38.22.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765529246-6a43609d-86c2-4135-abf0-f0f7d0b55458.png#clientId=ucbc35680-dd3c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uff1c231b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.38.22.png&originHeight=253&originWidth=265&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16285&status=done&style=none&taskId=u6fdd222e-87df-4d58-b43f-040675f7fdf&title=)<br />![截屏2022-03-20 下午4.38.29.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765529257-25c4c117-960f-4ed7-8e22-2b00d32c015e.png#clientId=ucbc35680-dd3c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue4df1953&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.38.29.png&originHeight=192&originWidth=222&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11186&status=done&style=none&taskId=ubc9af399-b4b8-4aa2-87e2-b3e574cb027&title=)<br />![截屏2022-03-20 下午4.38.35.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765529355-882dbc7a-dc47-4163-9d6f-c85b001a57c1.png#clientId=ucbc35680-dd3c-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uafdf4b5b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.38.35.png&originHeight=296&originWidth=241&originalType=binary&ratio=1&rotation=0&showTitle=false&size=53254&status=done&style=none&taskId=ub73b8944-c83e-497c-9d4b-52617b5a66b&title=)
docs/组件说明/4堆叠面积图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 折叠面积图
---
使用带不同样式的填充区域的层叠线段来显示多组数据在同一个具有顺序性的维度上的变化，线段在同一维度值上的端点高度按照数值累加。<br />![StackedAreaChart 堆叠面积图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226242254-dc263c84-9f91-4a30-9db7-2b1c5f040090.png#clientId=u8bfeb3a8-97f2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9cc3d653&margin=%5Bobject%20Object%5D&name=StackedAreaChart%20%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26149&status=done&style=none&taskId=u5075d249-1699-4c8a-bbef-c9dfa044d67&title=)
docs/组件说明/4时间选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 时间选择器
---
用于选择某一具体时间点或某一时间段，与弹出的面板配合使用。
<a name="JZcIc"></a>
### 使用指南
- 当在用户需要时间输入，或进行时间条件筛选时。
![截屏2022-03-20 下午1.23.55.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753893469-c4fb8878-0d3a-4d03-8c10-2a0d314fbe6d.png#clientId=u982605ad-23cc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u549cbdfd&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.23.55.png&originHeight=312&originWidth=310&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18691&status=done&style=none&taskId=u9265a791-58b6-416e-a8a9-17eb47ea81f&title=)![截屏2022-03-20 下午1.23.59.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753893514-d559444e-5525-4c5d-87e2-a4f18142a3b9.png#clientId=u982605ad-23cc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue18bc92e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.23.59.png&originHeight=290&originWidth=309&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16625&status=done&style=none&taskId=uc62e0452-0596-4a94-8c6f-410abcb82d8&title=)![截屏2022-03-20 下午1.24.04.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753893541-ed53e1b1-4ff0-4ae3-a903-040e5a634617.png#clientId=u982605ad-23cc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9dbf10ce&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.24.04.png&originHeight=242&originWidth=286&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14209&status=done&style=none&taskId=u9cce8ede-1497-46d0-b38e-b088820fba2&title=)<br />![截屏2022-03-20 下午1.24.26.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753893563-439eba2d-49ce-4d57-b728-8a69cfd90392.png#clientId=u982605ad-23cc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u6ea112b2&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.24.26.png&originHeight=302&originWidth=209&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19357&status=done&style=none&taskId=uc8a3f8d8-e006-4e83-802b-7660e84403f&title=)<br />![截屏2022-03-20 下午1.24.30.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753893575-2e388b4a-f137-40a8-b4de-770ec5d7af7c.png#clientId=u982605ad-23cc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue446285e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.24.30.png&originHeight=305&originWidth=153&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15746&status=done&style=none&taskId=u5aeaca1b-f30a-47ec-b140-7a10af8139d&title=)
docs/组件说明/4步骤.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: 导航
title: 步骤
---
提示用户进度及当前步骤，引导用户按照流程完成任务的导航条。
<a name="kBjyS"></a>
### 使用指南
- 数据内容需要分步骤显示，通过步骤让用户对整个流程有所预期时；
- 任务无法一次完成，需要呈现任务进度以及当前步骤时。
![截屏2022-03-20 下午1.12.17.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753183562-c998ded4-58b2-443e-a5dd-90cd218fc4b7.png#clientId=u5edf80af-a56e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2cd27a8d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.12.17.png&originHeight=129&originWidth=886&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22204&status=done&style=none&taskId=u8c5679a7-c05e-4789-ada8-be25e9d924a&title=)![截屏2022-03-20 下午1.12.24.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753183614-dd936cd4-d170-4421-beee-dce8ec88b099.png#clientId=u5edf80af-a56e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubf8f406c&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.12.24.png&originHeight=125&originWidth=685&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19084&status=done&style=none&taskId=u3e9d120c-996a-43d7-928d-81e9242b47c&title=)![截屏2022-03-20 下午1.12.31.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753183648-1481e918-d379-44bb-94d0-0115267687e7.png#clientId=u5edf80af-a56e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ufd33a5f2&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.12.31.png&originHeight=120&originWidth=807&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23623&status=done&style=none&taskId=u64369ccc-0726-4bfa-bd0a-e4d47cc965a&title=)![截屏2022-03-20 下午1.12.45.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753183654-8bad85aa-8584-4a0a-9236-5bf39bcbbaad.png#clientId=u5edf80af-a56e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ua98bce16&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.12.45.png&originHeight=285&originWidth=222&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22306&status=done&style=none&taskId=u52dd2d44-7e77-45ab-89c9-c212189d0ca&title=)![截屏2022-03-20 下午1.12.48.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753183676-a455ff62-4fff-4943-be84-1c3a55ef439c.png#clientId=u5edf80af-a56e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u8e82eba3&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.12.48.png&originHeight=256&originWidth=229&originalType=binary&ratio=1&rotation=0&showTitle=false&size=20483&status=done&style=none&taskId=u90881719-7e1c-4f49-8a46-690bd32eea9&title=)
docs/组件说明/4珊格.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 栅格
---
AC Design采用了24列珊格系统，同时为提高市场多数主流分辨率场景的响应规则，使用2，3，4，5分比布局，使用珊格系统可以提高界面内布局的一致性，节约成本。<br />![截屏2022-03-20 下午12.14.22.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749674304-401d5911-e30b-4cfe-8823-c4985205ebc3.png#clientId=ub34cfbc9-785f-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u25e1ec1d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.14.22.png&originHeight=682&originWidth=977&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43950&status=done&style=none&taskId=u000cd90c-0e97-46ce-bbfe-592c9e6a654&title=)
docs/组件说明/5下拉菜单.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 下拉菜单
---
将备选命令或菜单折叠到向下展开的浮层容器中。
<a name="H2Jay"></a>
### 使用指南
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。<br />![截屏2022-03-21 上午11.45.10.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834346939-8f19d481-90a3-4023-b2af-ef62ab58b599.png#clientId=u5e4030e8-0508-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u613b997b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.10.png&originHeight=279&originWidth=251&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17784&status=done&style=none&taskId=uecde4b04-d866-45b3-bb66-8445cceae45&title=)![截屏2022-03-21 上午11.45.13.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834346957-9c099472-5bdb-4706-ab83-4ece5da5102c.png#clientId=u5e4030e8-0508-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u845c2c94&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.13.png&originHeight=212&originWidth=215&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13280&status=done&style=none&taskId=udd8c5d81-b294-40b3-93ec-3c77ae708b9&title=)![截屏2022-03-21 上午11.45.16.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834346971-27167f54-e4dc-4a92-8c8d-f72c7abab1a3.png#clientId=u5e4030e8-0508-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4c61ae74&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.16.png&originHeight=211&originWidth=186&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13446&status=done&style=none&taskId=ub31dacaf-8f7b-4c21-864d-6e21f4d1a94&title=)![截屏2022-03-21 上午11.45.18.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834347006-ef330caa-73bf-4421-9f36-2c503a95cffc.png#clientId=u5e4030e8-0508-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u26322836&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.18.png&originHeight=226&originWidth=224&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13167&status=done&style=none&taskId=u729100da-78ac-4f8e-8a0d-2dcb844fdbb&title=)
docs/组件说明/5信息提示.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-2: 反馈
title: 选项卡
---
全局展示操作反馈信息。
<a name="czQzr"></a>
### 使用指南
- 提供成功、警告和错误等反馈信息。
- 在操作完成后，需要总体反馈时。
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
![截屏2022-03-21 上午11.39.55.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834054817-9a68a60f-9d69-45cb-8b04-93b2af207170.png#clientId=uedfe2e0a-1db2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue4c33237&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.39.55.png&originHeight=333&originWidth=663&originalType=binary&ratio=1&rotation=0&showTitle=false&size=46456&status=done&style=none&taskId=u670de553-daf7-4d5f-beee-62b0ae990a7&title=)![截屏2022-03-21 上午11.40.13.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834054879-5bef8cce-637e-469b-9808-6897d7ca3664.png#clientId=uedfe2e0a-1db2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u33f3ea14&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.40.13.png&originHeight=296&originWidth=661&originalType=binary&ratio=1&rotation=0&showTitle=false&size=40454&status=done&style=none&taskId=ue76079a6-d218-492d-862b-a0aea803b2a&title=)![截屏2022-03-21 上午11.40.21.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834054886-e83656ca-bd4d-45b5-884d-b666d6c45583.png#clientId=uedfe2e0a-1db2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ua64c833e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.40.21.png&originHeight=297&originWidth=653&originalType=binary&ratio=1&rotation=0&showTitle=false&size=41495&status=done&style=none&taskId=ua6f8f8f4-e8bf-47de-a5f6-a9a98570c23&title=)![截屏2022-03-21 上午11.40.33.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834054932-524ff46c-4dd4-474d-a795-855101a5de0b.png#clientId=uedfe2e0a-1db2-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue388e5a3&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.40.33.png&originHeight=282&originWidth=655&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43126&status=done&style=none&taskId=u04fa9566-72cd-4f5c-b50c-bbaf33f127c&title=)
docs/组件说明/5图标.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 图标
---
提供部分基础 icon <br />![Icons.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647747467138-ecc1fb2b-790f-4a4d-b3dd-4c9fdc81036d.png#clientId=ua6213124-031d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u21674542&margin=%5Bobject%20Object%5D&name=Icons.png&originHeight=2433&originWidth=1440&originalType=binary&ratio=1&rotation=0&showTitle=false&size=170778&status=done&style=none&taskId=u03890713-8198-427d-bc0a-15961471d66&title=)
docs/组件说明/5地址选择器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 地址选择器
---
多级下拉城市选择组件。
<a name="CNQzb"></a>
### 使用指南
- 当在用户需要地址输入，或表格中需要进行地址区域条件筛选时。
![截屏2022-03-20 下午1.25.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753944258-c27663f5-cbcc-4bb3-9ae6-f7e308b8b700.png#clientId=u67fa7916-8de8-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uc998efe6&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.25.27.png&originHeight=406&originWidth=599&originalType=binary&ratio=1&rotation=0&showTitle=false&size=42296&status=done&style=none&taskId=udb9967b6-8cdd-49dd-9588-506525648bd&title=)
docs/组件说明/5柱状图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 柱状图
---
使用柱形显示维度的数值。横轴显示分类维度，纵轴显示相应的值。<br />![ColumnChart 柱状图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226316725-1e8ade9f-e1b6-4213-9567-8ddd107dfb85.png#clientId=uaeaf8a90-8a12-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u353d97da&margin=%5Bobject%20Object%5D&name=ColumnChart%20%E6%9F%B1%E7%8A%B6%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10548&status=done&style=none&taskId=ubbb1052c-e0be-405e-883c-66ff029863d&title=)
docs/组件说明/5级联.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 级联
---
级联组件。
<a name="Sl319"></a>
### 使用指南
- 适用于从一组具有关联性的数据集合中进行选择的交互方式。
- 由于子集目录隐藏，级联是一种节约屏幕空间的有效方法。
- 级别数因业务需求而定，建议不超过5级。
- 级联多用于表单场景，可以独立在页面中使用，也可以与其他元素组合使用，如级联选择。
![截屏2022-03-20 下午4.39.15.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765566097-6aec0c82-f5fd-4829-9b39-1af67acceb9a.png#clientId=u4ad687c5-5653-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u43d6d763&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.39.15.png&originHeight=281&originWidth=422&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26432&status=done&style=none&taskId=u6620e787-24bc-45f4-a431-4b6ece49a99&title=)
docs/组件说明/5选项卡.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: 导航
title: 选项卡
---
用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。
<a name="zzrtd"></a>
### 使用指南
- 当内容过多时需要将不同类型内容进行扁平化收纳
- 引领整个页面的内容，起到导航作用
![截屏2022-03-20 下午1.13.25.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753225199-c6d94caf-1c2e-47fa-a6d3-6562652793d5.png#clientId=u1cd2326b-64a7-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ua88ed11c&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.13.25.png&originHeight=151&originWidth=310&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14811&status=done&style=none&taskId=u54f516ef-a83a-4302-96a6-9ff53001ea3&title=)![截屏2022-03-20 下午1.13.29.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753225220-079f4f49-2bb0-4553-8c24-3b30f9050468.png#clientId=u1cd2326b-64a7-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uadab2d81&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.13.29.png&originHeight=111&originWidth=375&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13167&status=done&style=none&taskId=u2c7ca04b-8f69-41c3-a026-28b179b97a3&title=)![截屏2022-03-20 下午1.13.34.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647753225248-3b2a96b5-fcef-42ba-94ec-05fdf1cbd6eb.png#clientId=u1cd2326b-64a7-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u701e6478&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%881.13.34.png&originHeight=113&originWidth=380&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12772&status=done&style=none&taskId=u38b06a20-b892-461e-a684-8a30fd3e26c&title=)
docs/组件说明/6堆叠柱状图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 堆叠柱状图
---
使用颜色不同的堆叠的柱形来显示各维度的数值。横轴标示出第一个分类维度，颜色标示出第二个分类维度，纵轴显示相应的值。<br />![StackedColumnChart 堆叠柱状图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226360705-3e64201c-9e4b-4426-b507-d05ab63d46ad.png#clientId=u2e932b1d-afc4-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u70d4ed8f&margin=%5Bobject%20Object%5D&name=StackedColumnChart%20%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12771&status=done&style=none&taskId=u86748322-0eae-4444-930b-384515cbaff&title=)
docs/组件说明/6弹层.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 弹层
---
是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装。
<a name="PPv8x"></a>
### 使用指南
由浮层内容和触发元素组成，两者均可自定义。<br />![截屏2022-03-21 上午11.45.59.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834371676-63be7b8d-9cf7-4b63-a1d0-630f15449763.png#clientId=ud022cf49-bc13-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue4a0688a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.45.59.png&originHeight=322&originWidth=577&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22288&status=done&style=none&taskId=ua35fa759-c062-43af-949d-bebf43e1cbd&title=)
docs/组件说明/6折叠面板.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 折叠面板
---
可以折叠/展开的内容区域。
<a name="G15rL"></a>
### 使用指南
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- 手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。
![截屏2022-03-20 下午4.39.41.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765593633-07903906-d50e-4978-b7ea-3e4b8ade1675.png#clientId=u00e3b3e3-a2be-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u94b78365&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.39.41.png&originHeight=389&originWidth=739&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28723&status=done&style=none&taskId=u081cb3ad-77a4-4f89-a82d-ed0bcfc6d42&title=)
docs/组件说明/6菜单按钮.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 菜单按钮
---
提供下拉菜单的按钮。
<a name="DJe2g"></a>
### 使用指南
- 通过点击按钮打开弹层菜单。
![截屏2022-03-20 下午12.18.14.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749929666-ab8ecf60-a367-4d79-8724-7969ad052b20.png#clientId=u1903a044-3b20-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u507b1414&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.18.14.png&originHeight=106&originWidth=348&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10043&status=done&style=none&taskId=u34db2b17-174f-4c3a-aa1d-f8171f65707&title=)![截屏2022-03-20 下午12.18.23.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749929695-69cc8e85-d383-43da-8f4b-42f874d17bcf.png#clientId=u1903a044-3b20-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uef55be72&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.18.23.png&originHeight=165&originWidth=328&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13488&status=done&style=none&taskId=ub63727f1-5e0d-4f54-bfc7-f6f26d58a58&title=)![截屏2022-03-20 下午12.18.29.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749929758-4d90b6ad-1051-472e-9c80-d9f657445df5.png#clientId=u1903a044-3b20-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9026ff3d&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.18.29.png&originHeight=177&originWidth=323&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12283&status=done&style=none&taskId=u324ff131-31fd-450a-b700-7e2aeb8b80c&title=)
docs/组件说明/6表单辅助工具.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 表单辅助工具
---
表单数据管理组件。
<a name="MzNvJ"></a>
### 使用指南
- 涉及到表单数据操作的组件，根据具体产品应用情况选择组合。
![截屏2022-03-12 下午11.03.52.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647097442926-dc582b11-7a1c-4718-a33a-69dbd3eb0dbc.png#clientId=u78fe27b2-2559-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u6a87c395&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-12%20%E4%B8%8B%E5%8D%8811.03.52.png&originHeight=206&originWidth=371&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15091&status=done&style=none&taskId=u953bcf58-1e90-49a6-ab95-6e64459eb66&title=)<br />![截屏2022-03-20 下午3.02.58.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647759812162-fe199c36-9741-4f1b-b7aa-0e06f2e03f75.png#clientId=udbf68110-2b0e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub4711cc7&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.02.58.png&originHeight=447&originWidth=394&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22202&status=done&style=none&taskId=ue88cb276-4fc7-4f9d-b8eb-24c202bfd3c&title=)![截屏2022-03-20 下午3.03.02.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647759812184-2120d338-3714-41e9-af67-bbbca1929f80.png#clientId=udbf68110-2b0e-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uf77fa209&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.03.02.png&originHeight=392&originWidth=380&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22041&status=done&style=none&taskId=ubf98e4bb-4ddb-4423-b97f-ef363d23840&title=)
docs/组件说明/6通知.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-2: 反馈
title: 通知
---
轻量级全局展示通知提醒信息，出现和消失时有缓动动画。
<a name="FRzvL"></a>
### 使用指南
- 需要提醒用户来自系统的消息，且不打断用户。
- 系统主动推送。
![截屏2022-03-21 上午11.41.07.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834091218-46fe36f9-562f-430b-9002-9b431b804c10.png#clientId=u09d7264d-c809-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4ee8f1c0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.41.07.png&originHeight=188&originWidth=329&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18158&status=done&style=none&taskId=ua5b04da2-4310-4cb6-bbf7-de0e413525a&title=)![截屏2022-03-21 上午11.41.14.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834091240-7f751623-40a1-443f-b28a-270413010f25.png#clientId=u09d7264d-c809-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u179ab507&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.41.14.png&originHeight=117&originWidth=307&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14705&status=done&style=none&taskId=u22c8dec3-43db-4bb0-8275-bf083c67587&title=)![截屏2022-03-21 上午11.41.18.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647834091411-226c5f6b-26a4-4430-a963-66609522909c.png#clientId=u09d7264d-c809-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue5903f2a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.41.18.png&originHeight=82&originWidth=308&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13757&status=done&style=none&taskId=udeef63c7-ce2f-4cfe-8fd7-860414c5a34&title=)
docs/组件说明/7分组柱状图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 分组柱状图
---
使用颜色不同的柱形并排组成小组来显示各维度的数值。横轴标示出分组，颜色标示出分类，纵轴显示相应的值。<br />![GroupedColumnChart 分组柱状图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226388454-4975397a-f73c-4d32-84a5-1c2e1c3d6a24.png#clientId=ubb9db069-c246-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u0475b0b2&margin=%5Bobject%20Object%5D&name=GroupedColumnChart%20%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=12753&status=done&style=none&taskId=u10c7b102-4f85-4e9d-946b-ca3b0e89e25&title=)
docs/组件说明/7列表.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 列表
---
列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。
<a name="DG0d1"></a>
### 使用指南
- 需批量展示具有相同构成及内容的模块时；
- 需展示多样的结构化的信息时。
![截屏2022-03-20 下午4.40.14.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765654007-90aeede5-a9d0-4ce4-8a7d-0e62017ba7ad.png#clientId=ud875a707-3535-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u6c4d71ff&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.40.14.png&originHeight=459&originWidth=685&originalType=binary&ratio=1&rotation=0&showTitle=false&size=57530&status=done&style=none&taskId=u20594ec6-0c08-4edc-b411-9094d1c9c21&title=)![截屏2022-03-20 下午4.40.23.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765654052-fe94a9a1-628a-4174-8a31-08833522fb5e.png#clientId=ud875a707-3535-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9ff139ba&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.40.23.png&originHeight=456&originWidth=646&originalType=binary&ratio=1&rotation=0&showTitle=false&size=54504&status=done&style=none&taskId=ub2c9b675-c239-4d65-87b1-9ffc0b6b8aa&title=)<br />![截屏2022-03-20 下午4.41.12.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765685485-3309beff-35a2-4b95-840a-bcfbd5c9f411.png#clientId=ud875a707-3535-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u84804b7e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.41.12.png&originHeight=317&originWidth=680&originalType=binary&ratio=1&rotation=0&showTitle=false&size=46760&status=done&style=none&taskId=u6ad0037e-2200-40a9-829c-c1c649b54d8&title=)
docs/组件说明/7段落.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 段落
---
用于控制页面整体的文本视觉，主要由行间距及文本大小体现。
<a name="F5VER"></a>
### 使用指南
- 文本的展示需要保持一致的体验，使页面保持美观整洁
- 一般短文本和长文本的行间距是有差别的，短文本的行间距会更小(一般为三行以内)
![截屏2022-03-20 下午12.19.14.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749966549-d11534d8-7683-4b70-aa5d-7bf640affad3.png#clientId=u5b554d61-52cf-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ua14d54be&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.19.14.png&originHeight=290&originWidth=1018&originalType=binary&ratio=1&rotation=0&showTitle=false&size=76210&status=done&style=none&taskId=u5e9f9ac3-c70c-4110-bf38-4c373ce5a69&title=)
docs/组件说明/7虚拟滚动列表.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-3: 其他
title: 虚拟滚动列表
---
虚拟滚动列表组件。
<a name="NZ1rJ"></a>
### 使用指南
主要用于解决大数据情况下的渲染速度问题。<br />![截屏2022-03-21 上午11.56.55.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647835036200-e6915aa1-c82a-46f5-968e-c209ab9f9a74.png#clientId=u19311016-7303-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uf077d157&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-21%20%E4%B8%8A%E5%8D%8811.56.55.png&originHeight=415&originWidth=726&originalType=binary&ratio=1&rotation=0&showTitle=false&size=53573&status=done&style=none&taskId=u0b26bf8e-3396-420d-a64d-7fddaeb7cb0&title=)
docs/组件说明/7表单.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 表单
---
用于收集、校验和提交数据的表单组件，如输入框、单选框、复选框、选择器等。
<a name="i2lma"></a>
### 使用指南
- 收集信息时
- 需要对输入信息进行校验时
![截屏2022-03-20 下午3.04.27.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647759907759-610f06cf-1161-4527-acde-6cc345a89de4.png#clientId=u53376993-e7b1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u489470c0&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.04.27.png&originHeight=276&originWidth=357&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18133&status=done&style=none&taskId=u4774a65c-3a82-46e5-a42b-9c91a822942&title=)![截屏2022-03-20 下午3.04.35.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647759907899-4b87fce0-1fff-4f1c-b887-6938142b789a.png#clientId=u53376993-e7b1-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u9ef3ec4e&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.04.35.png&originHeight=304&originWidth=296&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18014&status=done&style=none&taskId=u6610bb3b-3fd5-4f75-a6a1-ac15cef31e6&title=)<br />![截屏2022-03-20 下午4.20.02.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764424083-dfc3f2fd-ec33-42b1-99da-aa9ecc8c7754.png#clientId=u317eee4e-ce11-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub16cd45a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.20.02.png&originHeight=545&originWidth=470&originalType=binary&ratio=1&rotation=0&showTitle=false&size=34627&status=done&style=none&taskId=u73c7c9a7-67d5-47dd-a521-0b76287a7a8&title=)
docs/组件说明/8区间柱状图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 区间柱状图
---
支持通过获取数据的最小值和最大值之间的范围，展示不同类目下柱图的数据样式。<br />![RangeColumnChart 区间柱状图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226510139-e3497c75-dee5-4181-9c8d-eb87584bb2fb.png#clientId=ufc0380fe-4a83-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u929c6b20&margin=%5Bobject%20Object%5D&name=RangeColumnChart%20%E5%8C%BA%E9%97%B4%E6%9F%B1%E7%8A%B6%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13859&status=done&style=none&taskId=uaa8c3fc8-8080-48a6-8b83-622616c0ee8&title=)
docs/组件说明/8珊格布局.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 栅格布局组件
---
## 珊格布局组件
<a name="XdMAw"></a>
### 使用指南
- PC first，其他屏幕支持自适应，因此默认情况下 device 处于 desktop 模式，此时 columns 为12列；
- 更改 device 参数为 tablet 后 columns 为8列；
- 更改 device 参数为 phone 后 columns 为4列，同时 Cell会根据内置规则进行自适应调配。
![截屏2022-03-20 下午12.19.47.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647749997523-56b0d90f-1629-4744-988d-1d03068ac9bd.png#clientId=u9d91109b-d460-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ubc10f130&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.19.47.png&originHeight=673&originWidth=984&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43655&status=done&style=none&taskId=ud83336d5-c031-422a-8edf-2b95360e60b&title=)
docs/组件说明/8菜单.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 头像菜单
---
为页面和功能提供导航的菜单列表。
<a name="lRebs"></a>
### 使用指南
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。<br />![截屏2022-03-12 下午10.11.49.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647094323831-f304f89c-d258-4544-a840-0599d8223470.png#clientId=ue9ad24c7-e4fc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4799d99a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-12%20%E4%B8%8B%E5%8D%8810.11.49.png&originHeight=202&originWidth=1318&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25412&status=done&style=none&taskId=u37ff8e67-dff2-4a94-8ea1-27e3552dec6&title=)<br />![截屏2022-03-13 上午10.43.59.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647139628652-89cc45ac-6edf-4364-ba4f-e92c1d63ba8f.png#clientId=u94e1ee8c-db7d-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u53a41d06&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-13%20%E4%B8%8A%E5%8D%8810.43.59.png&originHeight=631&originWidth=309&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31004&status=done&style=none&taskId=u33119050-9031-4f0f-aced-36a06bec50a&title=)
docs/组件说明/8输入框.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 输入框
---
用户可以在文本框内输入或编辑文字
<a name="QHmw2"></a>
### 使用指南
- 基本输入框
- icon组合输入框，可根据使用场景变更icon
- 网站复合输入框
![截屏2022-03-20 下午3.09.05.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195108-0533f2bb-7d5a-49e1-b800-5a0febf2a234.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u1b10bfea&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.05.png&originHeight=229&originWidth=492&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17275&status=done&style=none&taskId=u55561c85-923e-4845-b21d-44ac6d7c489&title=)![截屏2022-03-20 下午3.09.10.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195320-1fc21290-7e7b-4f4e-a666-b3ebcd8100b4.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub7dd22ef&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.10.png&originHeight=211&originWidth=508&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16188&status=done&style=none&taskId=u60f68d75-d0bf-4d33-a919-6a4e6a20a3d&title=)![截屏2022-03-20 下午3.09.19.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195379-2b5908ad-ed5e-40d3-8e99-167791b07430.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue2f1a787&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.19.png&originHeight=81&originWidth=439&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10304&status=done&style=none&taskId=u6de77cee-9804-4c56-821f-54bc19fc4bb&title=)![截屏2022-03-20 下午3.09.24.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195342-131f8106-9d8a-4bfe-863c-b47d0d7c5673.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uda2638eb&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.24.png&originHeight=82&originWidth=378&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10331&status=done&style=none&taskId=ua458611e-ad71-46df-a802-317bdbd5a5b&title=)![截屏2022-03-20 下午3.09.28.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195435-1eee3908-5753-4db4-b17b-0e400de65608.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uaff2e894&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.28.png&originHeight=78&originWidth=428&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9711&status=done&style=none&taskId=uf61a2bfc-dc08-443f-83ae-929fb7aca70&title=)![截屏2022-03-20 下午3.09.35.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647760195700-b17ee238-1548-40d4-85eb-5ddb688e6b1a.png#clientId=uf74ea677-b776-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ud5ad4d46&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%883.09.35.png&originHeight=87&originWidth=546&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9524&status=done&style=none&taskId=uf7d543b6-4203-4191-8de2-36fee9b8cc4&title=)
docs/组件说明/9数字输入框.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据输入
title: 数字输入框
---
仅允许输入标准的数值。
<a name="BDyU0"></a>
### 使用指南
- 当需要获取标准数值时。
- 用户可直接在输入框内修改数值，也可以使用右侧箭头按钮进行修改。
![截屏2022-03-20 下午4.15.30.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647764161093-6eb70a54-7a50-40cc-8a7c-3c043225e34e.png#clientId=u7230404a-7f84-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub3e0dafa&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.15.30.png&originHeight=190&originWidth=326&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14041&status=done&style=none&taskId=uc72ff293-b19f-40f3-a2ea-265ed443b1c&title=)
docs/组件说明/9框架.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-5: 通用组件
title: 框架
---
框架组件是整个应用的基础结构框架。
<a name="XsWy9"></a>
### 使用指南
- 根据业务实际诉求的复杂度进行配置；
- 建议同一个应用统一使用一套框架，避免出现混乱问题。
![截屏2022-03-20 下午12.20.26.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647750037324-94752f6f-de46-4179-9863-adab5998959f.png#clientId=u8c6d8a08-5aba-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ub49a03ce&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%8812.20.26.png&originHeight=654&originWidth=1026&originalType=binary&ratio=1&rotation=0&showTitle=false&size=46003&status=done&style=none&taskId=ub3b9246b-d0df-4eb7-a46d-70de100f704&title=)
docs/组件说明/9直方图.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-6: 图表
title: 直方图
---
直方图是一种统计报告图，由一系列高度不等的纵向条纹或线段表示数据分布的情况。<br />![HistogramChart 直方图.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647226550014-b760f776-957e-4102-8c23-9e09741505e3.png#clientId=u06417b10-b411-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u28843473&margin=%5Bobject%20Object%5D&name=HistogramChart%20%E7%9B%B4%E6%96%B9%E5%9B%BE.png&originHeight=486&originWidth=414&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11087&status=done&style=none&taskId=ubd821eaa-9c08-4bca-ad5b-f6fc4f341c1&title=)
docs/组件说明/9进度指示器.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-4: 数据展示
title: 进度指示器
---
为用户显示操作的当前进度和状态。
<a name="zN4LZ"></a>
### 使用指南
- 当操作需要较长时间才能完成，需要给用户完成任务的预期时
- 当操作需要展示一个完成进度的百分比
![截屏2022-03-20 下午4.41.45.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765732356-d694d3b0-3629-4555-b108-c86a077ba6ea.png#clientId=uf7a50d6f-8771-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=314&id=u37705bfc&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.41.45.png&originHeight=314&originWidth=478&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17877&status=done&style=none&taskId=u6937fe46-49a0-4962-b412-f3ac045895a&title=&width=478)![截屏2022-03-20 下午4.41.49.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765732371-57036590-2341-4a97-8de1-9ef2d3b1854b.png#clientId=uf7a50d6f-8771-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5657e895&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.41.49.png&originHeight=220&originWidth=231&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11614&status=done&style=none&taskId=u6c072f16-65a8-4665-b639-d11311898c1&title=)![截屏2022-03-20 下午4.41.54.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765732390-0c4103f1-7d46-4acd-ad09-f6f822d18843.png#clientId=uf7a50d6f-8771-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u3b135a44&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.41.54.png&originHeight=204&originWidth=357&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18495&status=done&style=none&taskId=u38c03053-f13a-4a60-b73a-90a5561e5ab&title=)![截屏2022-03-20 下午4.42.00.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647765732399-19a35fd2-c6ec-47c3-88e4-440de1517ad0.png#clientId=uf7a50d6f-8771-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u5d4ac8be&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-20%20%E4%B8%8B%E5%8D%884.42.00.png&originHeight=149&originWidth=247&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13287&status=done&style=none&taskId=u347373b1-9fa8-45e2-a261-a2efb431e06&title=)
docs/组件说明/README.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: 导航
title: 面包屑
---
用来告知用户当前位置，以及显示当前页面在系统层级结构的位置，并能点击返回上一级或各个层级的页面。
<a name="weKLW"></a>
### 使用指南
- 当用户处于超过两级以上层级结构页面时；
- 当用户需要有返回上一层级导航功能时。
![截屏2022-03-20 下午1.04.58.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647752715403-4816eeeb-c399-4896-bd83-97db7f35ed45.png)
![截屏2022-03-20 下午1.05.03.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647752715384-59086e91-154c-41be-8047-51e29b792d40.png)
docs/设计语言/1ac design设计价值观.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-0: AC Design
title: 设计价值观
---
![截屏2022-03-25 下午2.35.36.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1648190149678-61c5a3d4-1043-4bee-8f13-7dc130c72dec.png#clientId=ue5c5b78d-077a-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u3a6bbf10&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-25%20%E4%B8%8B%E5%8D%882.35.36.png&originHeight=230&originWidth=1180&originalType=binary&ratio=1&rotation=0&showTitle=false&size=34208&status=done&style=none&taskId=u3c7b5a70-273e-4f5c-be54-f012a3dc30d&title=)
<a name="CcIfZ"></a>
### 流动 – 设计、自然、时光、掠影
流动的科技犹如光影的浓淡、时光的流逝、自然的韵美、设计的张弛，带来全新的思想和机遇，充满未知的挑战，诠释人与空间，人与时间的绝美构思，崇尚开放、包容、专业，变通，代表技术、科技、思想，也代表新的设计价值；
<a name="ssijm"></a>
### 坚定 – 坚定不移的目标感，寻找伙伴，克服困难
产品设计应该坚定的站在用户的视角，更大维度的促成结果的达成，兼顾用户不同的需求，建立健康的合作机制与组织形式，保持设计的严谨而偏执，内在逻辑的自洽。
<a name="lE1zZ"></a>
### 远方 – 无为而设计，为未来
所有人都憧憬未来，科技和思想的进步必定带来不一样的生活，美永远无法被替代，统一体验，基因体现，社交向善，观察和预判设计新的流行趋势方向，新颖、现代、超出预期。
docs/设计语言/2全局样式-图标.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-1: 全局样式
title: 图标
---
## 图标
Icon 作为 UI 构成中重要的元素，它一定程度上影响整体 UI 界面呈现出的风格，资产云提供一套适用于中后台场景的线性 Icon，以一致、易用的标准进行设计，从而降低用户的理解成本，提升界面的美观度。
<a name="WMoRr"></a>
## 设计原则
<a name="BsSum"></a>
#### 精确
设计图标时，选择最简单流通的样式，避免使用含义模糊的图形，准确表达含义；在图形绘制时保持偶数原则，去小数点；在图标输出时也应遵守命名规范，精确文字描述，便于查找。
<a name="hZTeo"></a>
#### 简单
制作时，简化参数，处理线条和轮廓时删除多余锚点，不做多余修饰，保持图标简洁。
<a name="dWGug"></a>
#### 舒适
绘制时，考虑线条的节奏感，遵守适度原则，让图标的构图呈现舒适感。
<a name="b6WQo"></a>
## 设计规范
<a name="i7iHk"></a>
#### 珊格规范
AC Design选择以16*16的尺寸作为图标绘制的统一栅格尺寸。<br />![截屏2022-03-16 上午11.01.18.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647399696932-2fbacda5-fbf6-4265-81b6-ea4ac3c7b9b7.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uae76e1c4&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8A%E5%8D%8811.01.18.png&originHeight=244&originWidth=244&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10296&status=done&style=none&taskId=u48190bd4-687d-4919-9b41-b5cf1682e45&title=)
<a name="gqk2u"></a>
#### 出血位
在图标的设计过程中预留出血位的做法，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。资产云图标的设计上实际画布应控制在栅格中心14*14的区域，周围留有1的出血。在一些特殊情况下如 icon 过长或者有突出的边角等，允许内容适当延展，以确保图标视觉重量上的统一。<br />![截屏2022-03-16 上午11.07.06.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647400035682-6d017284-3f26-4b79-be40-580b694bab77.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ud28773a1&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8A%E5%8D%8811.07.06.png&originHeight=244&originWidth=244&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9324&status=done&style=none&taskId=ub7ca781c-a81c-444a-951b-20d78695140&title=)
<a name="n6v5W"></a>
#### 辅助线
辅助线有助于约束图标的大小以及一些线条的走向，在制作时应尽量根据辅助线进行绘制以保持各图标间视觉重量的统一。我们对栅格内的圆形、方形、斜线等路径进行了规范并生成了一套辅助线系统。在图标设计的过程中应根据设计对象的特性选取相应的辅助线来控制图形样式。<br />![截屏2022-03-16 上午11.09.24.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647400173383-56c1b0aa-e4dc-483d-8347-612f19df243f.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u4c4412a4&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8A%E5%8D%8811.09.24.png&originHeight=244&originWidth=244&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15020&status=done&style=none&taskId=ub4796b58-780c-4733-9747-8e27e7cd31e&title=)<br />由于屏幕像素的特性，非整数像素将会以灰度显示，那样将影响图标的清晰度以及整体的含义表达，所以在栅格内绘制时应尽量对齐像素点，最大程度上保证图标的清晰度。<br />![截屏2022-03-16 下午12.27.52.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647404884519-95640dcf-cd83-4ffe-95a1-efbdbf66e00f.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u2ae48a68&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8B%E5%8D%8812.27.52.png&originHeight=235&originWidth=227&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9928&status=done&style=none&taskId=ubae3bc28-48c8-458b-b179-89da24f99fb&title=)<br />根据绘制对象的形象特征去选择辅助线，在必要时，可以将内容扩展到辅助线之外。<br />![截屏2022-03-16 下午2.09.00.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647410955464-027fc887-401b-4f37-a735-ed2e0a1c2a22.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u6da3c66b&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8B%E5%8D%882.09.00.png&originHeight=230&originWidth=242&originalType=binary&ratio=1&rotation=0&showTitle=false&size=14745&status=done&style=none&taskId=u4a5b2755-df24-41be-8294-eae83dcaa62&title=)<br />在特殊情况下，根据图标结构繁简，线条的粗细可以适当进行调整。<br />![截屏2022-03-16 下午1.41.04.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647409276272-45ac6fc8-9315-4983-af1c-0ff21b5222ec.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue6d8b584&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8B%E5%8D%881.41.04.png&originHeight=255&originWidth=765&originalType=binary&ratio=1&rotation=0&showTitle=false&size=33021&status=done&style=none&taskId=u4b7169b8-18e3-4d6c-80f5-f6a230ce872&title=)
<a name="itClY"></a>
#### 角度
线条如需倾斜最好与栅格内 45° 辅助线相平行，或使用 15° 的倍数。以便在低分辨率的情况下仍有较高的线条清晰度。<br />![截屏2022-03-16 下午2.16.37.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647411412475-c2928bee-5676-4ad6-b518-abc6ecdb2c26.png#clientId=ue2d32faf-7885-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uac27953a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-16%20%E4%B8%8B%E5%8D%882.16.37.png&originHeight=236&originWidth=460&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25485&status=done&style=none&taskId=ua8ae565e-7779-4e05-a866-c8085e37464&title=)
docs/设计语言/2全局样式-字体.md 0 → 100644
View file @ 09ce8b34
---
---
autoGroup-1: 全局样式
title: 字体
---
字体是重要的信息传达元素之一。<br />用户通过阅读文本来理解内容从而与界面系统产生交互行为，因此科学的字体系统将影响着产品的可用性和操作效率。资产云字体方案优先使用系统默认的界面字体，科学的字体系统应该具有良好的易读性和可读性，友好、稳定和专业的特性。
| 中文字体 | 英文字体 | 数字字体 | 代码字体 |
| --- | --- | --- | --- |
| Pingfang SC | SF UI Text | Helvetica Neue | Consolas |
![截屏2022-03-15 下午4.19.11.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647332403577-f7e8f651-110a-497a-8484-b758cbfe611e.png#clientId=u85e23516-9695-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue8a82c6a&margin=%5Bobject%20Object%5D&name=%E6%88%AA%E5%B1%8F2022-03-15%20%E4%B8%8B%E5%8D%884.19.11.png&originHeight=322&originWidth=818&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26242&status=done&style=none&taskId=u1bb326f3-6732-4b03-83c7-d21999aaa50&title=)
<a name="bRAEY"></a>
### 字号
文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：
- 最小可识别文字尺寸：12px
- 字体层级：区分文本主副层级，字号差距需保持2-4px
- 一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出
考虑资产云的通用性和包容性，在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。<br />![Typography文字备份.png](https://cdn.nlark.com/yuque/0/2022/png/477552/1647393602405-9f878e38-1106-467b-86e1-3b0753926dd1.png#clientId=ub68f9896-3ff8-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u3e271275&margin=%5Bobject%20Object%5D&name=Typography%E6%96%87%E5%AD%97%E5%A4%87%E4%BB%BD.png&originHeight=1943&originWidth=1440&originalType=binary&ratio=1&rotation=0&showTitle=false&size=206319&status=done&style=none&taskId=u1d32f450-2e06-4e3a-b039-d29385adf61&title=)
<a name="cy2We"></a>
### 行高
不同尺寸的字体以及与之相对应的行高。
| 字号 | 12 | 14 | 16 | 20 | 24 | 30 | 38 | 46 | 56 | 68 | ... |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 行高 | 20 | 22 | 24 | 28 | 32 | 38 | 46 | 54 | 64 | 76 | ... |
<a name="llByi"></a>
### 字重
字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量。
docs/设计语言/2全局样式-色彩.md 0 → 100644
View file @ 09ce8b34
This diff is collapsed.
docs/设计语言/2全局样式-阴影.md 0 → 100644
View file @ 09ce8b34
This diff is collapsed.
docs/设计语言/3设计原则.md 0 → 100644
View file @ 09ce8b34
This diff is collapsed.
docs/设计语言/README.md 0 → 100644
View file @ 09ce8b34
This diff is collapsed.
package.json 0 → 100644
View file @ 09ce8b34
This diff is collapsed.
yarn.lock 0 → 100644
View file @ 09ce8b34
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment