Ant Design of React
常用的一些组件
Table,Modal,Pagination,Input,Button,Radio,Select,message
Table
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
bordered | 是否展示外边框和列边框 | boolean | false |
columns | 表格列的配置描述,具体项见下表 | ColumnProps[] | - |
components | 覆盖默认的 table 元素 | object | - |
dataSource | 数据数组 | any[] | |
defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false |
defaultExpandedRowKeys | 默认展开的行 | string[] | - |
expandedRowKeys | 展开的行,控制属性 | string[] | - |
expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
expandRowByClick | 通过点击行来展开子行 | boolean | false |
footer | 表格尾部 | Function(currentPageData) | |
indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
loading | 页面是否加载中 | boolean|object (更多) | false |
locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' filterReset: '重置' emptyText: '暂无数据' 默认值 |
pagination | 分页器,参考配置项或 pagination,设为 false 时不展示和进行分页 | object | |
rowClassName | 表格行的类名 | Function(record, index):string | - |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string|Function(record):string | 'key' |
rowSelection | 列表项是否可选择,配置项 | object | null |
scroll | 设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x 设置一个数字,如果要设置为 true ,需要配合样式 .ant-table td { white-space: nowrap; } | { x: number | true, y: number } | - |
showHeader | 是否显示表头 | boolean | true |
size | 正常或迷你类型,default or small | string | default |
title | 表格标题 | Function(currentPageData) | |
onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
onExpand | 点击展开图标时触发 | Function(expanded, record) | |
onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
onHeaderRow | 设置头部行属性 | Function(column, index) | - |
onRow | 设置行属性 | Function(record, index) | - |
Pagination
<Pagination onChange={onChange} total={50} />
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前页数 | number | - |
defaultCurrent | 默认的当前页数 | number | 1 |
defaultPageSize | 默认的每页条数 | number | 10 |
hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
itemRender | 用于自定义页码的结构,可用于优化 SEO | (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode | - |
pageSize | 每页条数 | number | - |
pageSizeOptions | 指定每页可以显示多少条 | string[] | '10', '20', '30', '40' |
showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
showSizeChanger | 是否可以改变 pageSize | boolean | false |
showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
simple | 当添加该属性时,显示为简单分页 | boolean | - |
size | 当为「small」时,是小尺寸分页 | string | "" |
total | 数据总数 | number | 0 |
onChange | 页码改变的回调,参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
Menu
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | ||
defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | |
forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | string: vertical vertical-right horizontal inline | vertical |
multiple | 是否允许多选 | boolean | false |
openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | |
selectable | 是否允许选中 | boolean | true |
selectedKeys | 当前选中的菜单项 key 数组 | string[] | |
style | 根节点样式 | object | |
subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时,单位:秒 | number | 0.1 |
subMenuOpenDelay | 用户鼠标进入子菜单后开启延时,单位:秒 | number | 0 |
theme | 主题颜色 | string: light dark | light |
onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath }) | - |
onDeselect | 取消选中时调用,仅在 multiple 生效 | function({ item, key, selectedKeys }) | - |
onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | noop |
onSelect | 被选中时调用 | function({ item, key, selectedKeys }) | 无 |
Input
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
addonAfter | 带标签的 input,设置后置标签 | string|ReactNode | |
addonBefore | 带标签的 input,设置前置标签 | string|ReactNode | |
defaultValue | 输入框默认内容 | string | |
disabled | 是否禁用状态,默认为 false | boolean | false |
id | 输入框的 id | string | |
prefix | 带有前缀图标的 input | string|ReactNode | |
size | 控件大小。注:标准表单内的输入框大小限制为 large 。可选 large default small | string | default |
suffix | 带有后缀图标的 input | string|ReactNode | |
type | 声明 input 类型,同原生 input 标签的 type 属性,见:MDN(请直接使用 Input.TextArea 代替 type="textarea" )。 | string | text |
value | 输入框内容 | string | |
onPressEnter | 按下回车的回调 | function(e) |
Input
在
Form.Item
内,并且
Form.Item
设置了
id
和
options
属性,则
value
defaultValue
和
id
属性会被自动设置
Button按钮
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type
-> shape
-> size
-> loading
-> disabled
按钮的属性说明如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
ghost | 幽灵属性,使按钮背景透明,版本 2.7 中增加 | boolean | false |
href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - |
htmlType | 设置 button 原生的 type 值,可选值请参考 HTML 标准 | string | button |
icon | 设置按钮的图标类型 | string | - |
loading | 设置按钮载入状态 | boolean | { delay: number } | false |
shape | 设置按钮形状,可选值为 circle 或者不设 | string | - |
size | 设置按钮大小,可选值为 small large 或者不设 | string | default |
target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - |
type | 设置按钮类型,可选值为 primary dashed danger (版本 2.7 中增加) 或者不设 | string | - |
onClick | click 事件的 handler | function | - |
<Button>Hello world!</Button>
最终会被渲染为 <button><span>Hello world!</span></button>
,并且除了上表中的属性,其它属性都会直接传到 <button></button>
。
<Button href="http://example.com">Hello world!</Button>
则会渲染为 <a href="http://example.com"><span>Hello world!</span></a>
。
<Button onClick={this.addTableData} style={{float:'left',marginLeft:'20px',background: '#29d',borderColor:'#29d'}} type="primary">xx属性</Button>