ConfigProvider全局化配置

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

使用

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

  1. import { ConfigProvider } from 'antd';
  2. // ...
  3. export default () => (
  4. <ConfigProvider direction="rtl">
  5. <App />
  6. </ConfigProvider>
  7. );

Content Security Policy

部分组件为了支持波纹效果,使用了动态样式。如果开启了 Content Security Policy (CSP),你可以通过 csp 属性来进行配置:

  1. <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
  2. <Button>My Button</Button>
  3. </ConfigProvider>

代码演示

ConfigProvider全局化配置 - 图1

国际化

此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。

  1. import {
  2. ConfigProvider,
  3. Pagination,
  4. DatePicker,
  5. TimePicker,
  6. Calendar,
  7. Popconfirm,
  8. Table,
  9. Modal,
  10. Button,
  11. Select,
  12. Transfer,
  13. Radio,
  14. } from 'antd';
  15. import enUS from 'antd/lib/locale/en_US';
  16. import zhCN from 'antd/lib/locale/zh_CN';
  17. import moment from 'moment';
  18. import 'moment/locale/zh-cn';
  19. moment.locale('en');
  20. const { Option } = Select;
  21. const { RangePicker } = DatePicker;
  22. const columns = [
  23. {
  24. title: 'Name',
  25. dataIndex: 'name',
  26. filters: [
  27. {
  28. text: 'filter1',
  29. value: 'filter1',
  30. },
  31. ],
  32. },
  33. {
  34. title: 'Age',
  35. dataIndex: 'age',
  36. },
  37. ];
  38. class Page extends React.Component {
  39. state = {
  40. visible: false,
  41. };
  42. showModal = () => {
  43. this.setState({ visible: true });
  44. };
  45. hideModal = () => {
  46. this.setState({ visible: false });
  47. };
  48. render() {
  49. const info = () => {
  50. Modal.info({
  51. title: 'some info',
  52. content: 'some info',
  53. });
  54. };
  55. const confirm = () => {
  56. Modal.confirm({
  57. title: 'some info',
  58. content: 'some info',
  59. });
  60. };
  61. return (
  62. <div className="locale-components">
  63. <div className="example">
  64. <Pagination defaultCurrent={1} total={50} showSizeChanger />
  65. </div>
  66. <div className="example">
  67. <Select showSearch style={{ width: 200 }}>
  68. <Option value="jack">jack</Option>
  69. <Option value="lucy">lucy</Option>
  70. </Select>
  71. <DatePicker />
  72. <TimePicker />
  73. <RangePicker style={{ width: 200 }} />
  74. </div>
  75. <div className="example">
  76. <Button type="primary" onClick={this.showModal}>
  77. Show Modal
  78. </Button>
  79. <Button onClick={info}>Show info</Button>
  80. <Button onClick={confirm}>Show confirm</Button>
  81. <Popconfirm title="Question?">
  82. <a href="#">Click to confirm</a>
  83. </Popconfirm>
  84. </div>
  85. <div className="example">
  86. <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
  87. </div>
  88. <div className="site-config-provider-calendar-wrapper">
  89. <Calendar fullscreen={false} value={moment()} />
  90. </div>
  91. <div className="example">
  92. <Table dataSource={[]} columns={columns} />
  93. </div>
  94. <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
  95. <p>Locale Modal</p>
  96. </Modal>
  97. </div>
  98. );
  99. }
  100. }
  101. class App extends React.Component {
  102. constructor() {
  103. super();
  104. this.state = {
  105. locale: enUS,
  106. };
  107. }
  108. changeLocale = e => {
  109. const localeValue = e.target.value;
  110. this.setState({ locale: localeValue });
  111. if (!localeValue) {
  112. moment.locale('en');
  113. } else {
  114. moment.locale('zh-cn');
  115. }
  116. };
  117. render() {
  118. const { locale } = this.state;
  119. return (
  120. <div>
  121. <div className="change-locale">
  122. <span style={{ marginRight: 16 }}>Change locale of components: </span>
  123. <Radio.Group value={locale} onChange={this.changeLocale}>
  124. <Radio.Button key="en" value={enUS}>
  125. English
  126. </Radio.Button>
  127. <Radio.Button key="cn" value={zhCN}>
  128. 中文
  129. </Radio.Button>
  130. </Radio.Group>
  131. </div>
  132. <ConfigProvider locale={locale}>
  133. <Page
  134. key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
  135. />
  136. </ConfigProvider>
  137. </div>
  138. );
  139. }
  140. }
  141. ReactDOM.render(<App />, mountNode);
  1. .site-config-provider-calendar-wrapper {
  2. width: 319px;
  3. border: 1px solid #d9d9d9;
  4. border-radius: 2px;
  5. }
  6. .locale-components {
  7. padding-top: 16px;
  8. border-top: 1px solid #d9d9d9;
  9. }
  10. .code-box-demo .example {
  11. margin: 16px 0;
  12. }
  13. .code-box-demo .example > * {
  14. margin-right: 8px;
  15. }
  16. .change-locale {
  17. margin-bottom: 16px;
  18. }

