@uiw/react-menu

Menu 菜单
===


为页面和功能提供导航的菜单列表。

``jsx
import { Menu } from 'uiw';
import { MenuItem, MenuDivider, SubMenu } from 'uiw'; // @ v4.10.0+
// or
import Menu, { MenuItem, MenuDivider, SubMenu } from '@uiw/react-menu'; // @ v4.10.0+

// Menu.Item === MenuItem
// Menu.Divider === MenuDivider
// Menu.SubMenu === SubMenu
`

$3

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, MenuItem, Row, Col } from 'uiw';

export default function Demo() {
return (




`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Popover, Button, Row, Col } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
const content = (


通过设置 overlayProps={ isOpen: true }，让菜单默认展开。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Row, Col } from 'uiw';

export default function Demo() {
return (




内建了两套主题 light、dark，默认 light。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Row, Col, Switch } from 'uiw';

class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: 'dark',
}
}
render() {
return (


`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Row, Col, Switch } from 'uiw';

class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: 'light',
menus: [
{ key: '1', icon: 'delete', label: '删除' },
{
icon: 'setting-o',
label: '选项',
childrend: [
{ key: '1-1', icon: 'dot-chart', label: '显示边栏' },
{ key: '1-2', icon: 'date', disabled: true, label: '添加日期' },
{ key: '1-3', icon: 'tags-o', label: '标签名称' },
],
},
{ divider: true },
{ key: '2', icon: 'map', label: '谷歌地图' },
{
icon: 'bar-chart',
label: '每年2019年统计报表导出',
childrend: [
{ key: '2-1', label: '统计添加文件' },
{ key: '2-2', label: '统计添加文件夹' },
{ key: '2-3', icon: 'tags-o', label: '类别', divider: true },
{
icon: 'folder-add',
label: '添加文件夹',
childrend: [
{ key: '2-3-1', label: '添加文件夹' },
{ key: '2-3-2', label: '添加文件' },
{ key: '2-3-3', label: '添加文件夹' },
],
},
],
},
],
active: '1',
}
}

onClickItem(key) {
this.setState({ active: key });
}

renderMenu(menus, k) {
const { active } = this.state;
const items = [];
menus.forEach((item, key) => {
if (item.childrend) {
items.push(
// 参数 usePortal 容易出问题
// overlayProps={{ usePortal: true }}
>
{this.renderMenu(item.childrend, ${k}${key})}

);
} else if (item.divider) {
items.push(${k}${key}} title={item.label} />);
} else {
items.push(
onClick={this.onClickItem.bind(this, item.key)}
active={active === item.key} key={${k}${key}}
icon={item.icon}
text={item.label}
/>
);
}
});
return items;
}

render() {
return (