GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs: format api divider/grid/layout (#25293) 

* docs: format api divider/grid/layout

* add the
pull/25301/head
xrkffgg 4 years ago
committed by GitHub
parent
b9cd990693
commit
2321cc6df5
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      components/divider/index.en-US.md
  2. 30
      components/grid/index.en-US.md
  3. 14
      components/grid/index.zh-CN.md
  4. 6
      components/icon/index.en-US.md
  5. 34
      components/layout/index.en-US.md
  6. 4
      components/layout/index.zh-CN.md

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 |

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` 的部分)。

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

@ -25,8 +25,8 @@ 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) | - | |
@ -45,7 +45,7 @@ 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\> | - | |

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 | - |

Write Preview
Loading…
Cancel
Save