test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

Navigation components doc tweaks (#19447)

Browse Source 
* Documentation - Affix Component

* Documentation - Dropdown component

* Documentation - Menu component

* Documentation - Pagination component

* Documentation - PageHeader component

* Documentation - Steps component
This commit is contained in:
Aaron Cawte 2019-10-28 01:09:22 +00:00 committed by 只捱宅
parent c675354744
commit 2b46a232db
6 changed files with 104 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/affix/index.en-US.md
View File

@ -4,11 +4,11 @@ type: Navigation
title: Affix
---
Make an element stick to viewport.
Wrap Affix around another component to make it stick the viewport.
## When To Use
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
@ -16,12 +16,12 @@ Please note that Affix should not cover other content on the page, especially wh
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window | |
| onChange | Callback for when affix state is changed | Function(affixed) | - | |
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | |
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | |
| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window | |
| onChange | Callback for when Affix state is changed | Function(affixed) | - | |
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
```jsx
<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
@ -33,4 +33,4 @@ Please note that Affix should not cover other content on the page, especially wh
We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

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

@ -8,7 +8,7 @@ A dropdown list.
## When To Use
If there are too many operations to display, you can wrap them in a `Dropdown`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
## API
@ -16,15 +16,15 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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`, 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` | |
| overlay | the dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| 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` | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | Class name of the dropdown root element | string | - | 3.11.0 |
| overlayStyle | Style of the dropdown root element | object | - | 3.11.0 |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| visible | whether the dropdown menu is visible | boolean | - | |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - | |
| 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) | - | |
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
@ -36,13 +36,13 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | whether the dropdown menu is disabled | boolean | - | |
| icon | icon of right | ReactNode | - | 3.17.0 |
| overlay | the dropdown menu | [Menu](/components/menu) | - | |
| placement | placement of pop 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 drop-down 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 visible | boolean | - | |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - | |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - | |
| disabled | Whether the dropdown menu is disabled | boolean | - | |
| icon | Icon (appears on the right) | ReactNode | - | 3.17.0 |
| overlay | The dropdown menu | [Menu](/components/menu) | - | |
| 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']` | |
| 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 | - | |

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