ConfigProvider全局化配置 - 图2

方向

这里列出了支持 rtl 方向的组件,您可以在演示中切换方向。

  1. import {
  2. Input,
  3. Col,
  4. Row,
  5. Select,
  6. InputNumber,
  7. ConfigProvider,
  8. Cascader,
  9. Radio,
  10. Switch,
  11. Tree,
  12. TreeSelect,
  13. Modal,
  14. Button,
  15. Pagination,
  16. Steps,
  17. Rate,
  18. Badge,
  19. Divider,
  20. } from 'antd';
  21. import {
  22. SearchOutlined as SearchIcon,
  23. SmileOutlined,
  24. DownloadOutlined,
  25. LeftOutlined,
  26. RightOutlined,
  27. MinusOutlined,
  28. PlusOutlined,
  29. } from '@ant-design/icons';
  30. const InputGroup = Input.Group;
  31. const ButtonGroup = Button.Group;
  32. const { Option } = Select;
  33. const { TreeNode } = Tree;
  34. const { Search } = Input;
  35. const { Step } = Steps;
  36. const cascaderOptions = [
  37. {
  38. value: 'tehran',
  39. label: 'تهران',
  40. children: [
  41. {
  42. value: 'tehran-c',
  43. label: 'تهران',
  44. children: [
  45. {
  46. value: 'saadat-abad',
  47. label: 'سعادت آیاد',
  48. },
  49. ],
  50. },
  51. ],
  52. },
  53. {
  54. value: 'ardabil',
  55. label: 'اردبیل',
  56. children: [
  57. {
  58. value: 'ardabil-c',
  59. label: 'اردبیل',
  60. children: [
  61. {
  62. value: 'primadar',
  63. label: 'پیرمادر',
  64. },
  65. ],
  66. },
  67. ],
  68. },
  69. {
  70. value: 'gilan',
  71. label: 'گیلان',
  72. children: [
  73. {
  74. value: 'rasht',
  75. label: 'رشت',
  76. children: [
  77. {
  78. value: 'district-3',
  79. label: 'منطقه ۳',
  80. },
  81. ],
  82. },
  83. ],
  84. },
  85. ];
  86. class Page extends React.Component {
  87. state = {
  88. currentStep: 0,
  89. modalVisible: false,
  90. badgeCount: 5,
  91. showBadge: true,
  92. };
  93. selectBefore = (
  94. <Select defaultValue="Http://" style={{ width: 90 }}>
  95. <Option value="Http://">Http://</Option>
  96. <Option value="Https://">Https://</Option>
  97. </Select>
  98. );
  99. selectAfter = (
  100. <Select defaultValue=".com" style={{ width: 80 }}>
  101. <Option value=".com">.com</Option>
  102. <Option value=".jp">.jp</Option>
  103. <Option value=".cn">.cn</Option>
  104. <Option value=".org">.org</Option>
  105. </Select>
  106. );
  107. // ==== Cascader ====
  108. cascaderFilter = (inputValue, path) =>
  109. path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  110. onCascaderChange = value => {
  111. console.log(value);
  112. };
  113. // ==== End Cascader ====
  114. // ==== Modal ====
  115. showModal = () => {
  116. this.setState({
  117. modalVisible: true,
  118. });
  119. };
  120. handleOk = e => {
  121. console.log(e);
  122. this.setState({
  123. modalVisible: false,
  124. });
  125. };
  126. handleCancel = e => {
  127. console.log(e);
  128. this.setState({
  129. modalVisible: false,
  130. });
  131. };
  132. // ==== End Modal ====
  133. onStepsChange = currentStep => {
  134. console.log('onChange:', currentStep);
  135. this.setState({ currentStep });
  136. };
  137. // ==== Badge ====
  138. increaseBadge = () => {
  139. const badgeCount = this.state.badgeCount + 1;
  140. this.setState({ badgeCount });
  141. };
  142. declineBadge = () => {
  143. let badgeCount = this.state.badgeCount - 1;
  144. if (badgeCount < 0) {
  145. badgeCount = 0;
  146. }
  147. this.setState({ badgeCount });
  148. };
  149. onChangeBadge = showBadge => {
  150. this.setState({ showBadge });
  151. };
  152. // ==== End Badge ====
  153. render() {
  154. const { currentStep } = this.state;
  155. return (
  156. <div className="direction-components">
  157. <Row>
  158. <Col span={24}>
  159. <Divider orientation="left">Cascader example</Divider>
  160. <Cascader
  161. suffixIcon={<SearchIcon />}
  162. options={cascaderOptions}
  163. onChange={this.onCascaderChange}
  164. placeholder="یک مورد انتخاب کنید"
  165. popupPlacement={this.props.popupPlacement}
  166. />
  167. &nbsp;&nbsp;&nbsp;&nbsp; With search:
  168. <Cascader
  169. suffixIcon={<SmileOutlined />}
  170. options={cascaderOptions}
  171. onChange={this.onCascaderChange}
  172. placeholder="Select an item"
  173. popupPlacement={this.props.popupPlacement}
  174. showSearch={this.cascaderFilter}
  175. />
  176. </Col>
  177. </Row>
  178. <br />
  179. <Row>
  180. <Col span={12}>
  181. <Divider orientation="left">Switch example</Divider>
  182. &nbsp;&nbsp;
  183. <Switch defaultChecked />
  184. &nbsp;&nbsp;
  185. <Switch loading defaultChecked />
  186. &nbsp;&nbsp;
  187. <Switch size="small" loading />
  188. </Col>
  189. <Col span={12}>
  190. <Divider orientation="left">Radio Group example</Divider>
  191. <Radio.Group defaultValue="c" buttonStyle="solid">
  192. <Radio.Button value="a">تهران</Radio.Button>
  193. <Radio.Button value="b" disabled>
  194. اصفهان
  195. </Radio.Button>
  196. <Radio.Button value="c">فارس</Radio.Button>
  197. <Radio.Button value="d">خوزستان</Radio.Button>
  198. </Radio.Group>
  199. </Col>
  200. </Row>
  201. <br />
  202. <Row>
  203. <Col span={12}>
  204. <Divider orientation="left">Button example</Divider>
  205. <div className="button-demo">
  206. <Button type="primary" icon={<DownloadOutlined />} />
  207. <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
  208. <Button type="primary" shape="round" icon={<DownloadOutlined />} />
  209. <Button type="primary" shape="round" icon={<DownloadOutlined />}>
  210. Download
  211. </Button>
  212. <Button type="primary" icon={<DownloadOutlined />}>
  213. Download
  214. </Button>
  215. <br />
  216. <Button.Group>
  217. <Button type="primary">
  218. <LeftOutlined />
  219. Backward
  220. </Button>
  221. <Button type="primary">
  222. Forward
  223. <RightOutlined />
  224. </Button>
  225. </Button.Group>
  226. <Button type="primary" loading>
  227. Loading
  228. </Button>
  229. <Button type="primary" size="small" loading>
  230. Loading
  231. </Button>
  232. </div>
  233. </Col>
  234. <Col span={12}>
  235. <Divider orientation="left">Tree example</Divider>
  236. <Tree
  237. showLine
  238. checkable
  239. defaultExpandedKeys={['0-0-0', '0-0-1']}
  240. defaultSelectedKeys={['0-0-0', '0-0-1']}
  241. defaultCheckedKeys={['0-0-0', '0-0-1']}
  242. >
  243. <TreeNode title="parent 1" key="0-0">
  244. <TreeNode title="parent 1-0" key="0-0-0" disabled>
  245. <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
  246. <TreeNode title="leaf" key="0-0-0-1" />
  247. </TreeNode>
  248. <TreeNode title="parent 1-1" key="0-0-1">
  249. <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
  250. </TreeNode>
  251. </TreeNode>
  252. </Tree>
  253. </Col>
  254. </Row>
  255. <br />
  256. <Row>
  257. <Col span={24}>
  258. <Divider orientation="left">Input (Input Group) example</Divider>
  259. <InputGroup size="large">
  260. <Row gutter={8}>
  261. <Col span={5}>
  262. <Input defaultValue="0571" />
  263. </Col>
  264. <Col span={8}>
  265. <Input defaultValue="26888888" />
  266. </Col>
  267. </Row>
  268. </InputGroup>
  269. <br />
  270. <InputGroup compact>
  271. <Input style={{ width: '20%' }} defaultValue="0571" />
  272. <Input style={{ width: '30%' }} defaultValue="26888888" />
  273. </InputGroup>
  274. <br />
  275. <InputGroup compact>
  276. <Select defaultValue="Option1">
  277. <Option value="Option1">Option1</Option>
  278. <Option value="Option2">Option2</Option>
  279. </Select>
  280. <Input style={{ width: '50%' }} defaultValue="input content" />
  281. <InputNumber />
  282. </InputGroup>
  283. <br />
  284. <Search placeholder="input search text" enterButton="Search" size="large" />
  285. <br />
  286. <br />
  287. <div style={{ marginBottom: 16 }}>
  288. <Input
  289. addonBefore={this.selectBefore}
  290. addonAfter={this.selectAfter}
  291. defaultValue="mysite"
  292. />
  293. </div>
  294. <br />
  295. <Row>
  296. <Col span={12}>
  297. <Divider orientation="left">Select example</Divider>
  298. <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
  299. <Option value="jack">Jack</Option>
  300. <Option value="مورچه">مورچه</Option>
  301. <Option value="disabled" disabled>
  302. Disabled
  303. </Option>
  304. <Option value="Yiminghe">yiminghe</Option>
  305. </Select>
  306. <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
  307. <Option value="مورچه">مورچه</Option>
  308. </Select>
  309. <Select defaultValue="مورچه" style={{ width: 120 }} loading>
  310. <Option value="مورچه">مورچه</Option>
  311. </Select>
  312. <Select
  313. showSearch
  314. style={{ width: 200 }}
  315. placeholder="Select a person"
  316. optionFilterProp="children"
  317. filterOption={(input, option) =>
  318. option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  319. }
  320. >
  321. <Option value="jack">Jack</Option>
  322. <Option value="سعید">سعید</Option>
  323. <Option value="tom">Tom</Option>
  324. </Select>
  325. </Col>
  326. <Col span={12}>
  327. <Divider orientation="left">TreeSelect example</Divider>
  328. <div>
  329. <TreeSelect
  330. showSearch
  331. style={{ width: '100%' }}
  332. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  333. placeholder="Please select"
  334. allowClear
  335. treeDefaultExpandAll
  336. >
  337. <TreeNode value="parent 1" title="parent 1" key="0-1">
  338. <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
  339. <TreeNode value="leaf1" title="my leaf" key="random" />
  340. <TreeNode value="leaf2" title="your leaf" key="random1" />
  341. </TreeNode>
  342. <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
  343. <TreeNode
  344. value="sss"
  345. title={<b style={{ color: '#08c' }}>sss</b>}
  346. key="random3"
  347. />
  348. </TreeNode>
  349. </TreeNode>
  350. </TreeSelect>
  351. </div>
  352. </Col>
  353. </Row>
  354. <br />
  355. <Row>
  356. <Col span={24}>
  357. <Divider orientation="left">Modal example</Divider>
  358. <div>
  359. <Button type="primary" onClick={this.showModal}>
  360. Open Modal
  361. </Button>
  362. <Modal
  363. title="پنچره ساده"
  364. visible={this.state.modalVisible}
  365. onOk={this.handleOk}
  366. onCancel={this.handleCancel}
  367. >
  368. <p>نگاشته‌های خود را اینجا قراردهید</p>
  369. <p>نگاشته‌های خود را اینجا قراردهید</p>
  370. <p>نگاشته‌های خود را اینجا قراردهید</p>
  371. </Modal>
  372. </div>
  373. </Col>
  374. </Row>
  375. <br />
  376. <Row>
  377. <Col span={24}>
  378. <Divider orientation="left">Steps example</Divider>
  379. <div>
  380. <Steps progressDot current={currentStep}>
  381. <Step title="Finished" description="This is a description." />
  382. <Step title="In Progress" description="This is a description." />
  383. <Step title="Waiting" description="This is a description." />
  384. </Steps>
  385. <br />
  386. <Steps current={currentStep} onChange={this.onStepsChange}>
  387. <Step title="Step 1" description="This is a description." />
  388. <Step title="Step 2" description="This is a description." />
  389. <Step title="Step 3" description="This is a description." />
  390. </Steps>
  391. </div>
  392. </Col>
  393. </Row>
  394. <br />
  395. <Row>
  396. <Col span={12}>
  397. <Divider orientation="left">Rate example</Divider>
  398. <div>
  399. <Rate defaultValue={2.5} />
  400. <br />
  401. <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
  402. supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
  403. implement rtl support.
  404. </div>
  405. </Col>
  406. <Col span={12}>
  407. <Divider orientation="left">Badge example</Divider>
  408. <div>
  409. <div>
  410. <Badge count={this.state.badgeCount}>
  411. <a href="#" className="head-example" />
  412. </Badge>
  413. <ButtonGroup>
  414. <Button onClick={this.declineBadge}>
  415. <MinusOutlined />
  416. </Button>
  417. <Button onClick={this.increaseBadge}>
  418. <PlusOutlined />
  419. </Button>
  420. </ButtonGroup>
  421. </div>
  422. <div style={{ marginTop: 10 }}>
  423. <Badge dot={this.state.showBadge}>
  424. <a href="#" className="head-example" />
  425. </Badge>
  426. <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
  427. </div>
  428. </div>
  429. </Col>
  430. </Row>
  431. </Col>
  432. </Row>
  433. <br />
  434. <br />
  435. <Row>
  436. <Col span={24}>
  437. <Divider orientation="left">Pagination example</Divider>
  438. <Pagination showSizeChanger defaultCurrent={3} total={500} />
  439. </Col>
  440. </Row>
  441. <br />
  442. <Row>
  443. <Col span={24}>
  444. <Divider orientation="left">Grid System example</Divider>
  445. <div className="grid-demo">
  446. <div className="code-box-demo">
  447. <p>
  448. <strong>* Note:</strong> Every calculation in RTL grid system is from right side
  449. (offset, push, etc.)
  450. </p>
  451. <Row>
  452. <Col span={8}>col-8</Col>
  453. <Col span={8} offset={8}>
  454. col-8
  455. </Col>
  456. </Row>
  457. <Row>
  458. <Col span={6} offset={6}>
  459. col-6 col-offset-6
  460. </Col>
  461. <Col span={6} offset={6}>
  462. col-6 col-offset-6
  463. </Col>
  464. </Row>
  465. <Row>
  466. <Col span={12} offset={6}>
  467. col-12 col-offset-6
  468. </Col>
  469. </Row>
  470. <Row>
  471. <Col span={18} push={6}>
  472. col-18 col-push-6
  473. </Col>
  474. <Col span={6} pull={18}>
  475. col-6 col-pull-18
  476. </Col>
  477. </Row>
  478. </div>
  479. </div>
  480. </Col>
  481. </Row>
  482. </div>
  483. );
  484. }
  485. }
  486. class App extends React.Component {
  487. state = {
  488. direction: 'ltr',
  489. popupPlacement: 'bottomLeft',
  490. };
  491. changeDirection = e => {
  492. const directionValue = e.target.value;
  493. this.setState({ direction: directionValue });
  494. if (directionValue === 'rtl') {
  495. this.setState({ popupPlacement: 'bottomRight' });
  496. } else {
  497. this.setState({ popupPlacement: 'bottomLeft' });
  498. }
  499. };
  500. render() {
  501. const { direction, popupPlacement } = this.state;
  502. return (
  503. <>
  504. <div style={{ marginBottom: 16 }}>
  505. <span style={{ marginRight: 16 }}>Change direction of components: </span>
  506. <Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
  507. <Radio.Button key="ltr" value="ltr">
  508. LTR
  509. </Radio.Button>
  510. <Radio.Button key="rtl" value="rtl">
  511. RTL
  512. </Radio.Button>
  513. </Radio.Group>
  514. </div>
  515. <ConfigProvider direction={direction}>
  516. <Page className={direction} popupPlacement={popupPlacement} />
  517. </ConfigProvider>
  518. </>
  519. );
  520. }
  521. }
  522. ReactDOM.render(<App />, mountNode);
  1. .button-demo .ant-btn,
  2. .button-demo .ant-btn-group {
  3. margin-right: 8px;
  4. margin-bottom: 12px;
  5. }
  6. .button-demo .ant-btn-group > .ant-btn,
  7. .button-demo .ant-btn-group > span > .ant-btn {
  8. margin-right: 0;
  9. margin-left: 0;
  10. }
  11. .head-example {
  12. display: inline-block;
  13. width: 42px;
  14. height: 42px;
  15. vertical-align: middle;
  16. background: #eee;
  17. border-radius: 4px;
  18. }
  19. .ant-badge:not(.ant-badge-not-a-wrapper) {
  20. margin-right: 20px;
  21. }
  22. .ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
  23. margin-right: 0;
  24. margin-left: 20px;
  25. }

