一.概述
Antd 组件较多，这里介绍一些常用的组件，更详细的说明可以参考官方文档：组件总览 - Ant Design，本文章为此基础上进行整理。
1.安装
yarn add antd 或者 npm install antd --save
2.导入
2.1 导入组件，需要什么导入什么
import { 组件名 } from 'antd';2.1 引入antd样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'二.通用组件
1. Icon
图标，用于语义化的表示一些业务场景，比如：购物车、收藏夹、搜索、重置。从 4.0 开始，antd 不再内置 Icon 组件，只能使用独立的包 @ant-design/icons
1.1 典型场景
- 方向性图标
- 提示建议性图标
- 编辑类图标
- 数据类图标
- 品牌和标识
- 网站通用图标
1.2 安装命令
npm install --save @ant-design/icons
1.3 图标属性
2. Button
按钮用于开始一个即时操作。
2.1 典型场景
- 跳转页面
- 唤起弹窗
- 触发行为：提交表单；删除；下载文件；搜索
2.2 按钮分类
使用 type 属性实现不同类型按钮：
- 主按钮（primary）：用于主行动点，一个操作区域只能有一个主按钮。
- 默认按钮（default）：用于没有主次之分的一组行动点。声明时 default 可以不写。
- 虚线按钮（dashed）：常用于添加操作。
- 文本按钮（text）：用于最次级的行动点。
- 链接按钮（link）：一般用于链接，即导航至某位置。
<Button type="primary">主按钮</Button>
<Button>默认按钮</Button>
<Button type="dashed">虚线按钮</Button>
<Button type="text">文本按钮</Button>
<Button type="link">连接按钮</Button> 
2.3 按钮属性
常用按钮属性：
三.布局组件
Grid 栅格在开发中使用较多，这里只对 Grid 栅格进行介绍，其他布局还请看：分割线 Divider - Ant Design，布局 Layout - Ant Design，间距 Space - Ant Design。
1. Grid 栅格
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个，以保证视觉层面的舒适感。
1.1 栅格概述
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
-
通过
row在水平方向建立一组column（简写 col）。 -
你的内容应当放置于
col内，并且，只有col可以作为row的直接元素。 -
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用
<Col span={8} />来创建。 -
如果一个
row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列。
栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
1.2 区块间隔
栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，推荐使用 (16+8 的倍数) px 作为栅格间隔。
如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。
<Row gutter={16}></Row>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}></Row>
<Row gutter={[16,24]}></Row>Row
Col
四.数据展示组件
1. Table 组件
用于展示行列数据。
1.1 使用场景
-
当有大量结构化的数据需要展现时；
-
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
2.2 Table 属性
2. List 组件
2.1 使用场景
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
2.2 List 属性
五.反馈类组件
1. Alert警告提示
1.1 使用场景
-
当某个页面需要向用户显示警告的信息时。
-
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
1.2 四种样式
success、info、warning、error
1.3 Alert 属性
1.4 代码演示
<Alert message="Success Text" type="success" />
<Alert message="Info Text" type="info" />
<Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" />2. Modal对话框
2.1 使用场景
- 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用
Modal在当前页面正中打开一个浮层，承载相应的操作。 - 另外当需要一个简洁的确认框询问用户时，可以使用
Modal.confirm()等语法糖方法。
2.2 Modal 属性
六.数据录入组件
1. Ascader 级联选择
1.1 使用场景
-
需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
-
从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
-
比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
1.2 Ascader 属性
级联选择 Cascader - Ant Design
2. Checkbox 多选框
2.1 使用场景
-
在一组可选项中进行多项选择时；
-
单独使用可以表示两种状态之间的切换，和
switch类似。区别在于切换switch会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合。
2.2 Checkbox 属性
多选框 Checkbox - Ant Design
3. DatePicker 日期选择框
3.1 使用场景
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
3.2 DatePicker 属性
日期选择框 DatePicker - Ant Design
4. Input 输入框
4.1 使用场景
-
需要用户输入表单域内容时。
-
提供组合型输入框，带搜索的输入框，还可以进行大小选择。
4.2 Input 属性
输入框 Input - Ant Design
5. Radio 单选框
5.1 使用场景
-
用于在多个备选项中选中单个状态。
-
和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
5.2 Radio 属性
单选框 Radio - Ant Design
6. Form 表单
6.1 使用场景
-
用于创建一个实体或收集信息。
-
需要对输入的数据类型进行校验时。
6.2 Form 属性
表单 Form - Ant Design
7. Select选择器
7.1 使用场景
-
弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
-
当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
7.2 Select 属性
选择器 Select - Ant Design
8. Switch 开关
8.1 使用场景
-
需要表示开关状态/两种状态之间的切换时；
-
和
checkbox的区别是，切换switch会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合。
8.2 Switch 属性
开关 Switch - Ant Design
9. Upload 上传
上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
9.1 使用场景
-
当需要上传一个或一些文件时。
-
当需要展现上传的进度时。
-
当需要使用拖拽交互时。
9.2 Upload 属性
上传 Upload - Ant Design
10. TimePicker时间选择框
10.1 使用场景
当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
10.2 TimePicker 属性
时间选择框 TimePicker - Ant Design
