为组件提供统一的全局化配置。
ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。
import { ConfigProvider } from 'antd';import React from 'react';// ...const Demo: React.FC = () => (<ConfigProvider direction="rtl"><App /></ConfigProvider>);export default Demo;
部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 csp 属性来进行配置：
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}><Button>My Button</Button></ConfigProvider>
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
import { EllipsisOutlined } from '@ant-design/icons';
import type { RadioChangeEvent, TourProps, UploadFile } from 'antd';
import {
Upload,
Tour,
Input,
Form,
QRCode,
Button,
Calendar,
ConfigProvider,
DatePicker,
Modal,
Pagination,
Popconfirm,
Radio,
Select,
Space,
Table,
theme,
TimePicker,
Transfer,
Image,
InputNumber,
Divider,
} from 'antd';
import type { Locale } from 'antd/es/locale';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
dayjs.locale('en');
const { Option } = Select;
const { RangePicker } = DatePicker;
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [{ text: 'filter1', value: 'filter1' }],
},
{
title: 'Age',
dataIndex: 'age',
},
];
const Page: React.FC = () => {
const { token } = theme.useToken();
const [open, setOpen] = useState(false);
const [tourOpen, setTourOpen] = useState(false);
const tourRefs = React.useRef<HTMLElement[]>([]);
const showModal = () => {
setOpen(true);
};
const hideModal = () => {
setOpen(false);
};
const info = () => {
Modal.info({
title: 'some info',
content: 'some info',
});
};
const confirm = () => {
Modal.confirm({
title: 'some info',
content: 'some info',
});
};
const steps: TourProps['steps'] = [
{
title: 'Upload File',
description: 'Put your files here.',
target: () => tourRefs.current[0],
},
{
title: 'Save',
description: 'Save your changes.',
target: () => tourRefs.current[1],
},
{
title: 'Other Actions',
description: 'Click to see other actions.',
target: () => tourRefs.current[2],
},
];
const fileList: UploadFile[] = [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-2',
percent: 50,
name: 'image.png',
status: 'uploading',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-3',
name: 'image.png',
status: 'error',
},
];
return (
<Space
direction="vertical"
size={[0, 16]}
style={{ width: '100%', paddingTop: 16, borderTop: `1px solid ${token.colorBorder}` }}
>
<Pagination defaultCurrent={1} total={50} showSizeChanger />
<Space wrap>
<Select showSearch style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
</Select>
<DatePicker />
<TimePicker />
<RangePicker />
</Space>
<Space wrap>
<Button type="primary" onClick={showModal}>
Show Modal
</Button>
<Button onClick={info}>Show info</Button>
<Button onClick={confirm}>Show confirm</Button>
<Popconfirm title="Question?">
<a href="#">Click to confirm</a>
</Popconfirm>
</Space>
<Transfer dataSource={[]} showSearch targetKeys={[]} />
<div style={{ width: 320, border: `1px solid ${token.colorBorder}`, borderRadius: 8 }}>
<Calendar fullscreen={false} value={dayjs()} />
</div>
<Form name="basic" autoComplete="off" labelCol={{ sm: { span: 4 } }} wrapperCol={{ span: 6 }}>
<Form.Item label="Username" name="username" rules={[{ required: true }]}>
<Input width={200} />
</Form.Item>
<Form.Item
label="Age"
name="age"
rules={[{ type: 'number', min: 0, max: 99 }]}
initialValue={100}
>
<InputNumber width={200} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 2, span: 6 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
<Table dataSource={[]} columns={columns} />
<Modal title="Locale Modal" open={open} onCancel={hideModal}>
<p>Locale Modal</p>
</Modal>
<Space wrap size={80}>
<QRCode
value="https://ant.design/"
status="expired"
onRefresh={() => console.log('refresh')}
/>
<Image
width={160}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Space>
<Upload listType="picture-card" fileList={fileList} />
<Divider orientation="left">Tour</Divider>
<Button type="primary" onClick={() => setTourOpen(true)}>
Begin Tour
</Button>
<Space>
<Button ref={(node) => node && tourRefs.current.splice(0, 0, node)}> Upload</Button>
<Button ref={(node) => node && tourRefs.current.splice(1, 0, node)} type="primary">
Save
</Button>
<Button
ref={(node) => node && tourRefs.current.splice(2, 0, node)}
icon={<EllipsisOutlined />}
/>
</Space>
<Tour open={tourOpen} steps={steps} onClose={() => setTourOpen(false)} />
</Space>
);
};
const App: React.FC = () => {
const [locale, setLocal] = useState<Locale>(enUS);
const changeLocale = (e: RadioChangeEvent) => {
const localeValue = e.target.value;
setLocal(localeValue);
if (!localeValue) {
dayjs.locale('en');
} else {
dayjs.locale('zh-cn');
}
};
return (
<>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change locale of components:</span>
<Radio.Group value={locale} onChange={changeLocale}>
<Radio.Button key="en" value={enUS}>
English
</Radio.Button>
<Radio.Button key="cn" value={zhCN}>
中文
</Radio.Button>
</Radio.Group>
</div>
<ConfigProvider locale={locale}>
<Page />
</ConfigProvider>
</>
);
};
export default App;
* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)
这里列出了支持 rtl 方向的组件，您可以在演示中切换方向。
import {
DownloadOutlined,
LeftOutlined,
MinusOutlined,
PlusOutlined,
RightOutlined,
SearchOutlined as SearchIcon,
SmileOutlined,
} from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import {
Badge,
Button,
Cascader,
Col,
ConfigProvider,
Divider,
Input,
InputNumber,
Modal,
Pagination,
Radio,
Rate,
Row,
Select,
Space,
Steps,
Switch,
Tree,
TreeSelect,
} from 'antd';
import type { DirectionType } from 'antd/es/config-provider';
import React, { useState } from 'react';
const InputGroup = Input.Group;
const ButtonGroup = Button.Group;
const { Option } = Select;
const { TreeNode } = Tree;
const { Search } = Input;
const cascaderOptions = [
{
value: 'tehran',
label: 'تهران',
children: [
{
value: 'tehran-c',
label: 'تهران',
children: [
{
value: 'saadat-abad',
label: 'سعادت آیاد',
},
],
},
],
},
{
value: 'ardabil',
label: 'اردبیل',
children: [
{
value: 'ardabil-c',
label: 'اردبیل',
children: [
{
value: 'primadar',
label: 'پیرمادر',
},
],
},
],
},
{
value: 'gilan',
label: 'گیلان',
children: [
{
value: 'rasht',
label: 'رشت',
children: [
{
value: 'district-3',
label: 'منطقه ۳',
},
],
},
],
},
];
type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
const [currentStep, setCurrentStep] = useState(0);
const [modalOpen, setModalOpen] = useState(false);
const [badgeCount, setBadgeCount] = useState(5);
const [showBadge, setShowBadge] = useState(true);
const selectBefore = (
<Select defaultValue="Http://" style={{ width: 90 }}>
<Option value="Http://">Http://</Option>
<Option value="Https://">Https://</Option>
</Select>
);
const selectAfter = (
<Select defaultValue=".com" style={{ width: 80 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
// ==== Cascader ====
const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
const onCascaderChange = (value: any) => {
console.log(value);
};
// ==== End Cascader ====
// ==== Modal ====
const showModal = () => {
setModalOpen(true);
};
const handleOk = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
setModalOpen(false);
};
const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
setModalOpen(false);
};
// ==== End Modal ====
const onStepsChange = (newCurrentStep: number) => {
console.log('onChange:', newCurrentStep);
setCurrentStep(newCurrentStep);
};
// ==== Badge ====
const increaseBadge = () => {
setBadgeCount(badgeCount + 1);
};
const declineBadge = () => {
setBadgeCount((prev) => (prev - 1 < 0 ? 0 : prev - 1));
};
const onChangeBadge = (checked: boolean) => {
setShowBadge(checked);
};
// ==== End Badge ====
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={onCascaderChange}
placeholder="Select an item"
popupPlacement={popupPlacement}
showSearch={{ filter: cascaderFilter }}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1677ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Space wrap>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option?.props.children.toLowerCase().includes(input.toLowerCase())
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Space>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode title="parent 1" key="0-1">
<TreeNode title="parent 1-0" key="0-1-1">
<TreeNode title="my leaf" key="random" />
<TreeNode title="your leaf" key="random1" />
</TreeNode>
<TreeNode title="parent 1-1" key="random2">
<TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<Steps
progressDot
current={currentStep}
items={[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]}
/>
<br />
<Steps
current={currentStep}
onChange={onStepsChange}
items={[
{
title: 'Step 1',
description: 'This is a description.',
},
{
title: 'Step 2',
description: 'This is a description.',
},
{
title: 'Step 3',
description: 'This is a description.',
},
]}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<Badge count={badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
<div style={{ marginTop: 12 }}>
<Badge dot={showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={onChangeBadge} checked={showBadge} />
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
};
const App: React.FC = () => {
const [direction, setDirection] = useState<DirectionType>('ltr');
const [popupPlacement, setPopupPlacement] = useState<Placement>('bottomLeft');
const changeDirection = (e: RadioChangeEvent) => {
const directionValue = e.target.value;
setDirection(directionValue);
if (directionValue === 'rtl') {
setPopupPlacement('bottomRight');
} else {
setPopupPlacement('bottomLeft');
}
};
return (
<>
<div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change direction of components:</span>
<Radio.Group defaultValue="ltr" onChange={changeDirection}>
<Radio.Button key="ltr" value="ltr">
LTR
</Radio.Button>
<Radio.Button key="rtl" value="rtl">
RTL
</Radio.Button>
</Radio.Group>
</div>
<ConfigProvider direction={direction}>
<Page popupPlacement={popupPlacement} />
</ConfigProvider>
</>
);
};
export default App;
.button-demo .ant-btn,
.button-demo .ant-btn-group {
margin-right: 8px;
margin-bottom: 12px;
}
.button-demo .ant-btn-group > .ant-btn,
.button-demo .ant-btn-group > span > .ant-btn {
margin-right: 0;
margin-left: 0;
}
.head-example {
display: inline-block;
width: 42px;
height: 42px;
vertical-align: middle;
background: #eee;
border-radius: 4px;
}
.ant-badge:not(.ant-badge-not-a-wrapper) {
margin-right: 20px;
}
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
}修改默认组件尺寸。
import {
Button,
Card,
ConfigProvider,
DatePicker,
Divider,
Input,
Radio,
Select,
Space,
Table,
Tabs,
} from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import React, { useState } from 'react';
const { TabPane } = Tabs;
const App: React.FC = () => {
const [componentSize, setComponentSize] = useState<SizeType>('small');
return (
<>
<Radio.Group
value={componentSize}
onChange={(e) => {
setComponentSize(e.target.value);
}}
>
<Radio.Button value="small">Small</Radio.Button>
<Radio.Button value="middle">Middle</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
</Radio.Group>
<Divider />
<ConfigProvider componentSize={componentSize}>
<Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
<Input />
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Input.Search allowClear />
<Input.TextArea allowClear />
<Select defaultValue="demo" options={[{ value: 'demo' }]} />
<DatePicker />
<DatePicker.RangePicker />
<Button>Button</Button>
<Card title="Card">
<Table
columns={[
{ title: 'Name', dataIndex: 'name' },
{ title: 'Age', dataIndex: 'age' },
]}
dataSource={[
{ key: '1', name: 'John Brown', age: 32 },
{ key: '2', name: 'Jim Green', age: 42 },
{ key: '3', name: 'Joe Black', age: 32 },
]}
/>
</Card>
</Space>
</ConfigProvider>
</>
);
};
export default App;
通过 theme 修改主题。
import { Button, ColorPicker, ConfigProvider, Form, InputNumber } from 'antd';
import type { Color } from 'antd/es/color-picker';
import React from 'react';
type ThemeData = {
borderRadius: number;
colorPrimary: string;
};
const defaultData: ThemeData = {
borderRadius: 6,
colorPrimary: '#1677ff',
};
export default () => {
const [form] = Form.useForm();
const [data, setData] = React.useState<ThemeData>(defaultData);
return (
<ConfigProvider
theme={{ token: { colorPrimary: data.colorPrimary, borderRadius: data.borderRadius } }}
>
<Form
form={form}
onValuesChange={(changedValues, allValues) => {
const colorObj = changedValues?.colorPrimary
? { colorPrimary: (allValues?.colorPrimary as Color)?.toHexString() }
: {};
setData({
...allValues,
...colorObj,
});
}}
name="theme"
initialValues={defaultData}
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
<Form.Item valuePropName="color" name="colorPrimary" label="Primary Color">
<ColorPicker />
</Form.Item>
<Form.Item name="borderRadius" label="Border Radius">
<InputNumber />
</Form.Item>
<Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>
<Button type="primary">Submit</Button>
</Form.Item>
</Form>
</ConfigProvider>
);
};
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoInsertSpaceInButton | 设置为 false 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
| componentSize | 设置 antd 组件大小 | small | middle | large | - | |
| csp | 设置 Content Security Policy 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 示例 | ltr | rtl | ltr | |
| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean | number | - | 5.5.0 |
| popupOverflow | Select 类组件弹层展示逻辑，默认为可视区域滚动，可配置成滚动区域滚动 | 'viewport' | 'scroll' | 'viewport' | 5.5.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: ValidateMessages, requiredMark?: boolean | optional, colon?: boolean, scrollToFirstError?: boolean | Options} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | 设置图标统一样式前缀 | string | anticon | 4.11.0 |
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
| select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | |
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
| locale | 语言包配置，语言包可到 antd/locale 目录下寻找 | object | - | |
| prefixCls | 设置统一样式前缀 | string | ant | |
| renderEmpty | 自定义组件空状态。参考 空状态 | function(componentName: string): ReactNode | - | |
| space | 设置 Space 的通用属性，参考 Space | { size: small | middle | large | number, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| theme | 设置主题，参考 定制主题 | - | - | 5.0.0 |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | - | 4.3.0 |
设置 Modal、Message、Notification 静态方法配置，只会对非 hooks 的静态方法调用生效。
ConfigProvider.config({prefixCls: 'ant',iconPrefixCls: 'anticon',// 5.6.0+// 请优先考虑使用 hooks 版本theme: { token: { colorPrimary: 'red' } },});
5.3.0+5.2.0 版本后可用。获取父级 Provider 的值。如 DisabledContextProvider、SizeContextProvider。
const {componentDisabled, // 5.3.0+componentSize, // 5.3.0+} = ConfigProvider.useConfig();
| 返回值 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| componentDisabled | antd 组件禁用状态 | boolean | - | 5.3.0 |
| componentSize | antd 组件大小状态 | small | middle | large | - | 5.3.0 |
参考《增加语言包》。
参考 FAQ 为什么时间类组件的国际化 locale 设置不生效？。
getPopupContainer 导致 Modal 报错？相关 issue：https://github.com/ant-design/ant-design/issues/19974
当如下全局设置 getPopupContainer 为触发节点的 parentNode 时，由于 Modal 的用法不存在 triggerNode，这样会导致 triggerNode is undefined 的报错，需要增加一个判断条件。
<ConfigProvider- getPopupContainer={triggerNode => triggerNode.parentNode}+ getPopupContainer={node => {+ if (node) {+ return node.parentNode;+ }+ return document.body;+ }}><App /></ConfigProvider>
prefixCls 和 theme。静态方法是使用 ReactDOM.render 重新渲染一个 React 根节点上，和主应用的 React 节点是脱离的。我们建议使用 useMessage、useNotification 和 useModal 来使用相关方法。原先的静态方法在 5.0 中已被废弃。
相关 issue：#39045
由于 Vite 生产模式下打包与开发模式不同，cjs 格式的文件会多一层，需要 zhCN.default 来获取。推荐 Vite 用户直接从 antd/es/locale 目录下引入 esm 格式的 locale 文件。