mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

docs: improve style type (#23700)

Browse Source
This commit is contained in:
Tom Xu 2020-04-28 14:09:54 +08:00 committed by GitHub
parent 3967f12f3d
commit f5153ab950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,8 +23,8 @@ A card can be used to display content related to a single subject. The content c
| --- | --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - | |
| activeTabKey | Current TabPane's key | string | - | |
| headStyle | Inline style to apply to the card head | object | - | |
| bodyStyle | Inline style to apply to the card content | object | - | |
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
| bordered | Toggles rendering of the border around the card | boolean | `true` | |
| cover | Card cover | ReactNode | - | |
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - | |
@ -42,17 +42,17 @@ A card can be used to display content related to a single subject. The content c
### Card.Grid
| Property | Description | Type | Default | Version |
| --------- | ------------------------------- | ------- | ------- | ------- |
| --------- | ------------------------------- | ------------- | ------- | ------- |
| className | className of container | string | - | |
| hoverable | Lift up when hovering card grid | boolean | true | |
| style | style object of container | object | - | |
| style | style object of container | CSSProperties | - | |
### Card.Meta
| Property | Description | Type | Default | Version |
| ----------- | ------------------------- | --------- | ------- | ------- |
| ----------- | ------------------------- | ------------- | ------- | ------- |
| avatar | avatar or icon | ReactNode | - | |
| className | className of container | string | - | |
| description | description content | ReactNode | - | |
| style | style object of container | object | - | |
| style | style object of container | CSSProperties | - | |
| title | title content | ReactNode | - | |

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

@ -24,8 +24,8 @@ cols: 1
| --- | --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
| activeTabKey | 当前激活页签的 key | string | - | |
| headStyle | 自定义标题区域样式 | object | - | |
| bodyStyle | 内容区域自定义样式 | object | - | |
| headStyle | 自定义标题区域样式 | CSSProperties | - | |
| bodyStyle | 内容区域自定义样式 | CSSProperties | - | |
| bordered | 是否有边框 | boolean | true | |
| cover | 卡片封面 | ReactNode | - | |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 | |
@ -43,17 +43,17 @@ cols: 1
### Card.Grid
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ---------------------- | ------- | ------ | ---- |
| --------- | ---------------------- | ------------- | ------ | ---- |
| className | 网格容器类名 | string | - | |
| hoverable | 鼠标移过时可浮起 | boolean | true | |
| style | 定义网格容器类名的样式 | object | - | |
| style | 定义网格容器类名的样式 | CSSProperties | - | |
### Card.Meta
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------ | --------- | ------ | ---- |
| ----------- | ------------------ | ------------- | ------ | ---- |
| avatar | 头像/图标 | ReactNode | - | |
| className | 容器类名 | string | - | |
| description | 描述内容 | ReactNode | - | |
| style | 定义容器类名的样式 | object | - | |
| style | 定义容器类名的样式 | CSSProperties | - | |
| title | 标题内容 | ReactNode | - | |

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

@ -40,7 +40,7 @@ Cascade selection box.
| 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 | string | - | |
| style | additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| value | selected value | string\[] | - | |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |

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

@ -41,7 +41,7 @@ subtitle: 级联选择
| popupVisible | 控制浮层显隐 | boolean | - | |
| showSearch | 在选择框中显示搜索框 | boolean | false | |
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 | |
| style | 自定义样式 | string | - | |
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| value | 指定选中项 | string\[] | - | |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |

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

@ -59,11 +59,11 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
| 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\|RangePicker\[] | - | |
| popupStyle | to customize the style of the popup calendar | object | {} | |
| 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 | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| style | to customize the style of the input box | object | {} | |
| 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) | - | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |

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

@ -61,11 +61,11 @@ import 'moment/locale/zh-cn';
| open | 控制弹层是否展开 | boolean | - | |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
| popupStyle | 额外的弹出日历样式 | object | {} | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | 无 | |
| bordered | 是否有边框 | Boolean | true | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| style | 自定义输入框样式 | object | {} | |
| style | 自定义输入框样式 | CSSProperties | {} | |
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |

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

