前端学习-Antd 组件库基础

一.概述

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）：一般用于链接，即导航至某位置。

主按钮
默认按钮
虚线按钮
文本按钮
连接按钮

 

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 的值来表示其跨越的范围。例如，三个等宽的列可以使用  来创建。

• 如果一个 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

Col 

四.数据展示组件

1. Table 组件

用于展示行列数据。

1.1 使用场景

• 当有大量结构化的数据需要展现时；

• 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

2.2 Table 属性

2. List 组件 

2.1 使用场景

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

2.2 List 属性

3. Tag标签 

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

3.1 使用场景

• 卡片式的页签，提供可关闭的样式，常用于容器顶部。

• 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。

• Radio.Button 可作为更次级的页签来使用。

3.2 Tag 属性

五.反馈类组件

1. Alert警告提示

1.1 使用场景

• 当某个页面需要向用户显示警告的信息时。

• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

1.2 四种样式 

success、info、warning、error 

1.3 Alert 属性

1.4 代码演示

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