ConfigProvider全局化配置 - 图3

组件尺寸

修改默认组件尺寸。

  1. import React, { useState } from 'react';
  2. import {
  3. ConfigProvider,
  4. Radio,
  5. Input,
  6. Button,
  7. Select,
  8. DatePicker,
  9. Divider,
  10. Table,
  11. Card,
  12. Tabs,
  13. } from 'antd';
  14. const { TabPane } = Tabs;
  15. const FormSizeDemo = () => {
  16. const [componentSize, setComponentSize] = useState('small');
  17. return (
  18. <div>
  19. <Radio.Group
  20. value={componentSize}
  21. onChange={e => {
  22. setComponentSize(e.target.value);
  23. }}
  24. >
  25. <Radio.Button value="small">Small</Radio.Button>
  26. <Radio.Button value="middle">Middle</Radio.Button>
  27. <Radio.Button value="large">Large</Radio.Button>
  28. </Radio.Group>
  29. <Divider />
  30. <ConfigProvider componentSize={componentSize}>
  31. <div className="example">
  32. <Input />
  33. </div>
  34. <div className="example">
  35. <Tabs defaultActiveKey="1">
  36. <TabPane tab="Tab 1" key="1">
  37. Content of Tab Pane 1
  38. </TabPane>
  39. <TabPane tab="Tab 2" key="2">
  40. Content of Tab Pane 2
  41. </TabPane>
  42. <TabPane tab="Tab 3" key="3">
  43. Content of Tab Pane 3
  44. </TabPane>
  45. </Tabs>
  46. </div>
  47. <div className="example">
  48. <Input.Search allowClear />
  49. </div>
  50. <div className="example">
  51. <Input.TextArea allowClear />
  52. </div>
  53. <div className="example">
  54. <Select defaultValue="demo" options={[{ value: 'demo' }]} />
  55. </div>
  56. <div className="example">
  57. <DatePicker />
  58. </div>
  59. <div className="example">
  60. <DatePicker.RangePicker />
  61. </div>
  62. <div className="example">
  63. <Button>Button</Button>
  64. </div>
  65. <div className="example">
  66. <Card title="Card">
  67. <Table
  68. columns={[
  69. { title: 'Name', dataIndex: 'name' },
  70. { title: 'Age', dataIndex: 'age' },
  71. ]}
  72. dataSource={[
  73. {
  74. key: '1',
  75. name: 'John Brown',
  76. age: 32,
  77. },
  78. {
  79. key: '2',
  80. name: 'Jim Green',
  81. age: 42,
  82. },
  83. {
  84. key: '3',
  85. name: 'Joe Black',
  86. age: 32,
  87. },
  88. ]}
  89. />
  90. </Card>
  91. </div>
  92. </ConfigProvider>
  93. </div>
  94. );
  95. };
  96. ReactDOM.render(<FormSizeDemo />, mountNode);

