ConfigProvider全局化配置
为组件提供统一的全局化配置。
使用#
ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。
import { ConfigProvider } from 'antd';
// ...
return (
<ConfigProvider {...yourConfig}>
<App />
</ConfigProvider>
);代码演示
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | Action 一 John BrownDeleteMore actions |
| Jim Green | 42 | London No. 1 Lake Park | Action 一 Jim GreenDeleteMore actions |
| Joe Black | 32 | Sidney No. 1 Lake Park | Action 一 Joe BlackDeleteMore actions |
import { Table, ConfigProvider, Icon, Divider } from 'hzero-ui';
import zhCN from 'hzero-ui/lib/locale-provider/zh_CN';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="javascript:;">Action 一 {record.name}</a>
<Divider type="vertical" />
<a href="javascript:;">Delete</a>
<Divider type="vertical" />
<a href="javascript:;" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
const App = () => (
<div>
<Table columns={columns} pagination={{ showSizeChanger: true }} dataSource={data} />
</div>
);
ReactDOM.render(
<ConfigProvider exported={{ action: 'http://gitee.com/xurime/excelize/raw/master/test/SharedStrings.xlsx', children: '导出', style: { marginBottom: 16 } }} locale={zhCN} pagenation={{ pageSizeOptions: ['10', '20', '50', '1000'] }}>
<App />
</ConfigProvider>,
mountNode);API#
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| locale | 语言包配置,语言包可到 antd/es/locale 目录下寻找 | object | - | |
| pagination | 设置全局的pagination配置参考下面 | obj | {} | 1.0.77 |
| expored | 设置全局的pagination配置参考下面 | obj | {} | 1.0.77 |
Pagination#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
Exported#
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 按钮失效状态 | boolean | false |
| 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 导出事件 | function({dataParam,method,action}) | - |
| dataParam | 导出的参数 | {} | - |
| method | 导出的方法 | get | set | - |
| action | 对应的url链接 | string | - |
FAQ#
如何增加一个新的语言包?#
参考《增加语言包》。
为什么我使用了 ConfigProvider locale,时间类组件的国际化还有问题?#
请检查是否正确设置了 moment 语言包,或者是否有两个版本的 moment 共存。
import 'moment/locale/zh-cn';
moment.locale('zh-cn');