zarm-web
Version:
基于 React 的桌面端UI库
254 lines (227 loc) • 8.2 kB
Markdown
## Menu 导航菜单
为侧边栏或下拉框等组件提供导航菜单列表。
### 水平导航
设置mode属性为horizontal
:::demo 可以给每一个Menu.Item设置key，并通过defaultSelectedKeys设置默认值
```js
render() {
return (
<Menu mode="horizontal" defaultSelectedKeys={['a']}>
<Menu.Item key="a">意健险</Menu.Item>
<Menu.Item key="b">健康险个险</Menu.Item>
<Menu.Item key="c">雇主责任险</Menu.Item>
<Menu.Item key="d">运营后台管理</Menu.Item>
<Menu.Item key="e">公共功能</Menu.Item>
<Menu.Item key="f">询报价</Menu.Item>
</Menu>
)
}
```
:::
### 侧边导航
默认的inline菜单模式
:::demo
```js
render() {
const wrapperStyle = {
width: 238,
border: '1px solid #e3e3e3'
}
return (
<div style={wrapperStyle}>
<Menu>
<Menu.SubMenu title="新契约">
<Menu.Item>投保单复核</Menu.Item>
<Menu.Item>在线投保单管理</Menu.Item>
<Menu.Item>投保单录入</Menu.Item>
<Menu.Item>新增计划</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="核保">
<Menu.Item>核保权限定义</Menu.Item>
<Menu.Item>核保权限分配</Menu.Item>
<Menu.Item>规则配置</Menu.Item>
<Menu.Item>人工核保</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="批改">
<Menu.Item>批改新增</Menu.Item>
<Menu.Item>批改复核</Menu.Item>
<Menu.Item>批改回退</Menu.Item>
<Menu.Item>批改共享池</Menu.Item>
</Menu.SubMenu>
</Menu>
</div>
)
}
```
:::
### 多层嵌套
SubMenu内可以继续嵌套SubMenu
:::demo 理赔子菜单下有理赔工作流子菜单
```js
constructor(props) {
super(props)
this.state = {
collapse: false
}
}
toggleCollapse(){
this.setState({ collapse: !this.state.collapse })
}
render() {
const wrapperStyle = {
width: 256,
}
return (
<div>
<div style={wrapperStyle}>
<Button theme="primary" onClick={this.toggleCollapse.bind(this)} style={{ marginBottom: 16 }}>切换</Button>
<Menu inlineCollapsed={this.state.collapse}>
<Menu.SubMenu title={<span><Icon type="user-fill" /><span>理赔</span></span>}>
<Menu.Item><span>报案</span></Menu.Item>
<Menu.Item><span>任务分配</span></Menu.Item>
<Menu.SubMenu title={<React.Fragment><span>理赔工作流</span></React.Fragment>}>
<Menu.Item><span>休假维护</span></Menu.Item>
<Menu.Item><span>时效维护</span></Menu.Item>
</Menu.SubMenu>
</Menu.SubMenu>
<Menu.SubMenu title={<span><Icon type="user" /><span>新契约</span></span>}>
<Menu.Item><span>投保单复核</span></Menu.Item>
<Menu.Item><span>在线投保单管理</span></Menu.Item>
<Menu.Item><span>投保单录入</span></Menu.Item>
<Menu.Item><span>新增计划</span></Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title={<span><Icon type="folder-fill" /><span>核保</span></span>}>
<Menu.Item><span>核保权限定义</span></Menu.Item>
<Menu.Item><span>核保权限分配</span></Menu.Item>
<Menu.Item><span>规则配置</span></Menu.Item>
<Menu.Item><span>人工核保</span></Menu.Item>
</Menu.SubMenu>
<Menu.Item><Icon type="folder" /><span>批改</span></Menu.Item>
</Menu>
</div>
</div>
)
}
```
:::
### 深色主题
通过theme属性设置菜单颜色主题
:::demo
```js
render() {
const wrapperStyle = {
width: 238,
border: '1px solid #e3e3e3',
backgroundColor: '#001529'
}
return (
<div style={wrapperStyle}>
<Menu theme="dark">
<Menu.SubMenu title="新契约">
<Menu.Item>投保单复核</Menu.Item>
<Menu.Item>在线投保单管理</Menu.Item>
<Menu.Item>投保单录入</Menu.Item>
<Menu.Item>新增计划</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="核保">
<Menu.Item>核保权限定义</Menu.Item>
<Menu.Item>核保权限分配</Menu.Item>
<Menu.Item>规则配置</Menu.Item>
<Menu.Item>人工核保</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="批改">
<Menu.Item>批改新增</Menu.Item>
<Menu.Item>批改复核</Menu.Item>
<Menu.Item>批改回退</Menu.Item>
<Menu.Item>批改共享池</Menu.Item>
</Menu.SubMenu>
</Menu>
</div>
)
}
```
:::
### 只展开一个子菜单
可以通过openKeys属性控制展开项
:::demo 可通过defaultOpenKeys设置默认展开项，通过onOpenChange回调设置openKeys
```js
constructor(props) {
super(props);
this.state = {
openKeys: ['a']
}
}
onOpenChange(openKeys) {
const lastKey = openKeys.pop();
this.setState({
openKeys: [lastKey]
});
}
render() {
const wrapperStyle = {
width: 238,
border: '1px solid #e3e3e3',
backgroundColor: '#001529'
}
const { openKeys } = this.state;
return (
<div style={wrapperStyle}>
<Menu
theme="dark"
openKeys={openKeys}
defaultOpenKeys={['a']}
onOpenChange={(keys) => this.onOpenChange(keys)}
>
<Menu.SubMenu title="新契约" key="a">
<Menu.Item>投保单复核</Menu.Item>
<Menu.Item>在线投保单管理</Menu.Item>
<Menu.Item>投保单录入</Menu.Item>
<Menu.Item>新增计划</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="核保" key="b">
<Menu.Item>核保权限定义</Menu.Item>
<Menu.Item>核保权限分配</Menu.Item>
<Menu.Item>规则配置</Menu.Item>
<Menu.Item>人工核保</Menu.Item>
</Menu.SubMenu>
<Menu.SubMenu title="批改" key="c">
<Menu.Item>批改新增</Menu.Item>
<Menu.Item>批改复核</Menu.Item>
<Menu.Item>批改回退</Menu.Item>
<Menu.Item>批改共享池</Menu.Item>
</Menu.SubMenu>
</Menu>
</div>
)
}
```
:::
### Menu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| mode | 菜单模式 | string | horizontal / inline | inline |
| theme | 颜色主题 | string | light / dark | dark |
| defaultOpenKeys | 默认打开的子菜单keys | string[] | - | [] |
| defaultSelectedKeys | 默认选中的菜单项keys | string[] | - | [] |
| openKeys | 打开的子菜单keys | string[] | - | - |
| selectedKeys | 选中的菜单项keys | string[] | - | - |
| inlineIndent | inline模式菜单每一级子菜单的缩进距离 | number | - | 24 |
### Menu Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| onOpenChange | 子菜单展开收缩时候触发的事件 | openKeys |
### Menu.SubMenu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 子菜单标题 | string | - | - |
| key | 子菜单的key值 | string | - | - |
### Menu.Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| disabled | 是否禁用 | boolean | - | false |
| key | 菜单项的key值 | string | - | - |
### Menu.Item Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| onClick | 点击菜单项的时候触发的事件 | itemKey |
| onDoubleClick | 双击菜单项的时候触发的事件 | - |