API

参数说明类型默认值版本
autoInsertSpaceInButton设置为 false 时,移除按钮中 2 个汉字之间的空格booleantrue
componentSize设置 antd 组件大小small | middle | large-
csp设置 Content Security Policy 配置{ nonce: string }-
direction设置文本展示方向。 示例ltr | rtlltr
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | number-4.3.0
form设置 Form 组件的通用属性{ validateMessages?: ValidateMessages, requiredMark?: boolean | optional }-requiredMark: 4.8.0
getPopupContainer弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。function(triggerNode)() => document.body
getTargetContainer配置 Affix、Anchor 滚动监听容器。() => HTMLElement() => window4.2.0
iconPrefixCls设置图标统一样式前缀。注意:需要配合 less 变量 @iconfont-css-prefix 使用stringanticon4.11.0
input设置 Input 组件的通用属性{ autoComplete?: string }-4.2.0
locale语言包配置,语言包可到 antd/lib/locale 目录下寻找object-
pageHeader统一设置 PageHeader 的 ghost,参考 PageHeader{ ghost: boolean }true
prefixCls设置统一样式前缀。注意:需要配合 less 变量 @ant-prefix 使用stringant
renderEmpty自定义组件空状态。参考 空状态function(componentName: string): ReactNode-
space设置 Space 的 size,参考 Space{ size: small | middle | large | number }-4.1.0
virtual设置 false 时关闭虚拟滚动boolean-4.3.0

ConfigProvider.config() 4.13.0+

设置 ModalMessageNotification rootPrefixCls。

  1. ConfigProvider.config({
  2. prefixCls: 'ant',
  3. });

FAQ

如何增加一个新的语言包?

参考《增加语言包》

为什么我使用了 ConfigProvider locale,时间类组件的国际化还有问题?

请检查是否正确设置了 moment 语言包,或者是否有两个版本的 moment 共存。

  1. import 'moment/locale/zh-cn';
  2. moment.locale('zh-cn');

配置 getPopupContainer 导致 Modal 报错?

相关 issue:https://github.com/ant-design/ant-design/issues/19974

当如下全局设置 getPopupContainer 为触发节点的 parentNode 时,由于 Modal 的用法不存在 triggerNode,这样会导致 triggerNode is undefined 的报错,需要增加一个判断条件

  1. <ConfigProvider
  2. - getPopupContainer={triggerNode => triggerNode.parentNode}
  3. + getPopupContainer={node => {
  4. + if (node) {
  5. + return node.parentNode;
  6. + }
  7. + return document.body;
  8. + }}
  9. >
  10. <App />
  11. </ConfigProvider>