Package - @uyun/ec-side-menu

category: Components type: Everest title: SideMenu subtitle: 侧边菜单

基于 Layout.Sider 和 Menu 二次开发的侧边栏导航菜单。

作者：沈挺

何时使用

侧边菜单作为网站中的重要组成部分，提供了多级结构来收纳和排列网站架构，用户以此在各个页面中进行跳转或其它功能性操作。

API

通过配置 items 属性描述菜单的结构。

import { Link } from 'react-router-dom'

const items = [
  {
    key: 'nav',
    type: 'link',
    icon: 'nav',
    name: '导航',
    path: 'nav'
  }
]

<SideMenu
  items={items}
  Link={Link}
/>

SideMenu

容器。

属性	说明	类型	默认值
style	容器 style	object	-
className	容器 className	string	-
menuStyle	导航区域 style	object	-
menuClassName	导航区域 className	string	-
belowMenuStyle	底部功能区域 style	object	-
belowMenuClassName	底部功能区域 className	string	-
items	子菜单的配置描述，具体项见下表	ItemProps[]	-
Link	`react-router` 的 `Link` 组件	ReactNode	-
theme	主题颜色	string: `white` `blue` `dark`	`white`
collapsed	容器当前收起状态	boolean	-
mode	侧边菜单的模式，设置为 `auto` 时，会根据路由中的 `hash` 来决定 `selectedKeys`，并响应路由变化	string: `default` `auto`	`default`
isSelectedKey	当 `mode` 为 `auto` 时的默认行为无法满足需求时，用 `isSelectedKey` 函数来决定选中哪个子菜单	function(item): boolean	-
openCurrentOnly	是否只展开当前父级菜单	boolean	true
defaultOpenKeys	内嵌菜单初始展开的菜单项 key 数组，`mode` 为 `auto` 时无效	string[]	-
defaultSelectedKeys	初始选中的子菜单项 key 数组，`mode` 为 `auto` 时无效	string[]	-
openKeys	内嵌菜单当前展开的菜单项 key 数组，`mode` 为 `auto` 时无效	string[]	-
selectedKeys	当前选中的子菜单项 key 数组，`mode` 为 `auto` 时无效	string[]	-
onCollapse	容器展开/收起时的回调，有点击 trigger 以及响应式反馈两种触发方式	function(collapsed, type)	-
onOpenChange	内嵌菜单展开/关闭时的回调	function(openKeys: string[])	-
onSelect	子菜单被选中时的回调	function({ item, key, selectedKeys })	-
onClick	子菜单被点击时的回调	function({ item, key, keyPath })	-

ItemProps

子菜单属性描述，预设 5 种类型的子菜单，分别适用于不同场景和需求。

公共属性

当 key 为无效值或 type 为非法值时，子菜单将不会被渲染。

属性	说明	类型	默认值
key	唯一标志	string	-
type	类型，具体项见下表	string: `default` `link` `component` `sub` `group`	-
below	是否位于底部功能区域	boolean	false

`default`

默认菜单。提供默认样式，适用于进行编程式导航或其它功能性操作。

属性	说明	类型	默认值
name	名称	string / ReactNode	-
icon	图标，可传 `uyd` 的 `type` 、`iconfont iconfont-xxx` 或自定义图标组件	string / ReactNode	-
footer	页脚，可对子菜单添加额外内容	ReactNode	-

`link`

导航菜单。与默认菜单类似，通过 Link 或 a 组件渲染菜单，适用于进行路由跳转等操作。

属性	说明	类型	默认值
name	名称	string / ReactNode	-
icon	图标，可传 `uyd` 的 `type` 、`iconfont iconfont-xxx` 或自定义图标组件	string / ReactNode	-
path	路径，值为绝对路径时将渲染为 `a`	string	-
target	`Link` 或 `a` 的 `target` 属性	string	-
footer	页脚，可对子菜单添加额外内容	ReactNode	-

`component`

组件菜单。完全自定义的子菜单，适用于与业务有关的特殊组件。

属性	说明	类型	默认值
component	自定义组件	ReactNode	-

`sub`

内嵌菜单。具有展开/关闭的效果，适用于同类子菜单的分组。

属性	说明	类型	默认值
name	名称	string / ReactNode	-
icon	图标，可传 `uyd` 的 `type` 、`iconfont iconfont-xxx` 或自定义图标组件	string / ReactNode	-
path	路径，与 `children` 中导航菜单的 `path` 进行拼接	string	-
children	子菜单的配置描述	ItemProps[]	-

`group`

分组菜单。也适用于分组的场景，但不具有图标和展开/关闭的效果，且容器收起时，标题将会隐藏。

属性	说明	类型	默认值
name	名称	string / ReactNode	-
path	路径，与 `children` 中导航菜单的 `path` 进行拼接	string	-
children	子菜单的配置描述	ItemProps[]	-

