一、antd的基本应用
1、ant design库
主要是用于开发企业级的中后台产品。来自于'蚂蚁金服'
2、使用过程
(1)安装
- 安装组件库:npm install antd --save或yarn add antd
- 安装图标库:npm install @ant-design/icons -s
(2)引用
- 引用css文件:根据需要,例如在App.css文件中引入 @import "~antd/dist/antd.css";
- 组件的引用:根据需要在自定义组件中按需引入 import { Button,Form } from 'antd';
二、antd的组件库(官网有更详细的使用案例)
官方网站:https://ant.design/components/overview-cn/
1、Button组件
<Button type="primary" danger>文本</Button>
- type:按钮的类型,取值为primary、default、dashed、text、link
- danger:表示危险按钮
- size:表示按钮的大小,取值large、middle、small
- disabled:表示按钮不可用
- icon:设置按钮上的图标
- shape:设置按钮的形状
2、message组件
消息框组件,可以提供成功、警告、错误等反馈信息
message.info()、message.success()、message.warning()、message.error()
3、Layout组件
- Layout是布局容器,里面可以包含Header Sider Content Footer 或 Layout 本身
- Header:顶部容器,只能放在Layout中
- Sider:侧边栏,通常放导航栏,只能放在Layout中
- Content:内容显示区,只能放在Layout中
- Footer:底部容器,只能放在Layout中
4、Menu组件
可以直接包含菜单项(Menu.Item),也可以包含子菜单(SubMenu),在子菜单下可以包含菜单项
- theme:表示菜单的背景色
- mode: 表示菜单项的放置方式(水平、垂直)
- defaultSelectedKeys:默认选中的菜单项,通过菜单项的key属性识别
- defaultOpenKeys:默认打开的子菜单,通过子菜单的key属性识别
- style:菜单的样式
- Menu.Item:菜单项组件
- key:表示菜单项的唯一标识
- icon:图标
- SubMenu:子菜单组件
- key:表示子菜单的唯一标识
- title:子菜单的标题文本
- icon:子菜单的图标
5、Divider分割线
- orientation:设置分割线文本的位置
- plain:设置分割线文本的颜色
- type:分割线的类型(垂直/水平)
6、Input组件
- size:大小(large、middle、small)
- placeholder:提示,用户输入时自动消失
- prefix:前缀图标
- suffix:后缀图标
- maxLength:最大长度(字符个数)
- disabled:是否禁用,默认是false
- defaultValue:默认值
- bordered:是否带边框