|
|
@@ -263,8 +263,8 @@ import { Link } from "react-router-dom";
|
|
|
items: ["Dashboard", "Nothing Here"]
|
|
|
}
|
|
|
]}
|
|
|
- ></Nav>
|
|
|
-}
|
|
|
+ ></Nav>;
|
|
|
+};
|
|
|
```
|
|
|
|
|
|
|
|
|
@@ -728,34 +728,35 @@ function NavApp (props = {}) {
|
|
|
|
|
|
### Nav
|
|
|
|
|
|
-| Properties | Type | Description | Default |
|
|
|
-| ------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------------------------------------------------------------------- | ---------- |
|
|
|
-| bodyStyle | Custom style for navigation item list | object | |
|
|
|
-| className | Style name of outermost element | boolean | |
|
|
|
-| defaultIsCollapsed | Whether the default is put away, valid only when `mode = "vertical"` | boolean | false |
|
|
|
-| defaultOpenKeys | Initially open sub navigation `itemKey` array, valid only `mode = "vertical"`and the sidebar is in an expanded state | string[] | [] |
|
|
|
-| defaultSelectedKeys | Originally selected navigation item `itemKey` array | string[] | [] |
|
|
|
-| footer | The bottom area configure objects or elements, see [Nav.Footer](#Nav.Footer) | object\|ReactNode | |
|
|
|
-| getPopupContainer | Dropdown's getPopupContainer config of vertical collapsed Nav or horizontal Nav. >= v2.24 | Function | |
|
|
|
-| header | Head area configuration objects or elements, see [Nav.Header](#Nav.Header) | object\|ReactNode | |
|
|
|
-| isCollapsed | A controlled attribute of whether it is in a put-away state, valid only when `mode = "vertical"` | boolean | |
|
|
|
-| items | Navigate the list of items, each item can continue with the items property. If it is a string array, each item is taken as text and itemKey | object\|string[]\|[Item](#Nav.Item)[]\|[Sub](#Nav.Sub)[] | |
|
|
|
-| mode | Navigation type, currently supports horizontal and vertical, optional value: `vertical`\ |`horizontal` | string | `vertical` |
|
|
|
-| onClick | Trigger when clicking on any navigation item | <ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>(itemKey, event, isOpen) => void</ApiType> | () = > {} |
|
|
|
-| onCollapseChange | The callback when the state changes. | <ApiType detail='(isCollapsed: boolean) => void'>(isCollapsed) => void </ApiType> | () = > {} |
|
|
|
-| onOpenChange | Triggers when switching the hidden state of a sub navigation project |<ApiType detail='({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void'> ({itemKey, openKeys, event, isOpen}) => void </ApiType> | () = > {} |
|
|
|
-| onSelect | Triggers the first time you select an optional navigation project, where the selected Items field version > = 0.17.0 is supported | <ApiType detail='({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void'>(onSelectProps) => void </ApiType> | () = > {} |
|
|
|
-| openKeys | Controlled open sub navigation `itemKey` array, expanded with `onOpenChange` callback control sub navigation items, valid only `mode = "vertical"`and the sidebar is in an unfolding state | string[] | |
|
|
|
-| renderWrapper | Custom navigation item outer component >=2.24.0 |<ApiType detail='(data:{ itemElement:ReactElement, isSubNav:boolean, isInSubNav:boolean, props:SubNavProps\| ItemProps }) => ReactNode'>(data) => ReactNode</ApiType> | |
|
|
|
-| prefixCls | classsname prefix | string | `semi` |
|
|
|
-| selectedKeys | Controlled navigation item `itemKey` array, with `onSelect` callback control navigation item selection | string[] | |
|
|
|
-| style | Custom styles for outermost elements | object | |
|
|
|
-| subNavCloseDelay | Delay of sub navigation floating layer closure. Effective when the limit is true or mode is "limit" in MS | number | 100 |
|
|
|
-| subNavOpenDelay | The delay displayed by the sub navigation floating layer. Effective when the input is true or mode is "selected" in MS | number | 0 |
|
|
|
-| tooltipHideDelay | The latency hidden by tooltip is valid when it is true in MS | number | 100 |
|
|
|
-| tooltipShowDelay | The delay displayed by tooltip is valid when it is true in MS | number | 0 |
|
|
|
-| limitIndent | To lift the indentation limit, you can use level to customize the indentation of navigation items. The horizontal mode can only be true >=1.27.0 | boolean | true |
|
|
|
-| toggleIconPosition | Parent navigation item arrow position with child navigation items >=1.27.0 | 'left' \| 'right' | 'right' |
|
|
|
+| Properties | Type | Description | Default |
|
|
|
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
|
|
|
+| bodyStyle | Custom style for navigation item list | object | |
|
|
|
+| className | Style name of outermost element | boolean | |
|
|
|
+| defaultIsCollapsed | Whether the default is put away, valid only when `mode = "vertical"` | boolean | false |
|
|
|
+| defaultOpenKeys | Initially open sub navigation `itemKey` array, valid only `mode = "vertical"`and the sidebar is in an expanded state | string[] | [] |
|
|
|
+| defaultSelectedKeys | Originally selected navigation item `itemKey` array | string[] | [] |
|
|
|
+| expandIcon | Default Arrow Icon | ReactNode | |
|
|
|
+| footer | The bottom area configure objects or elements, see [Nav.Footer](#Nav.Footer) | object\|ReactNode | |
|
|
|
+| getPopupContainer | Dropdown's getPopupContainer config of vertical collapsed Nav or horizontal Nav. >= v2.24 | Function | |
|
|
|
+| header | Head area configuration objects or elements, see [Nav.Header](#Nav.Header) | object\|ReactNode | |
|
|
|
+| isCollapsed | A controlled attribute of whether it is in a put-away state, valid only when `mode = "vertical"` | boolean | |
|
|
|
+| items | Navigate the list of items, each item can continue with the items property. If it is a string array, each item is taken as text and itemKey | object\|string[]\|[Item](#Nav.Item)[]\|[Sub](#Nav.Sub)[] | |
|
|
|
+| mode | Navigation type, currently supports horizontal and vertical, optional value: `vertical`\ | `horizontal` | string | `vertical` |
|
|
|
+| onClick | Trigger when clicking on any navigation item | <ApiType detail='({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void'>(itemKey, event, isOpen) => void</ApiType> | () = > {} |
|
|
|
+| onCollapseChange | The callback when the state changes. | <ApiType detail='(isCollapsed: boolean) => void'>(isCollapsed) => void </ApiType> | () = > {} |
|
|
|
+| onOpenChange | Triggers when switching the hidden state of a sub navigation project | <ApiType detail='({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void'> ({itemKey, openKeys, event, isOpen}) => void </ApiType> | () = > {} |
|
|
|
+| onSelect | Triggers the first time you select an optional navigation project, where the selected Items field version > = 0.17.0 is supported | <ApiType detail='({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void'>(onSelectProps) => void </ApiType> | () = > {} |
|
|
|
+| openKeys | Controlled open sub navigation `itemKey` array, expanded with `onOpenChange` callback control sub navigation items, valid only `mode = "vertical"`and the sidebar is in an unfolding state | string[] | |
|
|
|
+| renderWrapper | Custom navigation item outer component >=2.24.0 | <ApiType detail='(data:{ itemElement:ReactElement, isSubNav:boolean, isInSubNav:boolean, props:SubNavProps\| ItemProps }) => ReactNode'>(data) => ReactNode</ApiType> | |
|
|
|
+| prefixCls | classsname prefix | string | `semi` |
|
|
|
+| selectedKeys | Controlled navigation item `itemKey` array, with `onSelect` callback control navigation item selection | string[] | |
|
|
|
+| style | Custom styles for outermost elements | object | |
|
|
|
+| subNavCloseDelay | Delay of sub navigation floating layer closure. Effective when the limit is true or mode is "limit" in MS | number | 100 |
|
|
|
+| subNavOpenDelay | The delay displayed by the sub navigation floating layer. Effective when the input is true or mode is "selected" in MS | number | 0 |
|
|
|
+| tooltipHideDelay | The latency hidden by tooltip is valid when it is true in MS | number | 100 |
|
|
|
+| tooltipShowDelay | The delay displayed by tooltip is valid when it is true in MS | number | 0 |
|
|
|
+| limitIndent | To lift the indentation limit, you can use level to customize the indentation of navigation items. The horizontal mode can only be true >=1.27.0 | boolean | true |
|
|
|
+| toggleIconPosition | Parent navigation item arrow position with child navigation items >=1.27.0 | 'left' \| 'right' | 'right' |
|
|
|
|
|
|
### Nav.Item
|
|
|
|
|
|
@@ -804,13 +805,14 @@ function NavApp (props = {}) {
|
|
|
|
|
|
### Nav.Footer
|
|
|
|
|
|
-| Properties | Description | Type | Default | Version |
|
|
|
-| -------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------- | ------- |
|
|
|
-| children | Sub element | ReactNode | | |
|
|
|
-| className | Outermost style name | string | | |
|
|
|
-| collapseButton | Whether to display the bottom "collapse sidebar" button, only work when mode="vertical" and the children parameter of the Footer component is empty | boolean\|ReactNode | false | |
|
|
|
-| collapseText | Title of the collapse button | (collapsed:boolean) => string\|ReactNode | | 0.35.0 |
|
|
|
-| style | Outermost style | object | | |
|
|
|
+| Properties | Description | Type | Default | Version |
|
|
|
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------- | ------- |
|
|
|
+| children | Sub element | ReactNode | | |
|
|
|
+| className | Outermost style name | string | | |
|
|
|
+| collapseButton | Whether to display the bottom "collapse sidebar" button, only work when mode="vertical" and the children parameter of the Footer component is empty | boolean\|ReactNode | false | |
|
|
|
+| collapseText | Title of the collapse button | (collapsed:boolean) => string\|ReactNode | | 0.35.0 |
|
|
|
+| style | Outermost style | object | | |
|
|
|
+| onClick | Click callback | (event) => void | | |
|
|
|
|
|
|
## Accessibility
|
|
|
- ### Keyboard and Focus
|
|
|
@@ -828,10 +830,6 @@ function NavApp (props = {}) {
|
|
|
## Design Tokens
|
|
|
<DesignToken/>
|
|
|
|
|
|
-<!-- ## Related Material
|
|
|
-```material
|
|
|
-2, 43, 312
|
|
|
-``` -->
|
|
|
## Related Material
|
|
|
<semi-material-list code="2, 312"></semi-material-list>
|
|
|
|
pointhalo