mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
6880bf7073
chore: merge master into featrue
4.0 KiB
4.0 KiB
category | type | cols | title | cover |
---|---|---|---|---|
Components | Other | 1 | ConfigProvider | https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg |
ConfigProvider
provides a uniform configuration support for components.
Usage
This component provides a configuration to all React components underneath itself via the context API. In the render tree all components will have access to the provided config.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Content Security Policy
Some components use dynamic style to support wave effect. You can config csp
prop if Content Security Policy (CSP) is enabled:
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>
API
Property | Description | Type | Default | Version |
---|---|---|---|---|
autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | |
componentSize | Config antd component size | small | middle | large |
- | |
csp | Set Content Security Policy config | { nonce: string } | - | |
direction | Set direction of layout. See demo | ltr | rtl |
ltr |
|
dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll |
boolean | number | - | 4.3.0 |
form | Set Form common props | { validateMessages?: ValidateMessages, requiredMark?: boolean | optional } |
- | requiredMark: 4.8.0 |
getPopupContainer | To set the container of the popup element. The default is to create a div element in body |
function(triggerNode) | () => document.body | |
getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
locale | Language package setting, you can find the packages in antd/lib/locale | object | - | |
pageHeader | Unify the ghost of PageHeader, ref PageHeader | { ghost: boolean } | true | |
prefixCls | Set prefix className (cooperated with @ant-prefix) | string | ant |
|
renderEmpty | Set empty content of components. Ref Empty | function(componentName: string): ReactNode | - | |
space | Set Space size , ref Space |
{ size: small | middle | large | number } |
- | 4.1.0 |
virtual | Disable virtual scroll when set to false |
boolean | - | 4.3.0 |
FAQ
How to contribute a new language?
Does the locale problem still exist in DatePicker even if ConfigProvider locale
is used?
Please make sure you set moment locale or that you don't have two different versions of moment.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
Modal throw error when setting getPopupContainer
?
Related issue: https://github.com/ant-design/ant-design/issues/19974
When you config getPopupContainer
to parentNode globally, Modal will throw error of triggerNode is undefined
because it did not have a triggerNode. You can try the fix below.
<ConfigProvider
- getPopupContainer={triggerNode => triggerNode.parentNode}
+ getPopupContainer={node => {
+ if (node) {
+ return node.parentNode;
+ }
+ return document.body;
+ }}
>
<App />
</ConfigProvider>