Current Tags

0.4.0-beta.5 ... beta (8 years ago)
1.0.10 ... latest (6 years ago)

101 Versions

5.0.4 ... 3 years ago
5.0.3 ... 3 years ago
5.0.1 ... 3 years ago
5.0.0 ... 3 years ago
3.0.0-alpha.4 ... 3 years ago
3.0.0-alpha.3 ... 3 years ago
3.0.0-alpha.2 ... 3 years ago
3.0.0-alpha.1 ... 3 years ago
3.0.0-alpha.0 ... 3 years ago
1.1.7 ... 4 years ago
2.0.1 ... 4 years ago
2.0.0 ... 4 years ago
1.1.2-alpha.25 ... 4 years ago
1.1.2-alpha.24 ... 4 years ago
1.1.6 ... 4 years ago
1.1.2-alpha.23 ... 4 years ago
1.1.2-alpha.22 ... 4 years ago
1.1.2-alpha.21 ... 4 years ago
1.1.2-alpha.20 ... 4 years ago
1.1.4 ... 4 years ago
1.1.3 ... 4 years ago
1.1.2-alpha.19 ... 4 years ago
1.1.2-alpha.18 ... 4 years ago
1.1.2 ... 4 years ago
1.1.2-alpha.17 ... 5 years ago
1.1.2-alpha.16 ... 5 years ago
1.1.2-alpha.15 ... 5 years ago
1.1.2-alpha.14 ... 5 years ago
1.1.2-alpha.13 ... 5 years ago
1.1.2-alpha.12 ... 5 years ago
1.1.2-alpha.11 ... 5 years ago
1.1.2-alpha.10 ... 5 years ago
1.1.2-alpha.9 ... 5 years ago
1.1.2-alpha.8 ... 5 years ago
1.1.2-alpha.7 ... 5 years ago
1.1.2-alpha.6 ... 5 years ago
1.1.2-alpha.5 ... 5 years ago
1.1.2-alpha.4 ... 5 years ago
1.1.2-alpha.3 ... 5 years ago
1.1.2-alpha.2 ... 5 years ago
1.1.2-alpha.1 ... 5 years ago
1.1.2-alpha.0 ... 5 years ago
1.1.1-alpha.0 ... 5 years ago
1.1.0-alpha.0 ... 5 years ago
5.1.0-beta.26 ... 5 years ago
5.1.0-beta.25 ... 5 years ago
5.1.0-beta.24 ... 5 years ago
5.1.0-beta.23 ... 5 years ago
5.1.0-beta.22 ... 5 years ago
5.1.0-beta.21 ... 5 years ago
5.1.0-beta.20 ... 5 years ago
5.1.0-beta.19 ... 5 years ago
5.1.0-beta.18 ... 5 years ago
5.1.0-beta.17 ... 5 years ago
1.0.20-alpha.0 ... 5 years ago
1.0.19-alpha.0 ... 5 years ago
1.0.18-alpha.0 ... 5 years ago
1.0.17-alpha.0 ... 5 years ago
1.0.16-alpha.0 ... 5 years ago
1.0.15-alpha.0 ... 5 years ago
1.0.13 ... 5 years ago
1.0.12 ... 5 years ago
1.0.11 ... 5 years ago
0.1.0 ... 8 years ago
0.2.0 ... 8 years ago
0.2.1 ... 8 years ago
0.2.2 ... 8 years ago
0.3.0 ... 8 years ago
0.3.1 ... 8 years ago
0.3.2 ... 8 years ago
0.4.0-beta.1 ... 8 years ago
0.4.0-beta.2 ... 8 years ago
0.4.0-beta.3 ... 8 years ago
0.4.0-beta.4 ... 8 years ago
0.4.0-beta.5 ... 8 years ago
0.4.0 ... 8 years ago
0.4.1 ... 8 years ago
0.4.3 ... 7 years ago
0.4.4 ... 7 years ago
0.4.5 ... 7 years ago
0.4.6 ... 7 years ago
0.4.7 ... 7 years ago
0.4.8 ... 7 years ago
0.4.9 ... 7 years ago
0.4.10 ... 7 years ago
0.4.11 ... 7 years ago
1.0.0 ... 7 years ago
1.0.1 ... 7 years ago
1.0.2 ... 7 years ago
1.0.3 ... 7 years ago
1.0.4 ... 7 years ago
1.0.5 ... 7 years ago
1.0.6 ... 7 years ago
1.0.7 ... 7 years ago
1.0.8 ... 6 years ago
1.0.9 ... 6 years ago
0.4.2 ... 8 years ago
1.0.10 ... 6 years ago
0.4.12 ... 7 years ago
0.3.3 ... 8 years ago
0.2.3 ... 8 years ago