文章目录
- 前言
- 一、安装
- 二、通用组件
-
- Button 按钮
-
- 5+4 组合
- Icon 图标
-
- 安装
前言 按钮用于开始一个即时操作，往往点击按钮都会触发一些事件，可能进行前后端交互事件。
一、安装
$ npm install antd --save
$ yarn add antd
二、通用组件 Button 按钮 使用场景：响应用户点击行为，触发响应的业务逻辑。
5+4 组合
五种按钮四种状态
五种按钮和四种状态是一对多的关系，每种按钮可对应各种状态。
import React from 'react';
import { Button } from 'antd';
五种按钮
- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
- 默认按钮：用于没有主次之分的一组行动点。
- 虚线按钮：常用于添加操作。
- 文本按钮：用于最次级的行动点。
- 链接按钮：一般用于链接，即导航至某位置。
四种状态
- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 禁用：行动点不可用的时候，一般需要文案解释。
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：
type -> shape -> size -> loading -> disabled我在项目中使用最多的还是如下标红的一些Api，其余的并非不用，只是使用的场景很少。
文章图片
按钮如何结合Icon
} size={size}>
Download
Icon 图标 安装
$ npm install --save @ant-design/icons
【Ant|ant design 按钮组件】实际项目中，这种 提示+按钮+图标 场景很多。
提示+按钮+图标
推荐阅读
- vue3.x|创建第一个 Vue 3 项目
- 前端|1.在Javascript中什么是伪数组（如何将伪数组转化为标准数组？2.JavaScript数组的常用方法有哪些？3. 描述一下对“异步“和“同步的理解“）
- JavaScript|你不会只会用console.log()吧（）
- Vue3.0知识点大汇总|【Vue3中的响应式原理】
- Vue3.0知识点大汇总|【Vue3中watch属性详解】
- Vue2.0知识点大汇总|【Vue路由（router）进一步详解】
- 前端|【Ajax网络请求】
- Vue2.0知识点大汇总|【Vue生命周期详解】
- React Hook学习笔记