antd的基本应用

一、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：是否带边框