react----antd(1)

表长度校验 128字节

其他输入框 后端规定多宽就设置多宽

form 表单

高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。

参数 说明
validateFields 触发表单验证 (nameList?: NamePath[]) => Promise
resetFields 重置一组字段到 initialValues
initialValues form上设置默认值
getFieldsValue 获取一组字段名对应的值,会按照对应结构返回。默认返回现存字段值
validateMessages 验证提示模板
setFieldsValue 可以使用 form.setFieldsValue 来动态改变表单值

input 输入框

通过鼠标或键盘输入内容,是最基础的表单域的包装。

参数 说明
allowClear 可以点击清除图标删除内容
placeholder input 自带
addonAfter 带标签的 input,设置后置标签
addonBefore 带标签的 input,设置前置标签
size 控件大小。注:标准表单内的输入框大小限制为 large
bordered 是否有边框
disabled 是否禁用状态,默认为 false
onChange 输入框内容变化时的回调 function(e)
onPressEnter 按下回车的回调

InputNumber数字输入框

通过鼠标或键盘,输入范围内的数值。

参数 说明
step 每次改变步数,可以为小数 默认 :1
max 最大值
min 最小值

select 选择器

下拉选择器。

参数 说明
showSearch 使单选模式可搜索
labelInValue 默认情况下 onChange 里只能拿到 value,如果需要拿到选中的节点文本 label,可以使用 labelInValue 属性。
allowClear 支持清除
loading 加载中状态
options 数据化配置选项内容,相比 jsx 定义会获得更好的渲染性能
optionFilterProp 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索

message 全局提示

全局展示操作反馈信息。

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

参数 说明
content 提示内容
duration 自动关闭延时
onClose 关闭时触发的回调函数

table 表格

展示行列数据。

参数 说明
dataSource 数据源 dataSource 为一个数组
Column 列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
– dataIndex列数据在数据项中对应的路径,支持通过数组查询嵌套路径
React 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个key属性
rowKey 你应该使用 rowKey 来指定 dataSource数据源数组 的主键,
loading 页面是否加载中
dataSource 数据数组
bordered 是否展示外边框和列边框
pagination 分页器

card 卡片

通用卡片容器。

参数 说明
title 卡片标题
bodyStyle 内容区域自定义样式

Divider分割线

区隔内容的分割线。

参数 说明
type 水平还是垂直类型 horizontal | vertical 默认:horizontal
dashed 是否虚线

Radio单选框

用于在多个备选项中选中单个状态。

Upload上传

文件选择上传和拖拽上传控件。

参数 说明
beforeUpload 上传文件之前的钩子,参数为上传的文件
action 上传的地址
fileList 已经上传的文件列表
maxCount 限制上传数量。当为 1 时,始终用最新上传的文件代替当前文件
method 上传请求的 http method

Avatar头像

用来代表用户或事物,支持图片、图标或字符展示。

参数 说明
alt 图像无法显示时的替代文本
size 设置头像的大小
shape 指定头像的形状 circle
srcSet 设置图片类头像响应式资源地址

Descriptions描述列表

成组展示多个只读字段。

参数 说明 默认值
colon 配置 Descriptions.Itemcolon 的默认值 默认显示冒号
title 描述列表的标题,显示在最顶部
bordered 是否展示边框
layout 描述布局 horizontal vertical
column 一行的 DescriptionItems 数量 默认一行3个item

DescriptionItem

参数 说明
label 内容的描述

Alert警告提示

警告提示,展现需要关注的信息。

参数 说明 默认值
message 警告提示内容
type 指定警告提示的样式,有四种选择 successinfowarningerror warning
description 警告提示的辅助性文字介绍

Modal对话框

模态对话框。

参数 说明 默认值
visible 对话框是否可见
title 标题
bodyStyle Modal body 样式
cancelText 取消按钮文字 取消
okText 确认按钮文字 确定
centered 垂直居中展示 Modal false
closable 是否显示右上角的关闭按钮 true
confirmLoading 确定按钮 loading false
destroyOnClose 关闭时销毁 Modal 里的子元素 false
footer 底部内容,当不需要默认底部按钮时,可以设为 footer={null} (确定取消按钮)
keyboard 是否支持键盘 esc 关闭 true
maskClosable 点击蒙层是否允许关闭 true
onCancel 点击遮罩层或右上角叉或取消按钮的回调 function(e)
onOk 点击确定回调
`` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置 `destroyOnClose`关闭时销毁 Modal 里的子元素

你可能感兴趣的:(react,react.js)