mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Merge pull request #25320 from ant-design/master

Browse Source 
chore: Feature merge master
This commit is contained in:
二货机器人 2020-06-30 22:39:49 +08:00 committed by GitHub
commit 831349788e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 996 additions and 1038 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
CHANGELOG.en-US.md
View File

@ -15,6 +15,72 @@ timeline: true
---
## 4.4.0
`2020-06-29`
- 🔥 Optimize RangePicker interaction that any picker selection will popup another picker panel. [#25135](https://github.com/ant-design/ant-design/pull/25135)
- 🔥 Add Skeleton.Image. [#24805](https://github.com/ant-design/ant-design/pull/24805) [@fireairforce](https://github.com/fireairforce)
- Form
- 🆕 Form.Item support `preserve` to disable value preserve. [#25186](https://github.com/ant-design/ant-design/pull/25186)
- 🆕 Form.Item add `hidden` prop. [#25108](https://github.com/ant-design/ant-design/pull/25108)
- 🆕 Form instance support `getFieldInstance`. [#24711](https://github.com/ant-design/ant-design/pull/24711)
- Table
- 🆕 Table `onChange` add `action` in extra argument. [#24697](https://github.com/ant-design/ant-design/pull/24697)
- 🆕 Table support `rowSelection.dirty` to enable cache `key` with ajax. [#24718](https://github.com/ant-design/ant-design/pull/24718)
- 🐞 Table supports `rowSelection.checkStrictly`. [#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 Fix Table `onSelectAll`'s `changeRows` parameter is incorrect. [#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 Fix Table expand buttons of leaf rows in tree data can still be clicked. [#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 Fix Table expand icon still interative when hidden. [#25170](https://github.com/ant-design/ant-design/pull/25170)
- TimePicker
- 🐞 Fix TimePicker display 12 AM as 0 AM. [#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 Fix TimePicker not using 0 ~ 23 to disable hours. [#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 Fix TimePicker AM | PM are not related with hour disabled status. [#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 Fix TimePicker "Now" button's behavior doesn't conform hour, minute, second step. [#25174](https://github.com/ant-design/ant-design/pull/25174)
- Cascader
- 🆕 Cascader add `expandIcon` to customize the current item expand icon. [#24865](https://github.com/ant-design/ant-design/pull/24865)
- 🆕 Cascader support `dropdownRender` prop for customizing menu. [#24812](https://github.com/ant-design/ant-design/pull/24812)
- Menu
- 🆕 Menu support `triggerSubMenuAction` (hover or click). [#25127](https://github.com/ant-design/ant-design/pull/25127) [@hydRAnger](https://github.com/hydRAnger)
- 🐞 Fix Menu.SubMenu background color in dark theme. [#25205](https://github.com/ant-design/ant-design/pull/25205)
- Tabs
- 🆕 Pagination support `onChange` called when `pageSize` change. [#24964](https://github.com/ant-design/ant-design/pull/24964) [@fireairforce](https://github.com/fireairforce)
- 🆕 Tabs support `addIcon` to customize add icon node. [#25006](https://github.com/ant-design/ant-design/pull/25006)
- 🐞 Fix Tabs can not close in IE11. [#25200](https://github.com/ant-design/ant-design/pull/25200)
- Pagination
- 🐞 Improve Pagination accessibility by fixing a W3C error. [#25119](https://github.com/ant-design/ant-design/pull/25119)
- DatePicker
- 🆕 Fix month and quarter picker's toggle button size of DatePicker component. [#25035](https://github.com/ant-design/ant-design/pull/25035) [@fireairforce](https://github.com/fireairforce)
- 🆕 DatePicker support `showNow`. TimePicker support `showNow`. [#25032](https://github.com/ant-design/ant-design/pull/25032)
- Drawer
- 🆕 Dropdown component support `arrow` prop. [#23869](https://github.com/ant-design/ant-design/pull/23869) [@wendellhu95](https://github.com/wendellhu95)
- 🐞 Fix Drawer `getContainer={false}` cause scrollbar missing in some situation. [#25273](https://github.com/ant-design/ant-design/pull/25273)
- 🆕 Fix Rate render unexpectedly when `value` is `1.6` or `2.6`. [#24993](https://github.com/ant-design/ant-design/pull/24993)
- 🆕 Menution support `autoSize` prop. [#24961](https://github.com/ant-design/ant-design/pull/24961) [@Kermit-Xuan](https://github.com/Kermit-Xuan)
- 🆕 Remove the 140px width limit on vertical dot Steps.Step. [#24907](https://github.com/ant-design/ant-design/pull/24907)
- 🆕 Move Result children to end of component. [#24945](https://github.com/ant-design/ant-design/pull/24945)
- 🆕 Add Rate `character` support `(RateProps)=> ReactNode` customization. [#24903](https://github.com/ant-design/ant-design/pull/24903)
- 🆕 Add `optionType` api to set Radio type in Radio.Group when use `options`. [#24809](https://github.com/ant-design/ant-design/pull/24809)
- 🆕 Add `closeIcon` to customize Tag close icon. [#24885](https://github.com/ant-design/ant-design/pull/24885)
- 🆕 Drawer support `closeIcon`. [#24842](https://github.com/ant-design/ant-design/pull/#24842)
- 🆕 Add `ghost` prop for collapse to set a transparent background. [#24734](https://github.com/ant-design/ant-design/pull/24734)
- 🆕 Progress support customise filled Progress color. [#24655](https://github.com/ant-design/ant-design/pull/24655) [@fireairforce](https://github.com/fireairforce)
- 🆕 Typography copyable support `icon` and `tooltips` for customization. [#25274](https://github.com/ant-design/ant-design/pull/25274) [@israelKusayev](https://github.com/israelKusayev)
- 🆕 Add `showLeafIcon` for Tree Component when set `showLine` prop. [#25271](https://github.com/ant-design/ant-design/pull/25271)
- 🆕 Add BackTop `duration` used to set the time required to return to the top. [#25254](https://github.com/ant-design/ant-design/pull/25254)
- 🐞 Fix Select suffix icon can not focus input. [#25212](https://github.com/ant-design/ant-design/pull/25212)
- 🐞 Fix the issue that Notification modification `width` is not aligned with the edge of the screen. [#25168](https://github.com/ant-design/ant-design/pull/25168)
- 💄 Make Switch animation more smooth and quicker. [#25160](https://github.com/ant-design/ant-design/pull/25160)
- 🛠 Modal add more less parameters. [#24773](https://github.com/ant-design/ant-design/pull/24773) [@hicrystal](https://github.com/hicrystal)
- 🐞 Fix PageHeader tabs unexpected border style. [#25159](https://github.com/ant-design/ant-design/pull/25159)
- 🐞 Fix InputNumber `max` prop has no default value. [#25243](https://github.com/ant-design/ant-design/pull/25243)
- 🌐 Add missing translation keys to table locale in German, Italian and Czech. [#25233](https://github.com/ant-design/ant-design/pull/25233) [@karelsoupaEMZ](https://github.com/karelsoupaEMZ)
- 🇯🇵 Add ja_JP globalization for Form. [#25244](https://github.com/ant-design/ant-design/pull/25244) [@kentaro84207](https://github.com/kentaro84207)
- RTL
- 🐞 Fix Table nested style in RTL. [#25156](https://github.com/ant-design/ant-design/pull/25156)
- 🐞 Fix Table title style in RTL when use filter and sorter. [#25152](https://github.com/ant-design/ant-design/pull/25152)
- 🐞 Fix InputNumber input inner in RTL. [#25146](https://github.com/ant-design/ant-design/pull/25146)
## 4.3.5
`2020-06-21`

71
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,73 @@ timeline: true
---
## 4.4.0
`2020-06-29`
- 🔥 优化 RangePicker 交互，现在任意面板选择完毕后，另一个面板会自动弹出。[#25135](https://github.com/ant-design/ant-design/pull/25135)
- 🔥 新增 Skeleton.Image 组件。[#24805](https://github.com/ant-design/ant-design/pull/24805) [@fireairforce](https://github.com/fireairforce)
- Form
- 🆕 Form 实例支持 `getFieldInstance`。[#24711](https://github.com/ant-design/ant-design/pull/24711)
- 🆕 Form.Item 新增 `hidden` 属性用于隐藏表单项。[#25108](https://github.com/ant-design/ant-design/pull/25108)
- 🆕 Form.Item 添加 `preserve` 属性以支持字段值清理。[#25186](https://github.com/ant-design/ant-design/pull/25186)
- Table
- 🆕 Table 添加 `rowSelection.dirty` 以支持异步数据下保留 `key`。[#24718](https://github.com/ant-design/ant-design/pull/24718)
- 🆕 Table `onChange` 添加 `action` 参数用于标示操作类型。[#24697](https://github.com/ant-design/ant-design/pull/24697)
- 🐞 Table 支持 `rowSelection.checkStrictly` 来完全受控节点。[#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 修复 Table `onSelectAll` 的 `changeRows` 参数不正确的问题。[#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 修复 Table 树形数据叶节点行的展开按钮仍能被点击的问题。[#24931](https://github.com/ant-design/ant-design/pull/24931)
- 🐞 修复 Table 展开图标隐藏时仍然有鼠标手型的问题。[#25170](https://github.com/ant-design/ant-design/pull/25170)
- 🐞 修复 Table 展开图标隐藏时仍然有鼠标手型的问题。[#25170](https://github.com/ant-design/ant-design/pull/25170)
- TimePicker
- 🐞 修复 TimePicker 面板 12 AM 显示为 0 AM 的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 修复 TimePicker 在 use12Hours 时没有用 0 ～ 23 来禁用小时的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 修复 TimePicker 没有根据小时禁用情况禁用 AM PM 的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)
- 🐞 修复 TimePicker `Now` 按钮没有和 `hour|minute|second|step` 保持一致的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)
- Cascader
- 🆕 Cascader 新增 `expandIcon` 来自定义次级菜单展开图标。[#24865](https://github.com/ant-design/ant-design/pull/24865)
- 🆕 Cascader 增加 `dropdownRender` 属性用于扩展菜单。[#24812](https://github.com/ant-design/ant-design/pull/24812)
- Menu
- 🆕 Menu 增加 `triggerSubMenuAction` 属性以支持配置菜单弹出的交互方式。[#25127](https://github.com/ant-design/ant-design/pull/25127) [@hydRAnger](https://github.com/hydRAnger)
- 🐞 修复 Menu `theme="dark"` 时子菜单背景色为白色的问题。[#25205](https://github.com/ant-design/ant-design/pull/25205)
- Tabs
- 🆕 Tabs 支持 `addIcon` 以自定义添加图标。[#25006](https://github.com/ant-design/ant-design/pull/25006)
- 🐞 修复 Tabs 在 IE11 下无法关闭的问题。[#25200](https://github.com/ant-design/ant-design/pull/25200)
- Pagination
- 🆕 Pagination 支持当 `pageSize` 改变时，`onChange` 的调用。[#24964](https://github.com/ant-design/ant-design/pull/24964) [@fireairforce](https://github.com/fireairforce)
- 🐞 优化 Pagination 可访问性，修复一个 W3C 属性错误。[#25119](https://github.com/ant-design/ant-design/pull/25119)
- DatePicker
- 🐞 修复 DatePicker 组件的月份和季度前后选择器 icon 的大小。[#25035](https://github.com/ant-design/ant-design/pull/25035) [@fireairforce](https://github.com/fireairforce)
- 🆕 TimePicker 支持 `showNow` 属性。[#25032](https://github.com/ant-design/ant-design/pull/25032)
- Drawer
- 🆕 Drawer 支持 `closeIcon` 属性。[#24842](https://github.com/ant-design/ant-design/pull/#24842)
- 🐞 修复 Drawer 使用 `getContainer={false}` 时可能导致页面滚动条消失的问题。[#25273](https://github.com/ant-design/ant-design/pull/25273)
- 🆕 Rate `character` 支持通过 `(RateProps) => ReactNode` 自定义。[#24903](https://github.com/ant-design/ant-design/pull/24903)
- 💄 移除了垂直点状 Steps.Step 的 140px 宽度限制。[#24907](https://github.com/ant-design/ant-design/pull/24907)
- 🆕 Menution 新增 `autoSize` 属性以支持高度自适应。[#24961](https://github.com/ant-design/ant-design/pull/24961) [@Kermit-Xuan](https://github.com/Kermit-Xuan)
- 🆕 调整 Result `children` 显示位置到组件尾部。[#24945](https://github.com/ant-design/ant-design/pull/24945)
- 🆕 Radio.Group 新增 `optionType` 来设置 `options` 的 Radio 类型。[#24809](https://github.com/ant-design/ant-design/pull/24809)
- 🆕 Tag 新增 `closeIcon` 用以自定义关闭按钮。[#24885](https://github.com/ant-design/ant-design/pull/24885)
- 🆕 Dropdown 组件支持下拉框箭头。[#23869](https://github.com/ant-design/ant-design/pull/23869) [@wendellhu95](https://github.com/wendellhu95)
- 🆕 Collapse 增加了 `ghost` 属性来设置透明背景。[#24734](https://github.com/ant-design/ant-design/pull/24734)
- 🆕 Progress 组件支持自定义已完成进度条颜色。[#24655](https://github.com/ant-design/ant-design/pull/24655) [@fireairforce](https://github.com/fireairforce)
- 🆕 Typography copyable 属性支持 `icon` 和 `tooltips` 用于自定义图标和提示文案。[#25274](https://github.com/ant-design/ant-design/pull/25274) [@israelKusayev](https://github.com/israelKusayev)
- 🆕 Tree `showLine` 属性支持配置隐藏叶节点图标。[#25271](https://github.com/ant-design/ant-design/pull/25271)
- 🆕 BackTop 支持 `duration` 来设置回到顶部所需时间。[#25254](https://github.com/ant-design/ant-design/pull/25254)
- 🐞 修复 Select 点击下拉箭头时输入框不能获得焦点的问题。[#25212](https://github.com/ant-design/ant-design/pull/25212)
- 🐞 修复 Rate 半选时 `value` 被四舍五入的问题。[#24993](https://github.com/ant-design/ant-design/pull/24993)
- 🐞 修复 Notification 修改 `width` 时没有相对屏幕边缘对齐的问题。[#25168](https://github.com/ant-design/ant-design/pull/25168)
- 🐞 修正 InputNumber `max` 属性没有默认值的问题。[#25243](https://github.com/ant-design/ant-design/pull/25243)
- 🛠 给 Modal 组件增加了更多的 less 变量。[#24773](https://github.com/ant-design/ant-design/pull/24773) [@hicrystal](https://github.com/hicrystal)
- 💄 更快的 Switch 动画切换效果。[#25160](https://github.com/ant-design/ant-design/pull/25160)
- 🐞 修复 PageHeader 内 Tabs 多余的边框样式。[#25159](https://github.com/ant-design/ant-design/pull/25159)
- 🌐 增加了德语，意大利语和捷克语缺失的翻译。[#25233](https://github.com/ant-design/ant-design/pull/25233) [@karelsoupaEMZ](https://github.com/karelsoupaEMZ)
- 🇯🇵 增加了 Form 的日语国际化。[#25244](https://github.com/ant-design/ant-design/pull/25244) [@kentaro84207](https://github.com/kentaro84207)
- RTL
- 🐞 修复 Table RTL 模式下的嵌套表格样式。[#25156](https://github.com/ant-design/ant-design/pull/25156)
- 🐞 修复 Table RTL 模式下，筛选和排序的头部样式。[#25152](https://github.com/ant-design/ant-design/pull/25152)
- 🐞 修复 InputNumber RTL 模式下输入框内显示。[#25146](https://github.com/ant-design/ant-design/pull/25146)
## 4.3.5
`2020-06-21`
@ -453,7 +520,7 @@ timeline: true
- 🐞 修复紧凑模式和暗黑模式无法同时开启的问题。[#22934](https://github.com/ant-design/ant-design/pull/22934) [@AshoneA](https://github.com/AshoneA)
- 🐞 修复 Notification 非法的 `padding-top` 值。[#22941](https://github.com/ant-design/ant-design/pull/22941)
- Button
- 🐞 修复带图标 Button 的 `loading` 动画效果。 [#23102](https://github.com/ant-design/ant-design/pull/23102)
- 🐞 修复带图标 Button 的 `loading` 动画效果。[#23102](https://github.com/ant-design/ant-design/pull/23102)
- ⚠️ 优化 Button 非法 `type` 的控制台提示。[#22933](https://github.com/ant-design/ant-design/pull/22933)
- 🐞 修复 Statistic 在值为 `-` 时会展示成 `-0` 的问题。[@22950](https://github.com/ant-design/ant-design/pull/22950)
- 🐞 修复 Modal.confirm `onOk` 可以被触发多次的问题。[#22963](https://github.com/ant-design/ant-design/pull/22963)
@ -478,7 +545,7 @@ timeline: true
- 🐞 修复 Modal.confirm 的 `okButtonProps` 定义。[#21165](https://github.com/ant-design/ant-design/pull/21165) [@nicu-chiciuc](https://github.com/nicu-chiciuc)
- 🌟 暴露 Form `Store` 接口。[#22755](https://github.com/ant-design/ant-design/pull/22755) [@shaodahong](https://github.com/shaodahong)
- 🌟 优化 Input、Tag、Badge 组件的枚举类型属性定义。[#23026](https://github.com/ant-design/ant-design/pull/23026) [#22999](https://github.com/ant-design/ant-design/pull/22999) [#23006](https://github.com/ant-design/ant-design/pull/23006) [@fjc0k](https://github.com/fjc0k)
- 🐞 修复 Pagination `position` 定义。 [#23048](https://github.com/ant-design/ant-design/pull/23048) [@Arttse](https://github.com/Arttse)
- 🐞 修复 Pagination `position` 定义。[#23048](https://github.com/ant-design/ant-design/pull/23048) [@Arttse](https://github.com/Arttse)
## 4.1.1

10
components/_util/ref.ts
View File

@ -15,3 +15,13 @@ export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
});
};
}
export function usePrevious<T = undefined>(value: T): T | undefined {
const ref = React.useRef<T>();
React.useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}

30
components/auto-complete/index.en-US.md
View File

@ -16,33 +16,33 @@ When there is a need for autocomplete functionality.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
| autoFocus | get focus when component mounted | boolean | false | |
| backfill | backfill selected item the input when using keyboard | boolean | false | |
| children (for customize input element) | customize input element | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` | |
| children (for dataSource) | Data source to auto complete | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - | |
| allowClear | Show clear button, effective in multiple mode only | boolean | false | |
| autoFocus | If get focus when component mounted | boolean | false | |
| backfill | If backfill selected item the input when using keyboard | boolean | false | |
| children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> | |
| children (for dataSource) | Data source to auto complete | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultValue | Initial selected option. | string | - | |
| defaultValue | Initial selected option | string | - | |
| disabled | Whether disabled select | boolean | false | |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
| placeholder | placeholder of input | string | - | |
| value | selected option | string | - | |
| onBlur | Called when leaving the component. | function() | - | |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
| placeholder | The placeholder of input | string | - | |
| value | Selected option | string | - | |
| onBlur | Called when leaving the component | function() | - | |
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | |
| onFocus | Called when entering the component | function() | - | |
| onSearch | Called when searching items. | function(value) | - | |
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - | |
| onSearch | Called when searching items | function(value) | - | |
| onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' | |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
## Methods
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
| blur() | Remove focus | |
| focus() | Get focus | |
## FAQ

10
components/auto-complete/index.zh-CN.md
View File

@ -20,13 +20,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` | |
| children (自动完成的数据源) | 自动完成的数据源 | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> | |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - | |
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string | - | |
| disabled | 是否禁用 | boolean | false | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false` | boolean \| function(inputValue, option) | true | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| placeholder | 输入框提示 | string | - | |
| value | 指定当前选中的条目 | string | - | |
| onBlur | 失去焦点时的回调 | function() | - | |

8
components/breadcrumb/index.en-US.md
View File

@ -22,7 +22,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - | |
| params | Routing parameters | object | - | |
| routes | The routing stack information of router | [routes\[\]](#routes) | - | |
| separator | Custom separator | string\|ReactNode | '/' | |
| separator | Custom separator | string \| ReactNode | `/` | |
### Breadcrumb.Item
@ -35,9 +35,9 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
### Breadcrumb.Separator
| Property | Description | Type | Default | Version |
| -------- | ---------------- | ----------------- | ------- | ------- |
| children | Custom separator | string\|ReactNode | '/' | |
| Property | Description | Type | Default | Version |
| -------- | ---------------- | ------------------- | ------- | ------- |
| children | Custom separator | string \| ReactNode | `/` | |
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.

8
components/breadcrumb/index.zh-CN.md
View File

@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
| params | 路由的参数 | object | - | |
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | |
| separator | 分隔符自定义 | string\|ReactNode | '/' | |
| separator | 分隔符自定义 | string \| ReactNode | `/` | |
### Breadcrumb.Item
@ -36,9 +36,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
### Breadcrumb.Separator
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | -------------- | ----------------- | ------ | ---- |
| children | 要显示的分隔符 | string\|ReactNode | '/' | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | -------------- | ------------------- | ------ | ---- |
| children | 要显示的分隔符 | string \| ReactNode | `/` | |
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。

26
components/button/index.en-US.md
View File

@ -32,19 +32,19 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | disabled state of button | boolean | false | |
| ghost | make background transparent and invert text and border colors | boolean | false | |
| href | redirect url of link button | string | - | |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | set the icon component of button | ReactNode | - | |
| loading | set the loading status of button | boolean \| { delay: number } | false | |
| shape | can be set to `circle`, `round` or omitted | string | - | |
| size | set the size of button | `large` \| `middle` \| `small` | | |
| target | same as target attribute of a, works when href is specified | string | - | |
| type | can be set to `primary` `ghost` `dashed` `danger` `link` `text` | string | - | |
| onClick | set the handler to handle `click` event | (event) => void | - | |
| block | option to fit button width to its parent width | boolean | false | |
| danger | set the danger status of button | boolean | false | |
| disabled | Disabled state of button | boolean | false | |
| ghost | Make background transparent and invert text and border colors | boolean | false | |
| href | Redirect url of link button | string | - | |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | Set the icon component of button | ReactNode | - | |
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
| shape | Can be set to `circle`, `round` or omitted | string | - | |
| size | Set the size of button | `large` \| `middle` \| `small` | - | |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Can be set to `primary` `ghost` `dashed` `danger` `link` `text` | string | - | |
| onClick | Set the handler to handle `click` event | (event) => void | - | |
| block | Option to fit button width to its parent width | boolean | false | |
| danger | Set the danger status of button | boolean | false | |
It accepts all props which native buttons support.

64
components/cascader/index.en-US.md
View File

@ -21,43 +21,43 @@ Cascade selection box.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | whether allow clear | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| bordered | whether has border style | boolean | true | |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false | |
| className | additional css class | string | - | |
| defaultValue | initial selected value | string\[] \| number\[] | \[] | |
| disabled | whether disabled select | boolean | false | |
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | `click` | |
| expandIcon | customize the current item expand icon | ReactNode | - | 4.4.0 |
| fieldNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - | |
| notFoundContent | Specify content to show when no result matches. | string | `Not Found` | |
| options | data options of cascade | [Option](#Option)[] | - | |
| placeholder | input placeholder | string | 'Please select' | |
| popupClassName | additional className of popup overlay | string | - | |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |
| popupVisible | set visible of cascader popup | boolean | - | |
| showSearch | Whether show search input in single mode. | boolean\|object | false | |
| size | input size | `large` \| `middle` \| `small` | | |
| style | additional style | CSSProperties | - | |
| allowClear | Whether allow clear | boolean | true | |
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false | |
| className | The additional css class | string | - | |
| defaultValue | Initial selected value | string\[] \| number\[] | \[] | |
| disabled | Whether disabled select | boolean | false | |
| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | |
| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
| fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
| options | The data options of cascade | [Option](#Option)[] | - | |
| placeholder | The input placeholder | string | `Please select` | |
| popupClassName | The additional className of popup overlay | string | - | |
| popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |
| popupVisible | Set visible of cascader popup | boolean | - | |
| showSearch | Whether show search input in single mode | boolean \| object | false | |
| size | The input size | `large` \| `middle` \| `small` | - | |
| style | The additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| value | selected value | string\[] \| number\[] | - | |
| dropdownRender | Customize dropdown content | `(menus: ReactNode) => ReactNode` | - | 4.4.0 |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | |
| value | The selected value | string\[] \| number\[] | - | |
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | |
Fields in `showSearch`:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | `function(inputValue, path): boolean` | | |
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | |
| limit | Set the count of filtered items | number \| false | 50 | |
| matchInputWidth | Whether the width of result list equals to input's | boolean | | |
| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | | |
| matchInputWidth | Whether the width of result list equals to input's | boolean | true | |
| render | Used to render filtered options | function(inputValue, path): ReactNode | - | |
| sort | Used to sort filtered options | function(a, b, inputValue) | - | |
### Option
@ -74,5 +74,5 @@ interface Option {
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
| blur() | Remove focus | |
| focus() | Get focus | |

26
components/cascader/index.zh-CN.md
View File

@ -29,36 +29,36 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| className | 自定义类名 | string | - | |
| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | |
| disabled | 禁用 | boolean | false | |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
| displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | |
| expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
| fieldNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - | |
| fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | |
| options | 可选项数据源 | [Option](#Option)[] | - | |
| placeholder | 输入框占位文本 | string | '请选择' | |
| placeholder | 输入框占位文本 | string | `请选择` | |
| popupClassName | 自定义浮层类名 | string | - | |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` | |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |
| popupVisible | 控制浮层显隐 | boolean | - | |
| showSearch | 在选择框中显示搜索框 | boolean | false | |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | |
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| value | 指定选中项 | string\[] \| number\[] | - | |
| dropdownRender | 自定义下拉框内容 | `(menus: ReactNode) => ReactNode` | - | 4.4.0 |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | |
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | |
`showSearch` 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | | |
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false | function(inputValue, path): boolean | - | |
| limit | 搜索结果展示数量 | number \| false | 50 | |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | | |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | true | |
| render | 用于渲染 filter 后的选项 | function(inputValue, path): ReactNode | - | |
| sort | 用于排序 filter 后的选项 | function(a, b, inputValue) | - | |
### Option

22
components/checkbox/index.en-US.md
View File

@ -20,23 +20,23 @@ Checkbox component.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | |
| checked | Specifies whether the checkbox is selected. | boolean | false | |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false | |
| disabled | Disable checkbox | boolean | false | |
| indeterminate | indeterminate checked state of checkbox | boolean | false | |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - | |
| autoFocus | If get focus when component mounted | boolean | false | |
| checked | Specifies whether the checkbox is selected | boolean | false | |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected | boolean | false | |
| disabled | If disable checkbox | boolean | false | |
| indeterminate | The indeterminate checked state of checkbox | boolean | false | |
| onChange | The callback function that is triggered when the state changes | function(e:Event) | - | |
#### Checkbox Group
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | Default selected value | string\[] | \[] | |
| disabled | Disable all checkboxes | boolean | false | |
| disabled | If disable all checkboxes | boolean | false | |
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
| options | Specifies options | string\[] | \[] | |
| value | Used for setting the currently selected value. | string\[] | \[] | |
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - | |
| value | Used for setting the currently selected value | string\[] | \[] | |
| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |
### Methods
@ -44,5 +44,5 @@ Checkbox component.
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
| blur() | Remove focus | |
| focus() | Get focus | |

4
components/checkbox/index.zh-CN.md
View File

@ -26,7 +26,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
| defaultChecked | 初始是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| onChange | 变化时回调函数 | Function(e:Event) | - | |
| onChange | 变化时回调函数 | function(e:Event) | - | |
#### Checkbox Group
@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | |
| options | 指定可选项 | string\[] \| Option\[] | \[] | |
| value | 指定选中的选项 | string\[] | \[] | |
| onChange | 变化时回调函数 | Function(checkedValue) | - | |
| onChange | 变化时回调函数 | function(checkedValue) | - | |
##### Option

76
components/config-provider/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfigProvider render empty 1`] = `
<div
class="ant-empty"
>
<div
class="ant-empty-image"
>
<svg
class="ant-empty-img-default"
height="152"
viewBox="0 0 184 152"
width="184"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<g
transform="translate(24 31.67)"
>
<ellipse
class="ant-empty-img-default-ellipse"
cx="67.797"
cy="106.89"
rx="67.797"
ry="12.668"
/>
<path
class="ant-empty-img-default-path-1"
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
/>
<path
class="ant-empty-img-default-path-2"
d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
transform="translate(13.56)"
/>
<path
class="ant-empty-img-default-path-3"
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
/>
<path
class="ant-empty-img-default-path-4"
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
/>
</g>
<path
class="ant-empty-img-default-path-5"
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
/>
<g
class="ant-empty-img-default-g"
transform="translate(149.65 15.383)"
>
<ellipse
cx="20.654"
cy="3.167"
rx="2.849"
ry="2.815"
/>
<path
d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
/>
</g>
</g>
</svg>
</div>
<p
class="ant-empty-description"
>
No Data
</p>
</div>
`;

16
components/config-provider/__tests__/index.test.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import ConfigProvider from '..';
import ConfigProvider, { ConfigContext } from '..';
import Button from '../../button';
import Table from '../../table';
import Input from '../../input';
@ -65,4 +65,18 @@ describe('ConfigProvider', () => {
expect(wrapper.find('input').props().autoComplete).toEqual('off');
});
it('render empty', () => {
const App = () => {
const { renderEmpty } = React.useContext(ConfigContext);
return renderEmpty();
}
const wrapper = mount(
<ConfigProvider>
<App />
</ConfigProvider>,
);
expect(wrapper).toMatchRenderedSnapshot();
});
});

138
components/date-picker/index.en-US.md
View File

@ -48,49 +48,49 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Whether to show clear button | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| className | picker className | string | '' | |
| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | determine whether the DatePicker is disabled | boolean | false | |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - | |
| dropdownClassName | to customize the className of the popup calendar | string | - | |
| getPopupContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| open | open state of picker | boolean | - | |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
| placeholder | placeholder of date input | string \| \[string,string] | - | |
| popupStyle | to customize the style of the popup calendar | CSSProperties | {} | |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
| bordered | whether has border style | boolean | true | |
| autoFocus | If get focus when component mounted | boolean | false | |
| className | The picker className | string | - | |
| dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | Determine whether the DatePicker is disabled | boolean | false | |
| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | |
| dropdownClassName | To customize the className of the popup calendar | string | - | |
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| open | The open state of picker | boolean | - | |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
| size | The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
| bordered | Whether has border style | boolean | true | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| style | to customize the style of the input box | CSSProperties | {} | |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | |
| style | To customize the style of the input box | CSSProperties | {} | |
| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
### Common Methods
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
| blur() | Remove focus | |
| focus() | Get focus | |
### DatePicker
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
| disabledTime | to specify the time that cannot be selected | function(date) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" | |
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
| showToday | whether to show "Today" button | boolean | true | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| onOk | callback when click ok button | function() | - | |
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD` | |
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
| showToday | Whether to show `Today` button | boolean | true | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| onOk | Callback when click ok button | function() | - | |
| onPanelChange | Callback function for panel changing | function(value, mode) | - | |
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
@ -98,12 +98,12 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY" | |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### QuarterPicker
@ -111,55 +111,55 @@ Added in `4.1.0`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### MonthPicker
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### WeekPicker
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
### RangePicker
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: 'start' \| ''end }) => React.ReactNode | - | |
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
| disabled | disable start or end | \[boolean, boolean] | - | |
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
| separator | set separator between inputs | string | `~` | |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
| disabled | If disable start or end | \[boolean, boolean] | - | |
| disabledTime | To specify the time that cannot be selected | function(dates: \[moment, moment], partial: `start` \| `end`) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` | |
| ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| separator | Set separator between inputs | string | `~` | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
| value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
<style>
.code-box-demo .ant-picker {

22
components/date-picker/index.zh-CN.md
View File

@ -51,7 +51,7 @@ import 'moment/locale/zh-cn';
| --- | --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| className | 选择器 className | string | '' | |
| className | 选择器 className | string | - | |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | 禁用 | boolean | false | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
@ -60,7 +60,7 @@ import 'moment/locale/zh-cn';
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| open | 控制弹层是否展开 | boolean | - | |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
@ -85,9 +85,9 @@ import 'moment/locale/zh-cn';
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| disabledTime | 不可选择的时间 | function(date) | - | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | `YYYY-MM-DD` | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
| showToday | 是否展示“今天”按钮 | boolean | true | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
@ -102,7 +102,7 @@ import 'moment/locale/zh-cn';
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY" | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
@ -115,7 +115,7 @@ import 'moment/locale/zh-cn';
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
@ -126,7 +126,7 @@ import 'moment/locale/zh-cn';
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
@ -138,7 +138,7 @@ import 'moment/locale/zh-cn';
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
@ -148,12 +148,12 @@ import 'moment/locale/zh-cn';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: 'start' \| ''end }) => React.ReactNode | - | |
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - | |
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | - | |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `start` \| `end`) | - | |
| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | |
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| separator | 设置分隔符 | string | `~` | |

12
components/divider/index.en-US.md
View File

@ -18,9 +18,9 @@ A divider line separates different content.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | className of container | string | - | |
| dashed | whether line is dashed | boolean | false | |
| orientation | position of title inside divider | `left` \| `right` \| `center` | `center` | |
| style | style object of container | CSSProperties | - | |
| type | direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
| plain | divider text show as plain style | boolean | true | 4.2.0 |
| className | The className of container | string | - | |
| dashed | Whether line is dashed | boolean | false | |
| orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` | |
| style | The style object of container | CSSProperties | - | |
| type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
| plain | Divider text show as plain style | boolean | true | 4.2.0 |

17
components/drawer/style/drawer.less
View File

@ -122,15 +122,12 @@
}
}
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls} {
&-mask {
height: 100%;
opacity: 1;
transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
}
}
&.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
height: 100%;
opacity: 1;
transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
pointer-events: auto;
}
&-title {
@ -232,7 +229,9 @@
opacity: 0;
filter: ~'alpha(opacity=45)';
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
pointer-events: none;
}
&-open {
&-content {
box-shadow: @shadow-2;

18
components/dropdown/index.en-US.md
View File

@ -19,14 +19,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
| --- | --- | --- | --- | --- |
| arrow | Whether the dropdown arrow should be visible | boolean | false | |
| disabled | Whether the dropdown menu is disabled | boolean | - | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010). | Function(triggerNode) | `() => document.body` | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | Class name of the dropdown root element | string | - | |
| overlayStyle | Style of the dropdown root element | object | - | |
| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | String | `bottomLeft` | |
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens. | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` | |
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | Whether the dropdown menu is currently visible | boolean | - | |
| onVisibleChange | Called when the visible state is changed. | Function(visible) | - | |
| onVisibleChange | Called when the visible state is changed | function(visible) | - | |
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
@ -41,11 +41,11 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
| disabled | Whether the dropdown menu is disabled | boolean | - | |
| icon | Icon (appears on the right) | ReactNode | - | |
| overlay | The dropdown menu | [Menu](/components/menu) | - | |
| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |
| size | Size of the button, the same as [Button](/components/button) | string | `default` | |
| trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| type | Type of the button, the same as [Button](/components/button) | string | `default` | |
| visible | Whether the dropdown menu is currently visible | boolean | - | |
| onClick | The same as [Button](/components/button): called when you click the button on the left | Function | - | |
| onVisibleChange | Called when the visible state is changed | Function | - | |
| buttonsRender | custom buttons inside Dropdown.Button | `([buttons: ReactNode[]]) => ReactNode` | - | |
| onClick | The same as [Button](/components/button): called when you click the button on the left | function | - | |
| onVisibleChange | Called when the visible state is changed | function | - | |
| buttonsRender | Custom buttons inside Dropdown.Button | ([buttons: ReactNode[]]) => ReactNode | - | |

18
components/dropdown/index.zh-CN.md
View File

@ -23,14 +23,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
| --- | --- | --- | --- | --- |
| arrow | 下拉框箭头是否显示 | boolean | false | |
| disabled | 菜单是否禁用 | boolean | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | 下拉根元素的类名称 | string | - | |
| overlayStyle | 下拉根元素的样式 | object | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | 菜单是否显示 | boolean | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function(visible) | - | |
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
@ -45,11 +45,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
| disabled | 菜单是否禁用 | boolean | - | |
| icon | 右侧的 icon | ReactNode | - | |
| overlay | 菜单 | [Menu](/components/menu/) | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |
| size | 按钮大小，和 [Button](/components/button/) 一致 | string | `default` | |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| type | 按钮类型，和 [Button](/components/button/) 一致 | string | `default` | |
| visible | 菜单是否显示 | boolean | - | |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - | |
| buttonsRender | 自定义左右两个按钮 | `([buttons: ReactNode[]]) => ReactNode` | - | |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | function | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function | - | |
| buttonsRender | 自定义左右两个按钮 | ([buttons: ReactNode[]]) => ReactNode | - | |

1
components/form/FormItemInput.tsx
View File

@ -108,6 +108,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
{icon}
</div>
<CSSMotion
motionDeadline={500}
visible={visible}
motionName="show-help"
onLeaveEnd={() => {

26
components/form/index.en-US.md
View File

@ -25,8 +25,8 @@ High performance Form component with data scope management. Including data colle
| form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - | |
| hideRequiredMark | Hide required mark for all form items | boolean | false | |
| initialValues | Set value by Form initialization or reset | object | - | |
| labelAlign | text align of label of all items | `left` \| `right` | `right` | |
| labelCol | label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| labelAlign | The text align of label of all items | `left` \| `right` | `right` | |
| labelCol | Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
| name | Form name. Will be the prefix of Field `id` | string | - | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
@ -35,10 +35,10 @@ High performance Form component with data scope management. Including data colle
| validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
| validateTrigger | Config field validate trigger | string \| string[] | `onChange` | 4.3.0 |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | |
| onFinish | Trigger after submitting the form and verifying data successfully | Function(values) | - | |
| onFinishFailed | Trigger after submitting the form and verifying data failed | Function({ values, errorFields, outOfDate }) | - | |
| onFieldsChange | Trigger when field updated | Function(changedFields, allFields) | - | |
| onValuesChange | Trigger when value updated | Function(changedValues, allValues) | - | |
| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | |
| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | |
| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | |
| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | |
### validateMessages
@ -74,16 +74,16 @@ Form field component for data bidirectional binding, validation, layout, and so
| --- | --- | --- | --- | --- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string \| ReactNode | - | |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | |
| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string \| ReactNode | - | |
| htmlFor | Set sub label `htmlFor` | string | - | |
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| label | Label text | string\|ReactNode | - | |
| labelAlign | text align of label | `left` \| `right` | `right` | |
| label | Label text | string \| ReactNode | - | |
| labelAlign | The text align of label | `left` \| `right` | `right` | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | |
@ -93,11 +93,11 @@ Form field component for data bidirectional binding, validation, layout, and so
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| trigger | When to collect the value of children node | string | `onChange` | |
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | |
| validateTrigger | When to validate the value of children node | string \| string[] | `onChange` | |
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| hidden | whether to hide Form.Item (still collect and validate value) | boolean | false | |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |
After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
@ -270,7 +270,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| required | Required field | boolean |
| transform | Transform value to the rule before validation | (value) => any |
| type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/yiminghe/async-validator#type) | string |
| validator | Customize validation rule. Accept Promise as return. [example](#components-form-demo-register)参考 | ([rule](#Rule), value) => Promise |
| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#Rule), value) => Promise |
| whitespace | Failed if only has whitespace | boolean |
| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string[] |

2
components/form/index.zh-CN.md
View File

@ -97,7 +97,7 @@ const validateMessages = {
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | |
| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | |
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

30
components/grid/index.en-US.md
View File

@ -89,26 +89,26 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | vertical alignment | `top` \| `middle` \| `bottom` | `top` | |
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number/object/array | 0 | | |
| justify | horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | |
| gutter | Spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | | |
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
### Col
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| flex | flex layout style | string \| number | - | |
| offset | the number of cells to offset Col from the left | number | 0 | |
| order | raster order | number | 0 | |
| pull | the number of cells that raster is moved to the left | number | 0 | |
| push | the number of cells that raster is moved to the right | number | 0 | |
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |
| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - | |
| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - | |
| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - | |
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - | |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - | |
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - | |
| flex | Flex layout style | string \| number | - | |
| offset | The number of cells to offset Col from the left | number | 0 | |
| order | Raster order | number | 0 | |
| pull | The number of cells that raster is moved to the left | number | 0 | |
| push | The number of cells that raster is moved to the right | number | 0 | |
| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |
| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - | |
| sm | `≥576px`, could be a `span` value or an object containing above props | number \| object | - | |
| md | `≥768px`, could be a `span` value or an object containing above props | number \| object | - | |
| lg | `≥992px`, could be a `span` value or an object containing above props | number \| object | - | |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number \| object | - | |
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number \| object | - | |
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).

14
components/grid/index.zh-CN.md
View File

@ -89,7 +89,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | number/object/array | 0 | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | number \| object \| array | 0 | |
| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | |
### Col
@ -102,12 +102,12 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

12
components/icon/index.en-US.md
View File

@ -25,11 +25,11 @@ ReactDOM.render(<IconDisplay />, mountNode);
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | className of Icon | string | - | |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| className | The className of Icon | string | - | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
| twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | |
| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | |
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
@ -45,10 +45,10 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate degrees (not working in IE9) | number | - | |
| component | The component used for the root node. | ComponentType<CustomIconComponentProps\> | - | |
| component | The component used for the root node | ComponentType<CustomIconComponentProps\> | - | |
### About SVG icons
@ -112,7 +112,7 @@ The following options are available:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0`. | string \| string[] | - | |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string[] | - | |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} | |
The property `scriptUrl` should be set to import the SVG sprite symbols.

34
components/layout/index.en-US.md
View File

@ -76,9 +76,9 @@ The wrapper.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| className | container className | string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | to customize the styles | CSSProperties | - |
| className | Container className | string | - |
| hasSider | Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | To customize the styles | CSSProperties | - |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -88,20 +88,20 @@ The sidebar.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| breakpoint | [breakpoints](/components/grid/#Col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` } | - |
| className | container className | string | - |
| collapsed | to set the current status | boolean | - |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
| collapsible | whether can be collapsed | boolean | false |
| defaultCollapsed | to set the initial status | boolean | false |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | to customize the styles | CSSProperties | - |
| theme | color theme of the sidebar | `light` \| `dark` | `dark` |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
| width | width of the sidebar | number\|string | 200 |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - |
| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
| breakpoint | [Breakpoints](/components/grid/#Col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` } | - |
| className | Container className | string | - |
| collapsed | To set the current status | boolean | - |
| collapsedWidth | Width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
| collapsible | Whether can be collapsed | boolean | false |
| defaultCollapsed | To set the initial status | boolean | false |
| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | To customize the styles | CSSProperties | - |
| theme | Color theme of the sidebar | `light` \| `dark` | `dark` |
| trigger | Specify the customized trigger, set to null to hide the trigger | string \| ReactNode | - |
| width | Width of the sidebar | number \| string | 200 |
| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - |
| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
#### breakpoint width

4
components/layout/index.zh-CN.md
View File

@ -98,8 +98,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | CSSProperties | - |
| theme | 主题颜色 | `light` \| `dark` | `dark` |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string \| ReactNode | - |
| width | 宽度 | number \| string | 200 |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |

40
components/menu/index.en-US.md
View File

@ -29,25 +29,25 @@ More layouts with navigation: [Layout](/components/layout).
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | | |
| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | | |
| defaultOpenKeys | Array with the keys of default opened sub menus | string\[] | - | |
| defaultSelectedKeys | Array with the keys of default selected menu items | string\[] | - | |
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |
| mode | Type of menu; `vertical`, `horizontal`, or `inline` | `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | Allows selection of multiple items | boolean | false | |
| openKeys | Array with the keys of currently opened sub-menus | string\[] | | |
| openKeys | Array with the keys of currently opened sub-menus | string\[] | - | |
| selectable | Allows selecting menu items | boolean | true | |
| selectedKeys | Array with the keys of currently selected menu items | string\[] | | |
| style | Style of the root node | CSSProperties | | |
| selectedKeys | Array with the keys of currently selected menu items | string\[] | - | |
| style | Style of the root node | CSSProperties | - | |
| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | |
| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | |
| theme | Color theme of the menu | `light` \| `dark` | `light` | |
| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |
| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | |
| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | noop | |
| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | |
| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | |
| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - | |
> More options in [rc-menu](https://github.com/react-component/menu#api)
@ -57,9 +57,9 @@ More layouts with navigation: [Layout](/components/layout).
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | --------- | ------------- | ------- |
| disabled | Whether menu item is disabled | boolean | false | |
| key | Unique ID of the menu item | string | | |
| title | Set display title for collapsed item | string | | |
| icon | icon of the menu item | ReactNode | | 4.2.0 |
| key | Unique ID of the menu item | string | - | |
| title | Set display title for collapsed item | string | - | |
| icon | The icon of the menu item | ReactNode | - | 4.2.0 |
| danger | Display the danger style | boolean | false | 4.3.0 |
> Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
@ -85,20 +85,20 @@ More layouts with navigation: [Layout](/components/layout).
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| popupClassName | Sub-menu class name | string | | |
| children | Sub-menus or sub-menu items | Array&lt;MenuItem\|SubMenu> | | |
| popupClassName | Sub-menu class name | string | - | |
| children | Sub-menus or sub-menu items | Array&lt;MenuItem \| SubMenu> | - | |
| disabled | Whether sub-menu is disabled | boolean | false | |
| key | Unique ID of the sub-menu | string | | |
| title | Title of sub menu | string\|ReactNode | | |
| icon | Icon of sub menu | ReactNode | | 4.2.0 |
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | | |
| key | Unique ID of the sub-menu | string | - | |
| title | Title of sub menu | string \| ReactNode | - | |
| icon | Icon of sub menu | ReactNode | - | 4.2.0 |
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
### Menu.ItemGroup
| Param | Description | Type | Default value | Version |
| -------- | ------------------ | ----------------- | ------------- | ------- |
| children | sub-menu items | MenuItem\[] | | |
| title | title of the group | string\|ReactNode | | |
| Param | Description | Type | Default value | Version |
| -------- | ---------------------- | ------------------- | ------------- | ------- |
| children | Sub-menu items | MenuItem\[] | - | |
| title | The title of the group | string \| ReactNode | - | |
### Menu.Divider

44
components/menu/index.zh-CN.md
View File

@ -30,24 +30,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | | |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | - | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | - | |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | 是否允许多选 | boolean | false | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - | |
| selectable | 是否允许选中 | boolean | true | |
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | | |
| style | 根节点样式 | CSSProperties | | |
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | - | |
| style | 根节点样式 | CSSProperties | - | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
| theme | 主题颜色 | `light` \| `dark` | `light` | |
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \| `click` | `hover` | |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop | |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - | |
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   | |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | |
@ -58,9 +58,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | --------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string | | |
| icon | 菜单图标 | ReactNode | | 4.2.0 |
| key | item 的唯一标志 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| danger | 展示错误状态样式 | boolean | false | 4.3.0 |
> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
@ -84,22 +84,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | -------------- | --------------------------- | ------ | ----- |
| popupClassName | 子菜单样式 | string | | |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | | |
| disabled | 是否禁用 | boolean | false | |
| key | 唯一标志 | string | | |
| title | 子菜单项值 | string\|ReactNode | | |
| icon | 菜单图标 | ReactNode | | 4.2.0 |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | -------------- | ----------------------------- | ------ | ----- |
| popupClassName | 子菜单样式 | string | - | |
| children | 子菜单的菜单项 | Array&lt;MenuItem \| SubMenu> | - | |
| disabled | 是否禁用 | boolean | false | |
| key | 唯一标志 | string | - | |
| title | 子菜单项值 | string \| ReactNode | - | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | ----------------- | ------ | ---- |
| children | 分组的菜单项 | MenuItem\[] | | |
| title | 分组标题 | string\|ReactNode | | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | ------------------- | ------ | ---- |
| children | 分组的菜单项 | MenuItem\[] | - | |
| title | 分组标题 | string \| ReactNode | - | |
### Menu.Divider

2
components/menu/style/index.less
View File

@ -18,7 +18,7 @@
background: @menu-bg;
outline: none;
box-shadow: @box-shadow-base;
transition: background 0.3s, width 0.2s;
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
.clearfix;
ul,

8
components/page-header/index.en-US.md
View File

@ -20,13 +20,13 @@ PageHeader can be used to highlight the page topic, display important informatio
| title | Custom title text | ReactNode | - | |
| subTitle | Custom subtitle text | ReactNode | - | |
| ghost | PageHeader type, will change background color | boolean | true | |
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | `<ArrowLeft />` | |
| avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - | |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | &lt;ArrowLeft /> | |
| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
| breadcrumb | Breadcrumb configuration | [breadcrumb](/components/breadcrumb/) | - | |
| breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - | |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
| onBack | Back icon click event | `()=>void` | `()=>history.back()` | |
| onBack | Back icon click event | ()=>void | ()=>history.back() | |
<style>
[data-theme="dark"] .site-page-header {

8
components/page-header/index.zh-CN.md
View File

@ -20,13 +20,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
| title | 自定义标题文字 | ReactNode | - | |
| subTitle | 自定义的二级标题文字 | ReactNode | - | |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |
| avatar | 标题栏旁的头像 | [avatar props](/components/avatar/) | - | |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | `<ArrowLeft />` | |
| avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - | |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | &lt;ArrowLeft /> | |
| tags | title 旁的 tag 列表 | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |
| breadcrumb | 面包屑的配置 | [breadcrumb](/components/breadcrumb/) | - | |
| breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - | |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |
| onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | |
| onBack | 返回按钮的点击事件 | ()=>void | ()=>history.back() | |
<style>
[data-theme="dark"] .site-page-header {

12
components/pagination/index.en-US.md
View File

@ -28,15 +28,15 @@ A long list can be divided into several pages using `Pagination`, and only one p
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| itemRender | To customize item's innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| pageSize | Number of data items per page | number | - | |
| pageSizeOptions | Specify the sizeChanger options | string\[] | \['10', '20', '50', '100'] | |
| pageSizeOptions | Specify the sizeChanger options | string\[] | \[`10`, `20`, `50`, `100`] | |
| showLessItems | Show less page items | boolean | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | Determine whether to show `pageSize` select, it will be `true` when `total>=50` | boolean | - | |
| showTitle | Show page item's title | boolean | true | |
| showTotal | To display the total number and range | Function(total, range) | - | |
| showTotal | To display the total number and range | function(total, range) | - | |
| simple | Whether to use simple mode | boolean | - | |
| size | Specify the size of `Pagination`, can be set to `small`. | 'default' \| 'small'. | "" | |
| size | Specify the size of `Pagination`, can be set to `small` | `default` \| `small` | `default` | |
| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | |
| total | Total number of data items | number | 0 | |
| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop | |
| onShowSizeChange | Called when `pageSize` is changed | Function(current, size) | noop | |
| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - | |
| onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - | |

12
components/pagination/index.zh-CN.md
View File

@ -29,15 +29,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| pageSize | 每页条数 | number | - | |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '50', '100'] | |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \[`10`, `20`, `50`, `100`] | |
| showLessItems | 是否显示较少页面内容 | boolean | false | |
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| `{ goButton: ReactNode }` | false | |
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 `50` 时默认为 `true` | boolean | - | |
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - | |
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
| simple | 当添加该属性时，显示为简单分页 | boolean | - | |
| size | 当为「small」时，是小尺寸分页 | 'default' \| 'small' | "" | |
| size | 当为 `small` 时，是小尺寸分页 | `default` \| `small` | `default` | |
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
| total | 数据总数 | number | 0 | |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop | |
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop | |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |

4
components/radio/group.tsx
View File

@ -5,6 +5,7 @@ import { RadioGroupProps, RadioChangeEvent, RadioGroupButtonStyle } from './inte
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import { RadioGroupContextProvider } from './context';
import { usePrevious } from '../_util/ref';
const RadioGroup: React.FC<RadioGroupProps> = props => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
@ -17,10 +18,9 @@ const RadioGroup: React.FC<RadioGroupProps> = props => {
initValue = props.defaultValue;
}
const [value, setValue] = React.useState(initValue);
const [prevPropValue, setPrevPropValue] = React.useState(props.value);
const prevPropValue = usePrevious(props.value);
React.useEffect(() => {
setPrevPropValue(props.value);
if (props.value !== undefined || prevPropValue !== props.value) {
setValue(props.value);
}

2
components/radio/style/index.less
View File

@ -12,6 +12,7 @@
.reset-component;
display: inline-block;
font-size: 0;
line-height: unset;
.@{ant-prefix}-badge-count {
@ -165,6 +166,7 @@ span.@{radio-prefix-cls} + * {
margin: 0;
padding: 0 @padding-md - 1px;
color: @radio-button-color;
font-size: @font-size-base;
line-height: @btn-height-base - 2px;
background: @radio-button-bg;
border: @border-width-base @border-style-base @border-color-base;

889
components/skeleton/__tests__/__snapshots__/demo.test.js.snap
View File

@ -102,616 +102,377 @@ exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = `
`;
exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
<div>
<div>
<form
class="ant-form ant-form-inline"
style="margin-bottom:16px"
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-row ant-form-item"
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-button"
/>
</div>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-button"
/>
</div>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-circle"
/>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input"
style="width:200px"
/>
</div>
</div>
</div>,
<br />,
<br />,
<div
class="ant-skeleton ant-skeleton-element"
>
<div
class="ant-skeleton-image"
>
<svg
class="ant-skeleton-image-svg"
viewBox="0 0 1098 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="ant-skeleton-image-path"
d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
/>
</svg>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<form
class="ant-form ant-form-inline"
style="margin:16px 0"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="Active"
>
Active
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="ButtonActive"
>
ButtonActive
</label>
</div>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="Size"
>
Size
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-radio-group ant-radio-group-outline"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="ButtonSize"
>
ButtonSize
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="ButtonShape"
>
ButtonShape
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="round"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Round
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-button"
/>
</div>
</div>
<br />
<div>
<form
class="ant-form ant-form-inline"
style="margin-bottom:16px"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="AvatarActive"
>
AvatarActive
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="AvatarSize"
>
AvatarSize
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="AvatarShape"
>
AvatarShape
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="square"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Square
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-circle"
/>
</div>
</div>
<br />
<div>
<form
class="ant-form ant-form-inline"
style="margin-bottom:16px"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="InputActive"
>
InputActive
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
</button>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-row ant-form-item"
class="ant-col ant-form-item-label"
>
<label
class=""
title="Button Shape"
>
Button Shape
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="InputSize"
>
InputSize
</label>
</div>
<div
class="ant-col ant-form-item-control"
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input"
class="ant-form-item-control-input-content"
>
<div
class="ant-form-item-control-input-content"
class="ant-radio-group ant-radio-group-outline"
>
<div
class="ant-radio-group ant-radio-group-outline"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="round"
/>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
class="ant-radio-button-inner"
/>
</span>
<span>
Round
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
</form>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input"
style="width:300px"
/>
</div>
</div>
<br />
<div>
<div
class="ant-skeleton ant-skeleton-element"
class="ant-row ant-form-item"
>
<div
class="ant-skeleton-image"
class="ant-col ant-form-item-label"
>
<svg
class="ant-skeleton-image-svg"
viewBox="0 0 1098 1024"
xmlns="http://www.w3.org/2000/svg"
<label
class=""
title="Avatar Shape"
>
<path
class="ant-skeleton-image-path"
d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
/>
</svg>
Avatar Shape
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="square"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Square
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>,
]
`;
exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
<div>
Array [
<button
aria-checked="false"
class="ant-switch"
@ -724,7 +485,7 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
<span
class="ant-switch-inner"
/>
</button>
</button>,
<div
class="ant-list ant-list-vertical ant-list-lg ant-list-split"
>
@ -827,6 +588,6 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
</ul>
</div>
</div>
</div>
</div>
</div>,
]
`;

136
components/skeleton/demo/element.md
View File

@ -1,8 +1,8 @@
---
order: 2
order: 2.1
title:
zh-CN: 骨架按钮、头像、输入框和图像。
en-US: Skeleton button, avatar, input and Image.
zh-CN: 按钮/头像/输入框/图像
en-US: Button/Avatar/Input/Image
---
## zh-CN
@ -11,29 +11,25 @@ title:
## en-US
Skeleton button, avatar, input and Image.
Skeleton Button, Avatar, Input and Image.
```jsx
import { Skeleton, Switch, Form, Radio } from 'antd';
import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
class Demo extends React.Component {
state = {
buttonActive: false,
avatarActive: false,
inputActive: false,
buttonSize: 'default',
avatarSize: 'default',
inputSize: 'default',
active: false,
size: 'default',
buttonShape: 'default',
avatarShape: 'circle',
};
handleActiveChange = prop => checked => {
this.setState({ [prop]: checked });
handleActiveChange = checked => {
this.setState({ active: checked });
};
handleSizeChange = prop => e => {
this.setState({ [prop]: e.target.value });
handleSizeChange = e => {
this.setState({ size: e.target.value });
};
handleShapeChange = prop => e => {
@ -41,83 +37,45 @@ class Demo extends React.Component {
};
render() {
const {
buttonActive,
avatarActive,
inputActive,
buttonSize,
avatarSize,
inputSize,
buttonShape,
avatarShape,
} = this.state;
const { active, size, buttonShape, avatarShape } = this.state;
return (
<div>
<div>
<Form layout="inline" style={{ marginBottom: 16 }}>
<Form.Item label="ButtonActive">
<Switch checked={buttonActive} onChange={this.handleActiveChange('buttonActive')} />
</Form.Item>
<Form.Item label="ButtonSize">
<Radio.Group value={buttonSize} onChange={this.handleSizeChange('buttonSize')}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="ButtonShape">
<Radio.Group value={buttonShape} onChange={this.handleShapeChange('buttonShape')}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="round">Round</Radio.Button>
<Radio.Button value="circle">Circle</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
<Skeleton.Button active={buttonActive} size={buttonSize} shape={buttonShape} />
</div>
<>
<Space>
<Skeleton.Button active={active} size={size} shape={buttonShape} />
<Skeleton.Button active={active} size={size} shape={buttonShape} />
<Skeleton.Avatar active={active} size={size} shape={avatarShape} />
<Skeleton.Input style={{ width: 200 }} active={active} size={size} />
</Space>
<br />
<div>
<Form layout="inline" style={{ marginBottom: 16 }}>
<Form.Item label="AvatarActive">
<Switch checked={avatarActive} onChange={this.handleActiveChange('avatarActive')} />
</Form.Item>
<Form.Item label="AvatarSize">
<Radio.Group value={avatarSize} onChange={this.handleSizeChange('avatarSize')}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="AvatarShape">
<Radio.Group value={avatarShape} onChange={this.handleShapeChange('avatarShape')}>
<Radio.Button value="square">Square</Radio.Button>
<Radio.Button value="circle">Circle</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
<Skeleton.Avatar active={avatarActive} size={avatarSize} shape={avatarShape} />
</div>
<br />
<div>
<Form layout="inline" style={{ marginBottom: 16 }}>
<Form.Item label="InputActive">
<Switch checked={inputActive} onChange={this.handleActiveChange('inputActive')} />
</Form.Item>
<Form.Item label="InputSize">
<Radio.Group value={inputSize} onChange={this.handleSizeChange('inputSize')}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
<Skeleton.Input style={{ width: '300px' }} active={inputActive} size={inputSize} />
</div>
<br />
<div>
<Skeleton.Image />
</div>
</div>
<Skeleton.Image />
<Divider />
<Form layout="inline" style={{ margin: '16px 0' }}>
<Form.Item label="Active">
<Switch checked={active} onChange={this.handleActiveChange} />
</Form.Item>
<Form.Item label="Size">
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Button Shape">
<Radio.Group value={buttonShape} onChange={this.handleShapeChange('buttonShape')}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="round">Round</Radio.Button>
<Radio.Button value="circle">Circle</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Avatar Shape">
<Radio.Group value={avatarShape} onChange={this.handleShapeChange('avatarShape')}>
<Radio.Button value="square">Square</Radio.Button>
<Radio.Button value="circle">Circle</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
</>
);
}
}

4
components/skeleton/demo/list.md
View File

@ -50,7 +50,7 @@ class App extends React.Component {
const { loading } = this.state;
return (
<div>
<>
<Switch checked={!loading} onChange={this.onChange} />
<List
@ -88,7 +88,7 @@ class App extends React.Component {
</List.Item>
)}
/>
</div>
</>
);
}
}

2
components/skeleton/style/index.less
View File

@ -109,6 +109,8 @@
// Skeleton element
&-element {
display: inline-block;
width: auto;
.@{skeleton-button-prefix-cls} {
.skeleton-element-button();
}

6
components/space/index.en-US.md
View File

@ -16,6 +16,6 @@ Avoid components clinging together and set a unified space.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
| direction | space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
| size | space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
| direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
| size | The space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |

10
components/steps/index.en-US.md
View File

@ -33,7 +33,7 @@ The whole of the step bar.
| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | |
| direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | |
| labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` | |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
| initial | Set the initial step, counting from 0 | number | 0 | |
@ -45,9 +45,9 @@ A single step in the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Description of the step, optional property | string\|ReactNode | - | |
| icon | Icon of the step, optional property | string\|ReactNode | - | |
| description | Description of the step, optional property | string \| ReactNode | - | |
| icon | Icon of the step, optional property | string \| ReactNode | - | |
| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
| title | Title of the step | string\|ReactNode | - | |
| subTitle | Subtitle of the step | string\|ReactNode | - | |
| title | Title of the step | string \| ReactNode | - | |
| subTitle | Subtitle of the step | string \| ReactNode | - | |
| disabled | Disable click | boolean | false | |

14
components/steps/index.zh-CN.md
View File

@ -32,11 +32,11 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| className | 步骤条类名 | string | - | |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | |
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | |
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| onChange | 点击切换步骤时触发 | (current) => void | - | |
@ -46,9 +46,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string\|ReactNode | - | |
| description | 步骤的详情描述，可选 | string \| ReactNode | - | |
| icon | 步骤图标的类型，可选 | ReactNode | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | |
| title | 标题 | string\|ReactNode | - | |
| subTitle | 子标题 | string\|ReactNode | - | |
| title | 标题 | string \| ReactNode | - | |
| subTitle | 子标题 | string \| ReactNode | - | |
| disabled | 禁用点击 | boolean | false | |

4
components/table/demo/resizable-column.md
View File

@ -17,7 +17,7 @@ Implement resizable column by integrate with [react-resizable](https://github.co
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
const ResizeableTitle = props => {
const ResizableTitle = props => {
const { onResize, width, ...restProps } = props;
if (!width) {
@ -78,7 +78,7 @@ class Demo extends React.Component {
components = {
header: {
cell: ResizeableTitle,
cell: ResizableTitle,
},
};

2
components/tabs/index.en-US.md
View File

@ -24,7 +24,7 @@ Ant Design has 3 types of Tabs for different situations.
| --- | --- | --- | --- | --- |
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
| activeKey | Current TabPane's key | string | - | |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | true, false when `type="card"` | |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | false | |
| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |

2
components/tabs/index.zh-CN.md
View File

@ -27,7 +27,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| --- | --- | --- | --- | --- |
| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
| activeKey | 当前激活 tab 面板的 key | string | - | |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | false | |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 | |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |

22
components/typography/index.en-US.md
View File

@ -20,15 +20,15 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean | false | |
| mark | Marked style | boolean | false | |
| keyboard | Keyboard style | boolean | false | 4.3.0 |
| underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | Function(string) | - | |
| onChange | Trigger when user edits the content | function(string) | - | |
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `warning` \| `danger` | - | |
@ -37,15 +37,15 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: 1, 2, 3, 4 | 1 | |
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | Function(string) | - | |
| onChange | Trigger when user edits the content | function(string) | - | |
| type | Content type | `secondary` \| `warning` \| `danger` | - | |
### Typography.Paragraph
@ -53,14 +53,14 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | Function(string) | - | |
| onChange | Trigger when user edits the content | function(string) | - | |
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `warning` \| `danger` | - | |

22
components/typography/index.zh-CN.md
View File

@ -21,10 +21,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | 设置自动溢出省略，需要设置元素宽度 | boolean | false | |
| mark | 添加标记样式 | boolean | false | |
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
@ -36,29 +36,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4` | number: 1, 2, 3, 4 | 1 | |
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | Function(string) | - | |
| onChange | 当用户提交编辑内容时触发 | function(string) | - | |
| type | 文本类型 | `secondary` \| `warning` \| `danger` | - | |
### Typography.Paragraph
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| | copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: function, onChange: function(string) } | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 |
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | Function(string) | - | |
| onChange | 当用户提交编辑内容时触发 | function(string) | - | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `warning` \| `danger` | - | |

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "4.3.5",
"version": "4.4.0",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",
@ -119,7 +119,7 @@
"rc-checkbox": "~2.2.0",
"rc-collapse": "~2.0.0",
"rc-dialog": "~8.0.0",
"rc-drawer": "~4.0.0",
"rc-drawer": "~4.1.0",
"rc-dropdown": "~3.1.2",
"rc-field-form": "~1.5.0",
"rc-input-number": "~5.1.0",