Skip to content

Commit

Permalink
Navigation components doc tweaks (#19447)
Browse files Browse the repository at this point in the history 
* Documentation - Affix Component

* Documentation - Dropdown component

* Documentation - Menu component

* Documentation - Pagination component

* Documentation - PageHeader component

* Documentation - Steps component
  • Loading branch information
@aaroncawte @orzyyyy
aaroncawte authored and orzyyyy committed Oct 28, 2019
1 parent c675354 commit 2b46a23
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 104 deletions.
16 changes: 8 additions & 8 deletions components/affix/index.en-US.md
View file
Expand Up @@ -4,24 +4,24 @@ 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.

## API

| 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>
Expand All @@ -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 changes: 18 additions & 18 deletions components/dropdown/index.en-US.md
View file
Expand Up @@ -8,23 +8,23 @@ 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

### 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`.

Expand All @@ -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 changes: 36 additions & 36 deletions components/menu/index.en-US.md
View file
Expand Up @@ -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

Expand All @@ -26,54 +26,54 @@ 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)
### Menu.Item

| 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
Expand Down
16 changes: 8 additions & 8 deletions components/page-header/index.en-US.md
View file
Expand Up @@ -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 |

0 comments on commit 2b46a23

Please sign in to comment.