ConfigProvider全局化配置

为组件提供统一的全局化配置。

使用#

ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

import { ConfigProvider } from 'antd';

// ...

return (
  <ConfigProvider {...yourConfig}>
    <App />
  </ConfigProvider>
);

代码演示

  • 1

ConfigProvider 包裹你的应用,可以配置你需要的一些全局配置。

expand codeexpand code
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默认的当前页数number1
defaultPageSize默认的每页条数number10
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
itemRender用于自定义页码的结构,可用于优化 SEO(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-
pageSize每页条数number-
pageSizeOptions指定每页可以显示多少条string[]'10', '20', '30', '40'
showQuickJumper是否可以快速跳转至某页booleanfalse
showSizeChanger是否可以改变 pageSizebooleanfalse
showTotal用于显示数据总量和当前数据顺序Function(total, range)-
simple当添加该属性时,显示为简单分页boolean-
size当为「small」时,是小尺寸分页string""
total数据总数number0
onChange页码改变的回调,参数是改变后的页码及每页条数Function(page, pageSize)noop
onShowSizeChangepageSize 变化的回调Function(current, size)noop

Exported#

属性说明类型默认值
disabled按钮失效状态booleanfalse
ghost幽灵属性,使按钮背景透明,版本 2.7 中增加booleanfalse
href点击跳转的地址,指定此属性 button 的行为和 a 链接一致string-
htmlType设置 button 原生的 type 值,可选值请参考 HTML 标准stringbutton
icon设置按钮的图标类型string-
loading设置按钮载入状态boolean | { delay: number }false
shape设置按钮形状,可选值为 circle 或者不设string-
size设置按钮大小,可选值为 small large 或者不设stringdefault
target相当于 a 链接的 target 属性,href 存在时生效string-
type设置按钮类型,可选值为 primary dashed danger(版本 2.7 中增加) 或者不设string-
onClickclick 导出事件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');