一.概述
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