前端学习|前端学习-Antd 组件库基础 antd|组件|JavaScript|react|前端

一.概述 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。
【前端学习|前端学习-Antd 组件库基础】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 使用场景