mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: CN
it. (#39519)
This commit is contained in:
parent
12543277b7
commit
ca5b9a6ae0
@ -39,13 +39,13 @@ demo:
|
|||||||
|
|
||||||
### Breadcrumb.Item
|
### Breadcrumb.Item
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| ------------- | ------------------------ | ---------------------------------- | ------ | ------ |
|
| --- | --- | --- | --- | --- |
|
||||||
| className | 自定义类名 | string | - | |
|
| className | 自定义类名 | string | - | |
|
||||||
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |
|
| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown-cn) | - | |
|
||||||
| href | 链接的目的地 | string | - | |
|
| href | 链接的目的地 | string | - | |
|
||||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
| menu | 菜单配置项 | [MenuProps](/components/menu-cn/#API) | - | 4.24.0 |
|
||||||
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
||||||
|
|
||||||
### Breadcrumb.Separator
|
### Breadcrumb.Separator
|
||||||
|
|
||||||
|
@ -77,7 +77,7 @@ group:
|
|||||||
|
|
||||||
### 如何移除两个汉字之间的空格?
|
### 如何移除两个汉字之间的空格?
|
||||||
|
|
||||||
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
|
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#API) 的 `autoInsertSpaceInButton` 为 `false`。
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />
|
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAA
|
|||||||
|
|
||||||
### 如何给日期类组件配置国际化?
|
### 如何给日期类组件配置国际化?
|
||||||
|
|
||||||
参考 [如何给日期类组件配置国际化](/components/date-picker/#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)。
|
参考 [如何给日期类组件配置国际化](/components/date-picker-cn#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)。
|
||||||
|
|
||||||
### 为什么时间类组件的国际化 locale 设置不生效?
|
### 为什么时间类组件的国际化 locale 设置不生效?
|
||||||
|
|
||||||
|
@ -49,7 +49,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAA
|
|||||||
| size | card 的尺寸 | `default` \| `small` | `default` | |
|
| size | card 的尺寸 | `default` \| `small` | `default` | |
|
||||||
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
||||||
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
|
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
|
||||||
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
|
| tabProps | [Tabs](/components/tabs-cn#Tabs) | - | - | |
|
||||||
| title | 卡片标题 | ReactNode | - | |
|
| title | 卡片标题 | ReactNode | - | |
|
||||||
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - | |
|
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - | |
|
||||||
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
||||||
|
@ -53,15 +53,15 @@ export default () => (
|
|||||||
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
|
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
|
||||||
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||||
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`,当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
|
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`,当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
|
||||||
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
|
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
|
||||||
| getPopupContainer | 弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
|
| getPopupContainer | 弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
|
||||||
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
||||||
| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
|
| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
|
||||||
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
|
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
|
||||||
| locale | 语言包配置,语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | |
|
| locale | 语言包配置,语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | |
|
||||||
| prefixCls | 设置统一样式前缀 | string | `ant` | |
|
| prefixCls | 设置统一样式前缀 | string | `ant` | |
|
||||||
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
|
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty-cn) | function(componentName: string): ReactNode | - | |
|
||||||
| space | 设置 Space 的 `size`,参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
| space | 设置 Space 的 `size`,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||||
| theme | 设置主题,参考 [定制主题](/docs/react/customize-theme-cn) | - | - | 5.0.0 |
|
| theme | 设置主题,参考 [定制主题](/docs/react/customize-theme-cn) | - | - | 5.0.0 |
|
||||||
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
|
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
|
||||||
|
|
||||||
|
@ -125,7 +125,7 @@ import locale from 'antd/locale/zh_CN';
|
|||||||
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [dayjs](https://day.js.org/),支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [dayjs](https://day.js.org/),支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
||||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||||
| showNow | 当设定了 `showTime` 的时候,面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
| showNow | 当设定了 `showTime` 的时候,面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
||||||
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#API) | |
|
||||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
||||||
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
||||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||||
@ -194,7 +194,7 @@ import locale from 'antd/locale/zh_CN';
|
|||||||
| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - | |
|
| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - | |
|
||||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||||
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
|
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
|
||||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#API) | |
|
||||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
||||||
| value | 日期 | [dayjs](https://day.js.org/)\[] | - | |
|
| value | 日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||||
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||||
|
@ -49,7 +49,7 @@ demo:
|
|||||||
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
|
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | |
|
||||||
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
||||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
||||||
| menu | 菜单配置项 | [MenuProps](/components/menu/#API) | - | 4.24.0 |
|
| menu | 菜单配置项 | [MenuProps](/components/menu-cn#API) | - | 4.24.0 |
|
||||||
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
||||||
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
||||||
| placement | 菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
| placement | 菜单弹出位置:`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | |
|
||||||
@ -67,6 +67,6 @@ demo:
|
|||||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||||
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
||||||
| icon | 右侧的 icon | ReactNode | - | |
|
| icon | 右侧的 icon | ReactNode | - | |
|
||||||
| size | 按钮大小,和 [Button](/components/button/#API) 一致 | string | `default` | |
|
| size | 按钮大小,和 [Button](/components/button-cn#API) 一致 | string | `default` | |
|
||||||
| type | 按钮类型,和 [Button](/components/button/#API) 一致 | string | `default` | |
|
| type | 按钮类型,和 [Button](/components/button-cn#API) 一致 | string | `default` | |
|
||||||
| onClick | 点击左侧按钮的回调,和 [Button](/components/button/#API) 一致 | (event) => void | - | |
|
| onClick | 点击左侧按钮的回调,和 [Button](/components/button-cn#API) 一致 | (event) => void | - | |
|
||||||
|
@ -65,7 +65,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
|
|||||||
| initialValues | 表单默认值,只有初始化以及重置时生效 | object | - | |
|
| initialValues | 表单默认值,只有初始化以及重置时生效 | object | - | |
|
||||||
| labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` | |
|
| labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` | |
|
||||||
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
||||||
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
|
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn#Col) | - | |
|
||||||
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
|
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
|
||||||
| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | |
|
| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | |
|
||||||
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
||||||
@ -74,7 +74,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
|
|||||||
| size | 设置字段组件的尺寸(仅限 antd 组件) | `small` \| `middle` \| `large` | - | |
|
| size | 设置字段组件的尺寸(仅限 antd 组件) | `small` \| `middle` \| `large` | - | |
|
||||||
| validateMessages | 验证提示模板,说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
|
| validateMessages | 验证提示模板,说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
|
||||||
| validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 |
|
| validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 |
|
||||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid/#Col) | - | |
|
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid-cn#Col) | - | |
|
||||||
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
||||||
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
||||||
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
||||||
@ -93,7 +93,7 @@ const validateMessages = {
|
|||||||
<Form validateMessages={validateMessages} />;
|
<Form validateMessages={validateMessages} />;
|
||||||
```
|
```
|
||||||
|
|
||||||
此外,[ConfigProvider](/components/config-provider/) 也提供了全局化配置方案,允许统一配置错误提示模板:
|
此外,[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案,允许统一配置错误提示模板:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const validateMessages = {
|
const validateMessages = {
|
||||||
@ -124,7 +124,7 @@ const validateMessages = {
|
|||||||
| initialValue | 设置子元素默认值,如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
|
| initialValue | 设置子元素默认值,如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
|
||||||
| label | `label` 标签的文本 | ReactNode | - | |
|
| label | `label` 标签的文本 | ReactNode | - | |
|
||||||
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
|
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
|
||||||
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
|
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#Col) | - | |
|
||||||
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
|
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
|
||||||
| name | 字段名,支持数组 | [NamePath](#NamePath) | - | |
|
| name | 字段名,支持数组 | [NamePath](#NamePath) | - | |
|
||||||
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
||||||
@ -133,13 +133,13 @@ const validateMessages = {
|
|||||||
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
|
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
|
||||||
| rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - | |
|
| rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - | |
|
||||||
| shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
|
| shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
|
||||||
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
|
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#API) | - | 4.7.0 |
|
||||||
| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | |
|
| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | |
|
||||||
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
|
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
|
||||||
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
|
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
|
||||||
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | |
|
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | |
|
||||||
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | |
|
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | |
|
||||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
|
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#Col) | - | |
|
||||||
|
|
||||||
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
|
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
|
||||||
|
|
||||||
|
@ -100,7 +100,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| breakpoint | 触发响应式布局的[断点](/components/grid/#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
|
| breakpoint | 触发响应式布局的[断点](/components/grid-cn#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
|
||||||
| className | 容器 className | string | - |
|
| className | 容器 className | string | - |
|
||||||
| collapsed | 当前收起状态 | boolean | - |
|
| collapsed | 当前收起状态 | boolean | - |
|
||||||
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 80 |
|
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 80 |
|
||||||
@ -112,7 +112,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
|
|||||||
| trigger | 自定义 trigger,设置为 null 时隐藏 trigger | ReactNode | - |
|
| trigger | 自定义 trigger,设置为 null 时隐藏 trigger | ReactNode | - |
|
||||||
| width | 宽度 | number \| string | 200 |
|
| width | 宽度 | number \| string | 200 |
|
||||||
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
|
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
|
||||||
| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
|
| onBreakpoint | 触发响应式布局[断点](/components/grid-cn#API)时的回调 | (broken) => {} | - |
|
||||||
| onCollapse | 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
|
| onCollapse | 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
|
||||||
|
|
||||||
#### breakpoint width
|
#### breakpoint width
|
||||||
|
@ -39,7 +39,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
|
|||||||
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
|
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
|
||||||
| header | 列表头部 | ReactNode | - | |
|
| header | 列表头部 | ReactNode | - | |
|
||||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
|
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
|
||||||
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin-cn#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
||||||
| loadMore | 加载更多 | ReactNode | - | |
|
| loadMore | 加载更多 | ReactNode | - | |
|
||||||
| locale | 默认文案设置,目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
|
| locale | 默认文案设置,目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
|
||||||
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
|
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
|
||||||
@ -56,7 +56,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
|
|||||||
| -------- | ------------------ | --------------------------- | -------- |
|
| -------- | ------------------ | --------------------------- | -------- |
|
||||||
| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
|
| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
|
||||||
|
|
||||||
更多配置项,请查看 [`Pagination`](/components/pagination/)。
|
更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
|
||||||
|
|
||||||
### List grid props
|
### List grid props
|
||||||
|
|
||||||
|
@ -134,4 +134,4 @@ return (
|
|||||||
|
|
||||||
### 静态方法如何设置 prefixCls ?
|
### 静态方法如何设置 prefixCls ?
|
||||||
|
|
||||||
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
|
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。
|
||||||
|
@ -43,7 +43,7 @@ demo:
|
|||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
||||||
| bodyStyle | Modal body 样式 | CSSProperties | | |
|
| bodyStyle | Modal body 样式 | CSSProperties | | |
|
||||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| cancelText | 取消按钮文字 | ReactNode | `取消` | |
|
| cancelText | 取消按钮文字 | ReactNode | `取消` | |
|
||||||
| centered | 垂直居中展示 Modal | boolean | false | |
|
| centered | 垂直居中展示 Modal | boolean | false | |
|
||||||
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
|
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
|
||||||
@ -59,7 +59,7 @@ demo:
|
|||||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
||||||
| maskStyle | 遮罩样式 | CSSProperties | | |
|
| maskStyle | 遮罩样式 | CSSProperties | | |
|
||||||
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
||||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| okText | 确认按钮文字 | ReactNode | `确定` | |
|
| okText | 确认按钮文字 | ReactNode | `确定` | |
|
||||||
| okType | 确认按钮类型 | string | `primary` | |
|
| okType | 确认按钮类型 | string | `primary` | |
|
||||||
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
||||||
@ -94,7 +94,7 @@ demo:
|
|||||||
| afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
|
| afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
|
||||||
| autoFocusButton | 指定自动获得焦点的按钮 | null \| `ok` \| `cancel` | `ok` | |
|
| autoFocusButton | 指定自动获得焦点的按钮 | null \| `ok` \| `cancel` | `ok` | |
|
||||||
| bodyStyle | Modal body 样式 | CSSProperties | | 4.8.0 |
|
| bodyStyle | Modal body 样式 | CSSProperties | | 4.8.0 |
|
||||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |
|
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |
|
||||||
| centered | 垂直居中展示 Modal | boolean | false | |
|
| centered | 垂直居中展示 Modal | boolean | false | |
|
||||||
| className | 容器类名 | string | - | |
|
| className | 容器类名 | string | - | |
|
||||||
@ -107,7 +107,7 @@ demo:
|
|||||||
| mask | 是否展示遮罩 | boolean | true | |
|
| mask | 是否展示遮罩 | boolean | true | |
|
||||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
|
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
|
||||||
| maskStyle | 遮罩样式 | object | {} | |
|
| maskStyle | 遮罩样式 | object | {} | |
|
||||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| okText | 确认按钮文字 | string | `确定` | |
|
| okText | 确认按钮文字 | string | `确定` | |
|
||||||
| okType | 确认按钮类型 | string | `primary` | |
|
| okType | 确认按钮类型 | string | `primary` | |
|
||||||
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
||||||
@ -200,4 +200,4 @@ return (
|
|||||||
|
|
||||||
### 静态方法如何设置 prefixCls ?
|
### 静态方法如何设置 prefixCls ?
|
||||||
|
|
||||||
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
|
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。
|
||||||
|
@ -117,4 +117,4 @@ return (
|
|||||||
|
|
||||||
### 静态方法如何设置 prefixCls ?
|
### 静态方法如何设置 prefixCls ?
|
||||||
|
|
||||||
你可以通过 [`ConfigProvider.config`](</components/config-provider/#ConfigProvider.config()-4.13.0+>) 进行设置。
|
你可以通过 [`ConfigProvider.config`](</components/config-provider-cn#ConfigProvider.config()-4.13.0+>) 进行设置。
|
||||||
|
@ -33,11 +33,11 @@ demo:
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| cancelText | 取消按钮文字 | string | `取消` | |
|
| cancelText | 取消按钮文字 | string | `取消` | |
|
||||||
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
||||||
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | <ExclamationCircle /> | |
|
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | <ExclamationCircle /> | |
|
||||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button-cn#API) | - | |
|
||||||
| okText | 确认按钮文字 | string | `确定` | |
|
| okText | 确认按钮文字 | string | `确定` | |
|
||||||
| okType | 确认按钮类型 | string | `primary` | |
|
| okType | 确认按钮类型 | string | `primary` | |
|
||||||
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
||||||
@ -45,7 +45,7 @@ demo:
|
|||||||
| onCancel | 点击取消的回调 | function(e) | - | |
|
| onCancel | 点击取消的回调 | function(e) | - | |
|
||||||
| onConfirm | 点击确认的回调 | function(e) | - | |
|
| onConfirm | 点击确认的回调 | function(e) | - | |
|
||||||
|
|
||||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
|
||||||
|
|
||||||
## 注意
|
## 注意
|
||||||
|
|
||||||
|
@ -35,7 +35,7 @@ demo:
|
|||||||
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
||||||
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
||||||
|
|
||||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
|
||||||
|
|
||||||
## 注意
|
## 注意
|
||||||
|
|
||||||
|
@ -60,7 +60,7 @@ demo:
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
| open | 值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
| open | 值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
||||||
| placement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | 4.23.0 |
|
| placement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip-cn) | string | - | 4.23.0 |
|
||||||
| getPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
| getPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
||||||
| formatter | Slider 会把当前值传给 `formatter`,并在 Tooltip 中显示 `formatter` 的返回值,若为 null,则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
| formatter | Slider 会把当前值传给 `formatter`,并在 Tooltip 中显示 `formatter` 的返回值,若为 null,则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
||||||
|
|
||||||
|
@ -57,7 +57,7 @@ const columns = [
|
|||||||
## 相关推荐
|
## 相关推荐
|
||||||
|
|
||||||
- [Kitchen Sketch 插件 💎](https://kitchen.alipay.com/):设计师神器,两步自动生成 Ant Design 表格组件。
|
- [Kitchen Sketch 插件 💎](https://kitchen.alipay.com/):设计师神器,两步自动生成 Ant Design 表格组件。
|
||||||
- [ProTable](https://procomponents.ant.design/components/table) 高级表格:在 `antd` Table 之上扩展了更多便捷易用的功能,内置搜索、筛选、刷新等常用表格行为,并为多种类型数据展示提供了内置格式化。
|
- [ProTable](https://procomponents.ant.design/components/table-cn) 高级表格:在 `antd` Table 之上扩展了更多便捷易用的功能,内置搜索、筛选、刷新等常用表格行为,并为多种类型数据展示提供了内置格式化。
|
||||||
- [S2](https://s2.antv.vision/zh) 多维交叉分析表格:[AntV S2 和 Antd Table 有什么区别?](https://zhuanlan.zhihu.com/p/494995642)
|
- [S2](https://s2.antv.vision/zh) 多维交叉分析表格:[AntV S2 和 Antd Table 有什么区别?](https://zhuanlan.zhihu.com/p/494995642)
|
||||||
|
|
||||||
## 代码演示
|
## 代码演示
|
||||||
@ -116,15 +116,15 @@ const columns = [
|
|||||||
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
|
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
|
||||||
| footer | 表格尾部 | function(currentPageData) | - | |
|
| footer | 表格尾部 | function(currentPageData) | - | |
|
||||||
| getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
| getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
||||||
| loading | 页面是否加载中 | boolean \| [Spin Props](/components/spin/#API) | false | |
|
| loading | 页面是否加载中 | boolean \| [Spin Props](/components/spin-cn#API) | false | |
|
||||||
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | |
|
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | |
|
||||||
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档,设为 false 时不展示和进行分页 | object \| `false` | - | |
|
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/components/pagination-cn) 文档,设为 false 时不展示和进行分页 | object \| `false` | - | |
|
||||||
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
||||||
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string \| function(record): string | `key` | |
|
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string \| function(record): string | `key` | |
|
||||||
| rowSelection | 表格行是否可选择,[配置项](#rowSelection) | object | - | |
|
| rowSelection | 表格行是否可选择,[配置项](#rowSelection) | object | - | |
|
||||||
| scroll | 表格是否可滚动,也可以指定滚动区域的宽、高,[配置项](#scroll) | object | - | |
|
| scroll | 表格是否可滚动,也可以指定滚动区域的宽、高,[配置项](#scroll) | object | - | |
|
||||||
| showHeader | 是否显示表头 | boolean | true | |
|
| showHeader | 是否显示表头 | boolean | true | |
|
||||||
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean \| [Tooltip props](/components/tooltip/) | true | |
|
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean \| [Tooltip props](/components/tooltip-cn) | true | |
|
||||||
| size | 表格大小 | `large` \| `middle` \| `small` | `large` | |
|
| size | 表格大小 | `large` \| `middle` \| `small` | `large` | |
|
||||||
| sortDirections | 支持的排序方式,取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
|
| sortDirections | 支持的排序方式,取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
|
||||||
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
|
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
|
||||||
@ -187,7 +187,7 @@ const columns = [
|
|||||||
| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 | function(text, record, index) {} | - | |
|
| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引 | function(text, record, index) {} | - | |
|
||||||
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
|
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
|
||||||
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
||||||
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true | |
|
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip-cn/#API) | true | |
|
||||||
| sortDirections | 支持的排序方式,覆盖 `Table` 中 `sortDirections`, 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
|
| sortDirections | 支持的排序方式,覆盖 `Table` 中 `sortDirections`, 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
|
||||||
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | function \| boolean | - | |
|
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | function \| boolean | - | |
|
||||||
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | |
|
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | |
|
||||||
@ -212,7 +212,7 @@ const columns = [
|
|||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| position | 指定分页显示的位置, 取值为`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
|
| position | 指定分页显示的位置, 取值为`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
|
||||||
|
|
||||||
更多配置项,请查看 [`Pagination`](/components/pagination/)。
|
更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
|
||||||
|
|
||||||
### expandable
|
### expandable
|
||||||
|
|
||||||
|
@ -95,7 +95,7 @@ type DisabledTime = (now: Dayjs) => {
|
|||||||
|
|
||||||
## RangePicker
|
## RangePicker
|
||||||
|
|
||||||
属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性:
|
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#RangePicker) 相同。还包含以下属性:
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| ------------ | -------------------- | --------------------------------------- | ------ | ------ |
|
| ------------ | -------------------- | --------------------------------------- | ------ | ------ |
|
||||||
|
@ -73,7 +73,7 @@ demo:
|
|||||||
| treeExpandAction | 点击节点 title 时的展开逻辑,可选:false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 |
|
| treeExpandAction | 点击节点 title 时的展开逻辑,可选:false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 |
|
||||||
| treeExpandedKeys | 设置展开的树节点 | string\[] | - | |
|
| treeExpandedKeys | 设置展开的树节点 | string\[] | - | |
|
||||||
| treeIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 | boolean | false | |
|
| treeIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 | boolean | false | |
|
||||||
| treeLine | 是否展示线条样式,请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
|
| treeLine | 是否展示线条样式,请参考 [Tree - showLine](/components/tree-cn#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
|
||||||
| treeLoadedKeys | (受控)已经加载的节点,需要配合 `loadData` 使用 | string[] | [] | |
|
| treeLoadedKeys | (受控)已经加载的节点,需要配合 `loadData` 使用 | string[] | [] | |
|
||||||
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
|
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
|
||||||
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |
|
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |
|
||||||
@ -115,4 +115,4 @@ demo:
|
|||||||
|
|
||||||
### 自定义 Option 样式导致滚动异常怎么办?
|
### 自定义 Option 样式导致滚动异常怎么办?
|
||||||
|
|
||||||
请参考 Select 的 [FAQ](/components/select)。
|
请参考 Select 的 [FAQ](/components/select-cn)。
|
||||||
|
@ -148,7 +148,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAA
|
|||||||
| rows | 最多显示的行数 | number | - | |
|
| rows | 最多显示的行数 | number | - | |
|
||||||
| suffix | 自定义省略内容后缀 | string | - | |
|
| suffix | 自定义省略内容后缀 | string | - | |
|
||||||
| symbol | 自定义展开描述文案 | ReactNode | `展开` | |
|
| symbol | 自定义展开描述文案 | ReactNode | `展开` | |
|
||||||
| tooltip | 省略时,展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 |
|
| tooltip | 省略时,展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip-cn/#API) | - | 4.11.0 |
|
||||||
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
|
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
|
||||||
| onExpand | 点击展开时的回调 | function(event) | - | |
|
| onExpand | 点击展开时的回调 | function(event) | - | |
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ demo:
|
|||||||
| name | 发到后台的文件参数名 | string | `file` | |
|
| name | 发到后台的文件参数名 | string | `file` | |
|
||||||
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
||||||
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
|
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
|
||||||
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)(仅支持 `type="line"`) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
|
| progress | 自定义进度条样式 | [ProgressProps](/components/progress-cn#API)(仅支持 `type="line"`) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
|
||||||
| showUploadList | 是否展示文件列表, 可设为一个对象,用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
|
| showUploadList | 是否展示文件列表, 可设为一个对象,用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
|
||||||
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
||||||
| onChange | 上传文件改变时的回调,详见 [onChange](#onChange) | function | - | |
|
| onChange | 上传文件改变时的回调,详见 [onChange](#onChange) | function | - | |
|
||||||
|
@ -25,13 +25,13 @@ title: FAQ
|
|||||||
|
|
||||||
该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本,你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件,或者使用其他的 `getXxxxContainer` 参数。
|
该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本,你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件,或者使用其他的 `getXxxxContainer` 参数。
|
||||||
|
|
||||||
可以参考 [Select 属性](/components/select/#Select-props)
|
可以参考 [Select 属性](/components/select-cn#Select-props)
|
||||||
|
|
||||||
相关 issue:[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
相关 issue:[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||||
|
|
||||||
## `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动?
|
## `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动?
|
||||||
|
|
||||||
使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/select/#Select-props))来将组件渲染到滚动区域内,或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题,可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/config-provider/#API))
|
使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/select-cn#Select-props))来将组件渲染到滚动区域内,或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题,可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`([API 文档](/components/config-provider-cn#API))
|
||||||
|
|
||||||
并且保证 parentElement 是 `position: relative` 或 `position: absolute`。
|
并且保证 parentElement 是 `position: relative` 或 `position: absolute`。
|
||||||
|
|
||||||
@ -75,7 +75,7 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更,
|
|||||||
|
|
||||||
## 多个组件放一排时没有垂直对齐怎么办?
|
## 多个组件放一排时没有垂直对齐怎么办?
|
||||||
|
|
||||||
尝试使用 [Space](/components/space/) 组件来使他们对齐。
|
尝试使用 [Space](/components/space-cn) 组件来使他们对齐。
|
||||||
|
|
||||||
## antd 覆盖了我的全局样式!
|
## antd 覆盖了我的全局样式!
|
||||||
|
|
||||||
@ -116,7 +116,7 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更,
|
|||||||
|
|
||||||
你应该自行部署 iconfont 文件到你的网络上,参考这个[例子](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont)。 [#1070](https://github.com/ant-design/ant-design/issues/1070)
|
你应该自行部署 iconfont 文件到你的网络上,参考这个[例子](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont)。 [#1070](https://github.com/ant-design/ant-design/issues/1070)
|
||||||
|
|
||||||
在 `3.9.x` 版本后,[我们会使用 svg 图标](/components/icon#svg-icons),你就不用担心本地部署 iconfont 的问题了!
|
在 `3.9.x` 版本后,[我们会使用 svg 图标](/components/icon-cn#svg-icons),你就不用担心本地部署 iconfont 的问题了!
|
||||||
|
|
||||||
## 如何拓展 antd 的组件?
|
## 如何拓展 antd 的组件?
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ type DataSource = TableProps['dataSource'];
|
|||||||
|
|
||||||
## 我的组件默认语言是英文的?如何切回中文的。
|
## 我的组件默认语言是英文的?如何切回中文的。
|
||||||
|
|
||||||
请尝试使用 [ConfigProvider](/components/config-provider/#components-config-provider-demo-locale) 组件来包裹你的应用。
|
请尝试使用 [ConfigProvider](/components/config-provider-cn#components-config-provider-demo-locale) 组件来包裹你的应用。
|
||||||
|
|
||||||
如果日期组件的国际化仍未生效,请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。
|
如果日期组件的国际化仍未生效,请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。
|
||||||
|
|
||||||
@ -161,7 +161,7 @@ npm ls dayjs
|
|||||||
|
|
||||||
## 开启了 Content Security Policy (CSP) 如何处理动态样式?
|
## 开启了 Content Security Policy (CSP) 如何处理动态样式?
|
||||||
|
|
||||||
你可以通过 [ConfigProvider](/components/config-provider/#Content-Security-Policy) 来配置 `nonce` 属性。
|
你可以通过 [ConfigProvider](/components/config-provider-cn#Content-Security-Policy) 来配置 `nonce` 属性。
|
||||||
|
|
||||||
## 当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?
|
## 当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?
|
||||||
|
|
||||||
@ -184,7 +184,7 @@ npm ls dayjs
|
|||||||
|
|
||||||
message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式,是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上,无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式:
|
message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式,是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上,无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式:
|
||||||
|
|
||||||
1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
|
1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
|
||||||
|
|
||||||
2. 使用 `ConfigProvider.config` 方法全局设置 `prefixCls`。
|
2. 使用 `ConfigProvider.config` 方法全局设置 `prefixCls`。
|
||||||
|
|
||||||
|
@ -44,7 +44,7 @@ dayjs.locale('zh-cn');
|
|||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [date, setDate] = useState(null);
|
const [date, setDate] = useState(null);
|
||||||
const handleChange = value => {
|
const handleChange = (value) => {
|
||||||
message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
|
message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
|
||||||
setDate(value);
|
setDate(value);
|
||||||
};
|
};
|
||||||
@ -65,7 +65,7 @@ render(<App />, document.getElementById('root'));
|
|||||||
|
|
||||||
### 3. 探索更多组件用法
|
### 3. 探索更多组件用法
|
||||||
|
|
||||||
你可以在组件页面的左侧菜单查看组件列表,比如 [Alert](/components/alert) 组件,组件文档中提供了各类演示,最下方有组件 API 文档可以查阅。在代码演示部分找到第一个例子,点击右下角的图标展开代码。
|
你可以在组件页面的左侧菜单查看组件列表,比如 [Alert](/components/alert-cn) 组件,组件文档中提供了各类演示,最下方有组件 API 文档可以查阅。在代码演示部分找到第一个例子,点击右下角的图标展开代码。
|
||||||
|
|
||||||
然后依照演示代码的写法,在之前的 codesandbox 里修改 `index.js`,首先在 `import` 内引入 Alert 组件:
|
然后依照演示代码的写法,在之前的 codesandbox 里修改 `index.js`,首先在 `import` 内引入 Alert 组件:
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ title: 国际化
|
|||||||
|
|
||||||
## ConfigProvider
|
## ConfigProvider
|
||||||
|
|
||||||
antd 提供了一个 React 组件 [ConfigProvider](/components/config-provider) 用于全局配置国际化文案。
|
antd 提供了一个 React 组件 [ConfigProvider](/components/config-provider-cn) 用于全局配置国际化文案。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import zhCN from 'antd/locale/zh_CN';
|
import zhCN from 'antd/locale/zh_CN';
|
||||||
@ -94,7 +94,7 @@ return (
|
|||||||
| 繁体中文(中国香港) | zh_HK |
|
| 繁体中文(中国香港) | zh_HK |
|
||||||
| 繁体中文(中国台湾) | zh_TW |
|
| 繁体中文(中国台湾) | zh_TW |
|
||||||
|
|
||||||
具体的使用方法请参考 [ConfigProvider 文档](/components/config-provider)。
|
具体的使用方法请参考 [ConfigProvider 文档](/components/config-provider-cn)。
|
||||||
|
|
||||||
## 增加语言包
|
## 增加语言包
|
||||||
|
|
||||||
|
@ -102,8 +102,8 @@ export default App;
|
|||||||
|
|
||||||
## 链接
|
## 链接
|
||||||
|
|
||||||
- [首页](/index)
|
- [首页](/index-cn)
|
||||||
- [组件库](/components/overview)
|
- [组件库](/components/overview-cn)
|
||||||
- [国内镜像](https://github.com/ant-design/ant-design/issues/25661)
|
- [国内镜像](https://github.com/ant-design/ant-design/issues/25661)
|
||||||
- [Ant Design Pro](https://pro.ant.design/)
|
- [Ant Design Pro](https://pro.ant.design/)
|
||||||
- [Ant Design Charts](https://charts.ant.design)
|
- [Ant Design Charts](https://charts.ant.design)
|
||||||
|
@ -22,7 +22,7 @@ title: 数据录入
|
|||||||
|
|
||||||
输入较少的字符总数,使用单行的输入形式。
|
输入较少的字符总数,使用单行的输入形式。
|
||||||
|
|
||||||
> 注:可以对一些文本(如数字和网址)运用特别的样式。详见 [输入框(Input)](/components/input/)。
|
> 注:可以对一些文本(如数字和网址)运用特别的样式。详见 [输入框(Input)](/components/input-cn)。
|
||||||
|
|
||||||
### 文本域(Textarea)
|
### 文本域(Textarea)
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ title: 图标
|
|||||||
|
|
||||||
Ant Design 在"确定"和"自然"的设计价值观影响之下,对全套的基础系统图标进行了改造,现在大家可以在我们网站上直接查看并使用新版的图标,同时在这里将我们的系统性思路分享给大家,抛砖引玉,期待有更多的设计师参与到这个寂寞的微观世界中来,一起把图形设计这件事做好。
|
Ant Design 在"确定"和"自然"的设计价值观影响之下,对全套的基础系统图标进行了改造,现在大家可以在我们网站上直接查看并使用新版的图标,同时在这里将我们的系统性思路分享给大家,抛砖引玉,期待有更多的设计师参与到这个寂寞的微观世界中来,一起把图形设计这件事做好。
|
||||||
|
|
||||||
[查看图标库](/components/icon/)
|
[查看图标库](/components/icon-cn)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ skip: true
|
|||||||
|
|
||||||
垂直导航较横向的导航更灵活,易于向下扩展, 且允许的标签长度较长。类目数量不限,可配合滚动条使用,适合信息层级多、操作切换频率高的管理性质的应用。
|
垂直导航较横向的导航更灵活,易于向下扩展, 且允许的标签长度较长。类目数量不限,可配合滚动条使用,适合信息层级多、操作切换频率高的管理性质的应用。
|
||||||
|
|
||||||
- 更多常用导航布局可以参考 [Layout 组件](/components/layout/)。
|
- 更多常用导航布局可以参考 [Layout 组件](/components/layout-cn)。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -32,5 +32,5 @@ title: 概览
|
|||||||
我们与工程师合作,将设计模式转化为可重用的代码,最大限度地提高您的生产力和沟通效率。
|
我们与工程师合作,将设计模式转化为可重用的代码,最大限度地提高您的生产力和沟通效率。
|
||||||
|
|
||||||
- [Ant Design Pro](https://pro.ant.design/):具有 20 多个模板和 10 多个业务组件的开箱即用解决方案
|
- [Ant Design Pro](https://pro.ant.design/):具有 20 多个模板和 10 多个业务组件的开箱即用解决方案
|
||||||
- [React 官方实现](/components/overview/):Ant Design 的 React UI 库拥有 60 多个基础组件。
|
- [React 官方实现](/components/overview-cn):Ant Design 的 React UI 库拥有 60 多个基础组件。
|
||||||
- [Axure 设计库](http://library.ant.design/):代码中包含 Axure 资源包,使您的原型看起来像一个视觉草稿,包括模板、组件等。
|
- [Axure 设计库](http://library.ant.design/):代码中包含 Axure 资源包,使您的原型看起来像一个视觉草稿,包括模板、组件等。
|
||||||
|
@ -220,8 +220,8 @@ Ant Design 标准注册模板
|
|||||||
|
|
||||||
### 会用到哪些模块或组件
|
### 会用到哪些模块或组件
|
||||||
|
|
||||||
- [表单](/components/form/#header)
|
- [表单](/components/form-cn#header)
|
||||||
- [步骤条](/components/steps/#header)
|
- [步骤条](/components/steps-cn#header)
|
||||||
|
|
||||||
### 外部参考文章
|
### 外部参考文章
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user