@ -21,5 +21,5 @@ A divider line separates different content.
| 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 | object | - | |
| style | style object of container | CSSProperties | - | |
| type | direction type of divider | `horizontal` \| `vertical` | `horizontal` | |

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

@ -19,5 +19,5 @@ subtitle: 分割线
| className | 分割线样式类 | string | - | |
| dashed | 是否虚线 | boolean | false | |
| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
| style | 分割线样式对象 | object | - | |
| style | 分割线样式对象 | CSSProperties | - | |
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |

4
components/drawer/index.en-US.md
View File

@ -25,8 +25,8 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' |
| mask | Whether to show mask or not. | Boolean | true |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
| maskStyle | Style for Drawer's mask element. | object | {} |
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | object | - |
| maskStyle | Style for Drawer's mask element. | CSSProperties | {} |
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |
| drawerStyle | Style of the popup layer element | object | - |
| headerStyle | Style of the drawer header part | object | - |
| bodyStyle | Style of the drawer content part | object | - |

10
components/drawer/index.zh-CN.md
View File

@ -24,11 +24,11 @@ title: Drawer
| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| mask | 是否展示遮罩 | boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | object | - |
| drawerStyle | 用于设置 Drawer 弹出层的样式 | object | - |
| headerStyle | 用于设置 Drawer 头部的样式 | object | - |
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | object | - |
| maskStyle | 遮罩样式 | CSSProperties | {} |
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |
| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |
| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |
| title | 标题 | string \| ReactNode | - |
| visible | Drawer 是否可见 | boolean | - |
| width | 宽度 | string \| number | 256 |

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

@ -77,7 +77,7 @@ The wrapper.
| --- | --- | --- | --- |
| 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 | object | - |
| style | to customize the styles | CSSProperties | - |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -94,7 +94,7 @@ The sidebar.
| 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 | object | - |
| 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 |

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

@ -78,7 +78,7 @@ title: Layout
| --- | --- | --- | --- |
| className | 容器 className | string | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
| style | 指定样式 | object | - |
| style | 指定样式 | CSSProperties | - |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
@ -95,7 +95,7 @@ title: Layout
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object | - |
| style | 指定样式 | CSSProperties | - |
| theme | 主题颜色 | `light` \| `dark` | `dark` |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |

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

