前端学习——Ant Design
前言
前置学习内容
说明
本文基于Ant Design官网内容进行编写，仅简单介绍个人认为需要了解的部分。若想了解更多请查看官方文档。
一、Antd
1.Antd简介
蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大 设计价值观 ，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
2.Antd安装
使用yarn或者npm进行安装。
- yarn：$ yarn add antd
- npm：$ npm install antd --save
3.Antd的使用
通过import进行导入
import { DatePicker } from 'antd';
ReactDOM.render(<Demo/>, mountNode);
引入antd样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
4.Antd官网
二、 Antd组件
1.Button
按钮：
- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
- 默认按钮：用于没有主次之分的一组行动点。
- 虚线按钮：常用于添加操作。
- 文本按钮：用于最次级的行动点。
- 链接按钮：一般用于链接，即导航至某位置。
<Button type="primary">主按钮</Button>
<Button>默认按钮</Button>
<Button type="dashed">虚线按钮</Button>
<Button type="text">文本按钮</Button>
<Button type="link">连接按钮</Button>按钮属性：
- size：large small分别把按钮设为大、小尺寸。不设置大小为中
- loading：属性即可让按钮处于加载状态
- ghost：幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
- block：将按钮宽度设置为父按钮宽度。
- disabled：可让按钮处于不可用状态，同时按钮样式也会改变。
- danger：危险按钮
- Dropdown.Button ：多个按钮组合。
<Button size={size}></Button> seiz:large,“空”,small 大中小
<Button loading={true}>Loading</Button> loading:true，false
<Button ghost={true}>Loading</Button> ghost:true，false
<Button block={true}>Loading</Button> block:true，false
<Button disabled={true}>Loading</Button> disabled:true，false
<Button danger={true}>Loading</Button> danger:true，false
const menu = (
<Menu.Item key="1">操作1</Menu.Item>
<Menu.Item key="2">操作2</Menu.Item>
<Menu.Item key="3">操作3</Menu.Item>
</Menu>
<Dropdown.Button overlay={menu}>多个按键组合</Dropdown.Button>2.Icon
语义化的矢量图形。使用图标组件，你需要安装 @ant-design/icons 图标组件包：
npm install --save @ant-design/iconsIcon组件可以配合Button使用，当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
<Button icon={<SearchOutlined/>}>搜索</Button>
旧版本方式已经弃用
import { Icon, Button } from 'antd';
<Icon type="search" />
新版本采用按需引用
<SearchOutlined/>3.文本样式
4.Grid栅格
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。
- 通过 row 在水平方向建立一组 column（简写 col）。
- 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <Col span={8} /> 来创建。
- 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列。
栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。布局是基于 24 栅格来定义每一个盒子的宽度，但不拘泥于栅格。
基础栅格
<Row>
<Col span={24}>col-24</Col>
</Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>区块间隔
栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，推荐使用 (16+8的倍数)px 作为栅格间隔。如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。数组形式垂直间距在3.24.0之后支持。
<Row gutter={16}></Row>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}></Row>
<Row gutter={[16,24]}></Row>列偏移
使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列的宽度。
列排序
通过使用 push 和 pull 类就可以很容易的改变列的顺序。
<Row>
<Col span={12} push={12}>
col-18 col-push-6
</Col>
<Col span={6} pull={6}>
col-6 col-pull-18
</Col>
</Row>
push={12}倒数第12格，pull={6}正数第6格基础布局
子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。
<Row justify="start"></Row>居左
<Row justify="center"></Row>居中
<Row justify="end"></Row>居右
<Row justify="space-between"></Row>不包括左右的均匀间距布局
<Row justify="space-around"></Row>包括左右的均匀间距布局子元素垂直对齐
align：top|center|middle。顶部|居中|底部对齐
order排序：
<Col span={8} order={3}></Col>
<Col span={8} order={1}></Col>
<Col span={8} order={2}></Col>flex填充
<Col flex={2}>2 / 5</Col>
<Col flex={3}>3 / 5</Col>响应式，预设六个响应尺寸：xs sm md lg xl xxl。
设计体系的响应式设计 | Ant Design 4.0 系列
5.间距 Space
6.Select选择器
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
<Select>
<option value="jack">Jack</option>
<option value="lucy">Lucy</option>
<option value="yiminghe">Yiminghe</option>
</Select>7.Radio单选框
- 用于在多个备选项中选中单个状态。
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
<Radio.Group onChange={onChange} value={value}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>8.Checkbox多选框
- 在一组可选项中进行多项选择时；
- 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
<Checkbox.Group options={["1","2","3","4"]}/>9.Switch开关
- 需要表示开关状态/两种状态之间的切换时；
- 和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
<Switch defaultChecked/>10.Cascader级联选择
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
11.DatePicker日期选择框
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
<DatePicker/> 默认日期选择器
<DatePicker picker="week" /> 周日期选择器
<DatePicker picker="month" /> 月日期选择器
<DatePicker picker="quarter" /> 季度日期选择器
<DatePicker picker="year" /> 年日期选择器12.TimePicker时间选择框
当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
<TimePicker/>13.Input输入框
通过鼠标或键盘输入内容，是最基础的表单域的包装。
- 需要用户输入表单域内容时。
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
<Input placeholder="默认显示内容" />14.Tabs标签页
选项卡切换组件。
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
Ant Design 依次提供了三级选项卡，分别用于不同的场景。
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
- Radio.Button 可作为更次级的页签来使用。
const { TabPane } = Tabs
<Tabs defaultActiveKey='1'>
<TabPane tab="Tab1" key="1"><TabPane>
<TabPane tab="Tab2" key="2"><TabPane>
<TabPane tab="Tab3" key="3"><TabPane>
</Tabs>15.Table表格
展示行列数据。
- 当有大量结构化的数据需要展现时；
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
const columns = [
title: '姓名',
dataIndex: "name",
key:"name",
title: '年龄',
dataIndex: "age",
key:"age",
const dataSource = [
key:"1",
name:'小明',
age: '12',
address: 'xxxx',
key:"2",
name:'李华',
age: '18',
address: 'xxxx',
<Table columns={columns} dataSource={dataSource}></Table>
16.List列表
通用列表。
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
<List dataSource={data} renderItem={(item)=>
<List.Item>
<Row gutter={[18,18]}>
<Col>{item.name}</Col>
<Col>{item.age}</Col>
<Col>{item.address}</Col>