前端学习-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>