@ -38,7 +38,7 @@ More layouts with navigation: [Layout](/components/layout).
| 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 | object | | |
| 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` | |

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

@ -39,7 +39,7 @@ subtitle: 导航菜单
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | |
| selectable | 是否允许选中 | boolean | true | |
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | | |
| style | 根节点样式 | object | | |
| style | 根节点样式 | CSSProperties | | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
| theme | 主题颜色 | `light` \| `dark` | `light` | |

4
components/modal/index.en-US.md
View File

@ -15,7 +15,7 @@ When requiring users to interact with the application, but without jumping to a
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
| bodyStyle | Body style for modal body element. Such as height, padding etc. | CSSProperties | {} |
| cancelText | Text of the Cancel button | string\|ReactNode | `Cancel` |
| centered | Centered Modal | Boolean | `false` |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
@ -32,7 +32,7 @@ When requiring users to interact with the application, but without jumping to a
| okType | Button `type` of the OK button | string | `primary` |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
| style | Style of floating layer, typically used at least for adjusting the position. | CSSProperties | - |
| title | The modal dialog's title | string\|ReactNode | - |
| visible | Whether the modal dialog is visible or not | boolean | false |
| width | Width of the modal dialog | string\|number | 520 |

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

@ -36,7 +36,7 @@ title: Modal
| okType | 确认按钮类型 | string | primary |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |
| title | 标题 | string\|ReactNode | - |
| visible | 对话框是否可见 | boolean | - |
| width | 宽度 | string\|number | 520 |

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

@ -23,7 +23,7 @@ Rate component.
| count | star count | number | 5 |
| defaultValue | default value | number | 0 |
| disabled | read only, unable to interact | boolean | false |
| style | custom style object of rate | object | |
| style | custom style object of rate | CSSProperties | |
| tooltips | Customize tooltip by each character | string\[] | |
| value | current value | number | |
| onBlur | callback when component lose focus | Function() | |

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

@ -24,7 +24,7 @@ title: Rate
| count | star 总数 | number | 5 |
| defaultValue | 默认值 | number | 0 |
| disabled | 只读，无法进行交互 | boolean | false |
| style | 自定义样式对象 | object | |
| style | 自定义样式对象 | CSSProperties | |
| tooltips | 自定义每项的提示信息 | string\[] | |
| value | 当前数，受控值 | number | |
| onBlur | 失去焦点时的回调 | Function() | |

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

@ -32,7 +32,7 @@ Select component to select value from options.
| dropdownClassName | className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - | |
| dropdownStyle | style of dropdown menu | object | - | |
| dropdownStyle | style of dropdown menu | CSSProperties | - | |
| 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 | |
| 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://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false | |

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

@ -33,7 +33,7 @@ title: Select
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - | |
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false | |

4
components/statistic/index.en-US.md
View File

@ -25,7 +25,7 @@ Display statistic number.
| suffix | suffix node of value | string \| ReactNode | - | |
| title | Display title | string \| ReactNode | - | |
| value | Display value | string \| number | - | |
| valueStyle | Set value css style | style | - | |
| valueStyle | Set value css style | CSSProperties | - | |
#### Statistic.Countdown
@ -37,4 +37,4 @@ Display statistic number.
| suffix | suffix node of value | string \| ReactNode | - | |
| title | Display title | string \| ReactNode | - | |
| value | Set target countdown time | number \| moment | - | |
| valueStyle | Set value css style | style | - | |
| valueStyle | Set value css style | CSSProperties | - | |

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

@ -26,7 +26,7 @@ title: Statistic
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
| title | 数值的标题 | string \| ReactNode | - | |
| value | 数值内容 | string \| number | - | |
| valueStyle | 设置数值的样式 | style | - | |
| valueStyle | 设置数值的样式 | CSSProperties | - | |
#### Statistic.Countdown
@ -38,4 +38,4 @@ title: Statistic
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
| title | 数值的标题 | string \| ReactNode | - | |
| value | 数值内容 | number \| moment | - | |
| valueStyle | 设置数值的样式 | style | - | |
| valueStyle | 设置数值的样式 | CSSProperties | - | |

3
components/time-picker/index.en-US.md
View File

@ -18,6 +18,7 @@ By clicking the input box, you can select a time from a popup panel.
```jsx
import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
```
@ -42,7 +43,7 @@ import moment from 'moment';
| open | whether to popup panel | boolean | false | |
| placeholder | display when there's no value | string | "Select a time" | |
| popupClassName | className of panel | string | - | |
| popupStyle | style of panel | object | - | |
| popupStyle | style of panel | CSSProperties | - | |
| secondStep | interval between seconds in picker | number | 1 | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| clearIcon | The custom clear icon | ReactNode | - | |

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

@ -33,7 +33,7 @@ One or more elements can be selected from either column, one click on the proper
| selectedKeys | A set of keys of selected items. | string\[] | \[] | |
| showSearch | If included, a search box is shown on each column. | boolean | false | |
| showSelectAll | Show select all checkbox on the header | boolean | true | |
| style | A custom CSS style used for rendering wrapper element. | object | | |
| style | A custom CSS style used for rendering wrapper element. | CSSProperties | | |
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] | |
| titles | A set of titles that are sorted from left to right. | ReactNode\[] | - | |
| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | | |

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

@ -35,7 +35,7 @@ title: Transfer
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | |
| showSearch | 是否显示搜索框 | boolean | false | |
| showSelectAll | 是否展示全选勾选框 | boolean | true | |
| style | 容器的自定义样式 | object | | |
| style | 容器的自定义样式 | CSSProperties | | |
| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
| titles | 标题集合，顺序从左至右 | ReactNode\[] | \['', ''] | |
| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | | |

2
components/tree-select/index.en-US.md
View File

@ -23,7 +23,7 @@ Tree selection control.
| disabled | Disabled or not | boolean | false | |
| dropdownClassName | className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true | |
| dropdownStyle | To set the style of the dropdown menu | object | - | |
| dropdownStyle | To set the style of the dropdown menu | CSSProperties | - | |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: ReactNode, halfChecked: string[]}` | boolean | false | |