前端学习-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）：一般用于链接，即导航至某位置。
<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 属性
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 代码演示
<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
前端学习-Antd 组件库基础相关推荐
- 前端的主流组件库你知道有那些吗？是否都会用呢？
了解常见组件库及使用流程 目标 了解一些常见的Vue组件库 前端项目分类 移动端(h5页, 小程序) PC端 常见的vue技术栈组件库 移动端(Vant[1], Cube-UI[2], NutUI[ ...
- Antd组件库的使用
Antd组件库 简介 Ant Design 是蚂蚁金服提供的 React UI 组件库,主要用于研发企业级中后台产品. Antd组件库在PC端React项目中为主流 pcd端 : antd app端 ...
- 前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- antd 组件库upload使用时onChange只会执行到 uploading状态 解决办法
antd 组件库使用时onChange只会执行到 uploading状态 解决办法 问题: 1.6.5版本 Upload控件onChange方法只会执行一次,且info.file.status一直为u ...
- 前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
- umi 解决找不到antd组件库中组件的路径问题 filePath not found of antd/es/float-button
一.问题 常见的报错: @import '~antd/es/style/themes/default.less'; 在安装的依赖中找不到此时正在使用的antd组件库中的悬浮按钮组件 二.解决方式 我们 ...
- 前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础 文章目录 前端学习第一周-HTML基础 前言 DAY 1 计算机组成 计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
- 【学习日记2023.4.25】之 前后端分离_前端工程化_Vue组件库Element_Vue路由_打包部署
文章目录 1. 前后台分离开发 1.1 前后台分离开发介绍 1.2 YAPI 1.2.1 YAPI介绍 1.2.2 接口文档管理 2. 前端工程化 2.1 前端工程化介绍 2.2 前端工程化入门 2. ...
- 【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
最新文章
- 基于 FPGA 的并行全比较排序算法，topK
- 单链表问题（反转、是否有环、删除结尾第N个节点、合并两个sortlist、找到交点）
- 设计模式实践-策略模式
- dede php标签 禁用,DedeCMS Error:Tag disabled:php的解决办法
- Struts2教程3：struts.xml常用配置解析
- AppFuse 安装
- 【栈】实现逆波兰计算器
- pyqt5和spyder版本对应_pyqt5 spyder 项目 记录
- Flickr 网站架构分析（转）
- SpringMVC中使用hibernate-validator的坑
- 戴尔游匣G15 系统蓝屏问题解决的方法
- WCF 面向服务的4个原则
- 00后学习创作娱乐生活宅家必备：钉钉、书旗小说、橙瓜码字
- C语言-指针存储空间大小
- 服务器系统挂安卓游戏吗,云服务器可以挂游戏吗
- 基于QQ远程协助的远程桌面实现
- 上海某大型游戏公司Unity3D基础面试题
- Markdown - 做好看的笔记
- google哈希面试题
- 【C#】获取汉字拼音首字母和全拼