antd总结

antd使用总结

demo总结

1.demo目录结构

2.demo简介

antd为我们提供了开箱即用的react组件，demo主要是利用antd的各个组件实现页面效果，antd官网https://ant.design/index-cn

 

antd总结

1.安装

$ npm install antd --save
$ yarn add antd

2.引入

引入控件

import { DatePicker } from 'antd';

引入样式

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

 

button组件

引入import {Button} from ‘antd’

属性	说明	类型	默认值
type	按钮的主题	string(primary|danger|dashed|disabled)
icon	带图标的按钮	string
loading	设置按钮载入状态	boolean	false
size	设置按钮大小	string	default

具体的属性可以参考文档。

演示

Modal组件

模态对话框

使用时机

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

 

用法

静态modal:用法在用户处理的事件中的设置modal的状态属性visible，如果为true则显示，false则不显示，同时modal框中可以设置onOk，以及onCancel方法。

 

示例

<Modal

title="xxx"

style={{top:20}}

visible={this.state.visible}

onOk={()=>this.handleOk('showmodal3')} //这样可以传参给定义的方法

onCancel={()=>this.handleCancel('showmodal3')}

>

 

confirm:在用户处理的事件中使用modal.confirm()方法，并设置confirm的属性，就会出现确认框

 

示例

handleConfirm=(type)=>{

Modal[type]( //这样相当于Modal.type <==> Modal["type"] 是一样的

{

title:"你喜欢篮球吗？", //确认框的标题

content: "是的 我喜欢", //确认框的内容

onOk() {

alert("ok")

},

onCancel() {

alert("cancel")

}

}

)

}

 

重要的属性

modal

参数	说明	类型	默认值
visible	设置modal是否可见	boolean	fales
title	标题	string
okText	页脚确认文字	string
cancelText	页脚取消文字	string
onOk	页脚确认的回调	function
onCancel	页脚取消的回调	function

 

modal.method

包括：

• Modal.info

• Modal.success

• Modal.error

• Modal.warning

• Modal.confirm

重要属性

参数	说明	类型	默认值
title	标题	string
content	内容	string|ReactNode	无
okText	页脚确认文字	string
cancelText	页脚取消文字	string
onOk	页脚确认的回调	function
onCancel	页脚取消的回调	function

具体属性可以参考官方文档

 

演示

Spin

用于页面和区块的加载中状态

 

使用时机

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

 

用法

设置size大小，设置delay属性可以延迟显示，设置tip显示字体，设置spinning可以控制是否旋转

 

示例

<Spin size="small" />

 

重要的属性

参数	说明	类型	默认值
delay	延迟显示加载效果的时间（防止闪烁）	number (毫秒)	-
spinning	是否为加载中状态	boolean	true
size	组件大小，可选值为 small default large	string	'default'
tip	当作为包裹元素时，可以自定义描述文案	string	-

 

演示

notification

全局展示通知提醒信息。

 

使用时机

在系统四个角显示通知提醒信息。经常用于以下情况：

• 较为复杂的通知内容。

• 带有交互的通知，给出用户下一步的行动点。

• 系统主动推送。

 

用法

在用户处理事件中使用notification()方法，在使用该方法前可以使用notification.config()来进行配置。

 

示例

handleOpen = (type,des) => {

if(des){

notification.config({

placement: des, //配置提示的方向，有坐上，坐下，右上，右下四个方向。

});

}

notification[type]({

message: 'New Title',

description: 'New description.',

})

}

 

notificatioin.method(config)

• notification.success(config)

• notification.error(config)

• notification.info(config)

• notification.warning(config)

• notification.warn(config)

• notification.open(config)

• notification.close(key: String)

• notification.destroy()

重要属性

参数	说明	类型	默认值
description	通知提醒内容，必选	string|ReactNode	-
message	通知提醒标题，必选	string|ReactNode	-

 

还提供了一个全局配置方法，在调用前提前配置，全局一次生效。

• notification.config(options)

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
});

 

演示

Message全局提示

全局展示操作反馈信息。

 

使用时机

• 可提供成功、警告和错误等反馈信息。

• 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

 

用法

message.method(“xxx”)

 

message.method()

组件提供了一些静态方法，使用方式和参数如下：

• message.success(content, [duration], onClose)

• message.error(content, [duration], onClose)

• message.info(content, [duration], onClose)

• message.warning(content, [duration], onClose)

• message.warn(content, [duration], onClose) // alias of warning

• message.loading(content, [duration], onClose)

 

全局方法

还提供了全局配置和全局销毁方法：

• message.config(options)

• message.destroy()

message.config

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});

 

重要属性

参数	说明	类型	默认值
content	提示内容	ReactNode	-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
onClose	关闭时触发的回调函数	Function	-
icon	自定义图标	ReactNode	-

 

示例

message.success(“xxx”)

 

演示

Tabs页签

选项卡切换组件。

 

使用时机

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

 

示例

<Card title="Tabs页签">

<Tabs defaultActiveKey="1" onChange={this.handlecallback}>

<TabPane tab="Tab 1" key="1">欢迎学习react教程</TabPane>

<TabPane tab="Tab 2" key="2">react是一个非常棒的MV*框架</TabPane>

<TabPane tab="Tab 3" key="3">努力学习react框架</TabPane>

</Tabs>

</Card>

 

重要的属性

Tabs

参数	说明	类型	默认值
activeKey	当前激活 tab 面板的 key	string	无
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	第一个面板
onChange	切换面板的回调	Function(activeKey) {}	无
onEdit	新增和删除页签的回调，在 type="editable-card" 时有效	(targetKey, action): void	无

 

Tabs.TabPane

参数	说明	类型	默认值
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	无
tab	选项卡头显示文字	string|ReactNode	无

 

演示

 

Form

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

 

表单

我们为 form 提供了以下三种排列方式：

• 水平排列：标签和表单控件水平排列；（默认）

• 垂直排列：标签和表单控件上下垂直排列；

• 行内排列：表单项水平行内排列。

 

表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里我们封装了表单域 <Form.Item /> 。

<Form.Item {...props}>
  {children}
</Form.Item>

 

用法

使用getFieldDecorator进行双向绑定，使用getFieldsValue获取组件的值，使用Form.create创建组件

 

示例

定义getFieldDecorator

 

使用getFieldDecorator

使用create包装form组件以传递this.props

使用getFieldsValue方法获取表单域的值

使用validateFields方法用来检验表单域

 

重要属性

Form

参数	说明	类型	默认值
form	经 Form.create() 包装过的组件会自带 this.props.form 属性	object	-
layout	表单布局	'horizontal'|'vertical'|'inline'	'horizontal'
onSubmit	数据验证成功后回调事件	Function(e:Event)

表单域中的组件可以自行参考文档

演示

 

table表格

展示行列数据。

 

何时使用

• 当有大量结构化的数据需要展现时；

• 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

 

用法

table必须要有columns和DataSource属性一个定义列数据，一个定义数据源

 

示例

 

定义列

 

定义数据源

 

重要属性

Table#

参数	说明	类型	默认值
bordered	是否展示外边框和列边框	boolean	false
columns	表格列的配置描述，具体项见下表	ColumnProps[]	-
dataSource	数据数组	any[]

其余属性可参考antd官网

 

演示