@ -5,13 +5,13 @@ type: Navigation
title: Menu
---
Menu list of Navigation.
A versatile menu for navigation.
## When To Use
Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.
Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
More layouts with navigation: [layout](/components/layout).
More layouts with navigation: [Layout](/components/layout).
## API
@ -26,27 +26,27 @@ More layouts with navigation: [layout](/components/layout).
### Menu
| 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\[] | | |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false | |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | |
| inlineIndent | indent px of inline menu item on each level | number | 24 | |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | Allow selection of multiple items | boolean | false | |
| openKeys | array with the keys of currently opened sub menus | string\[] | | |
| selectable | allow selecting menu items | boolean | true | |
| selectedKeys | array with the keys of currently selected menu items | string\[] | | |
| style | style of the root node | object | | |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 | |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 | |
| theme | color theme of the menu | string: `light` `dark` | `light` | |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| onOpenChange | called when open/close sub menu | function(openKeys: string\[]) | noop | |
| onSelect | callback executed when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | |
| overflowedIndicator | Customized icon when menu collapsed | ReactNode | - | 3.16.0 |
| 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\[] | | |
| 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` | string: `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | Allows selection of multiple items | boolean | false | |
| 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 | | |
| 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 | string: `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 }) | - | |
| 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 | |
| overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - | 3.16.0 |
> More options in [rc-menu](https://github.com/react-component/menu#api)
@ -54,26 +54,26 @@ More layouts with navigation: [layout](/components/layout).
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | ------- | ------------- | ------- |
| disabled | whether menu item is disabled or not | boolean | false | |
| key | unique id of the menu item | string | | |
| title | set display title for collapsed item | string | | 3.11.0 |
| disabled | Whether menu item is disabled | boolean | false | |
| key | Unique ID of the menu item | string | | |
| title | Set display title for collapsed item | string | | 3.11.0 |
### Menu.SubMenu
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| popupClassName | sub menu class name | string | | 3.22.0 |
| children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | | |
| disabled | whether sub menu is disabled or not | boolean | false | |
| key | unique id of the sub menu | string | | |
| title | title of the sub menu | string\|ReactNode | | |
| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | | |
| Param | Description | Type | Default value | Version |
| -------------- | ---------------------------------------------------- | --------------------------- | ------------- | ------- |
| popupClassName | Sub-menu class name | string | | 3.22.0 |
| 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 the sub-menu | string\|ReactNode | | |
| 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\[] | | |
| children | sub-menu items | MenuItem\[] | | |
| title | title of the group | string\|ReactNode | | |
### Menu.Divider

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

@ -6,23 +6,23 @@ cols: 1
subtitle:
---
The header can be used to declare the page topic, display important information about the page that the user is interested in, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.)
A header with common actions and design elements built in.
## When To Use
It can also be used as inter-page navigation when it is needed to make the user quickly understand what the current page is and to facilitate the user to use the page function.
PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.
## API
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| title | custom title text | ReactNode | - | 3.14.0 |
| subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
| ghost | pageHeader type, will change background color | boolean | true | 3.24.0 |
| title | Custom title text | ReactNode | - | 3.14.0 |
| subTitle | Custom subtitle text | ReactNode | - | 3.14.0 |
| ghost | PageHeader type, will change background color | boolean | true | 3.24.0 |
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 |
| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 |
| breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
| breadcrumb | Breadcrumb configuration | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 |
| onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 |
| onBack | Back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 |

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

@ -5,7 +5,7 @@ title: Pagination
cols: 1
---
A long list can be divided into several pages by `Pagination`, and only one page will be loaded at a time.
A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
## When To Use
@ -20,21 +20,21 @@ A long list can be divided into several pages by `Pagination`, and only one page
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| current | current page number | number | - | |
| defaultCurrent | default initial page number | number | 1 | |
| defaultPageSize | default number of data items per page | number | 10 | |
| disabled | disable pagination | boolean | - | 3.18.0 |
| current | Current page number | number | - | |
| defaultCurrent | Default initial page number | number | 1 | |
| defaultPageSize | Default number of data items per page | number | 10 | |
| disabled | Disable pagination | boolean | - | 3.18.0 |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | 3.1.0 |
| itemRender | to customize item 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', '30', '40'] | |
| showLessItems | show less page items | boolean | false | 3.16.3 |
| showQuickJumper | determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | |
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false | |
| showTitle | show page items title | boolean | true | |
| 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` | string | "" | |
| total | total number of data items | number | 0 | |
| onChange | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop | |
| onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop | |
| 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', '30', '40'] | |
| showLessItems | Show less page items | boolean | false | 3.16.3 |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | |
| showSizeChanger | Determine whether `pageSize` can be changed | boolean | false | |
| showTitle | Show page item's title | boolean | true | |
| 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` | string | "" | |
| 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 | |

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

@ -9,7 +9,7 @@ title: Steps
## When To Use
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
## API
@ -27,16 +27,16 @@ The whole of the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | additional class to Steps | string | - | 3.11.3 |
| type | type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 3.22.0 |
| 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` | 3.7.3 |
| className | Additional class to Steps | string | - | 3.11.3 |
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 3.22.0 |
| 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` | 3.7.3 |
| 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 | |
| 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 | 3.9.0 |
| onChange | Trigger when Step click to change | (current) => void | - | 3.19.0 |
| 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 | 3.9.0 |
| onChange | Trigger when Step is changed | (current) => void | - | 3.19.0 |
### Steps.Step
@ -44,9 +44,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 | - | |
| 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 | - | 3.22.0 |
| disabled | disable click | boolean | false | 3.22.0 |
| 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 | - | 3.22.0 |
| disabled | Disable click | boolean | false | 3.22.0 |