Menu component
npm install @uiw/react-menuMenu 菜单
===




为页面和功能提供导航的菜单列表。
``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
`
`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 = (
export default function Demo() {
return (
$3
通过设置
overlayProps={ isOpen: true },让菜单默认展开。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Row, Col } from 'uiw';export default function Demo() {
return (
|
)
}
`$3
内建了两套主题
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 (
checked
style={{ marginRight: 10 }}
onChange={(e) => {
this.setState({ theme: e.target.checked ? 'dark' : 'light' });
}}
/>
|
|
);
}
}
export default Demo;
`$3
包括点击选中效果,事件等操作,完整的实例展示。
`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 (
checked={this.state.theme === 'dark'}
style={{ marginRight: 10 }}
onChange={(e) => {
this.setState({ theme: e.target.checked ? 'dark' : 'light' });
}}
/>
|
|
);
}
}export default Demo;
`$3
内嵌菜单可以被缩起/展开,需要
SubMenu 的参数 collapse 和 inlineCollapsed 配合使用。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Menu, Row, Col, Icon, Button, Switch } from 'uiw';const menusData = [
{ 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: '标签名称' },
],
},
{ 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: '添加文件夹' },
],
},
],
},
];
export default function Demo() {
const [theme, setTheme] = React.useState('dark');
const [collapse, setCollapse] = React.useState(false);
const menuRef = React.useRef();
function onClickItem() {
console.log(';;;;>>>')
}
function renderMenu(menus) {
const items = [];
menus.forEach((item, key) => {
if (item.childrend) {
items.push(
collapse={collapse}
>
{renderMenu(item.childrend)}
);
} else if (item.divider) {
items.push( );
} else {
items.push(
onClick={onClickItem.bind(this, item.key)}
key={key}
icon={item.icon}
text={item.label}
/>
);
}
});
return items;
}
return (
size="large"
data-checked="light"
data-unchecked="dark"
checked={theme === 'dark'}
style={{ marginLeft: 10, marginBottom: 10, display: 'inline-block' }}
onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}
/>
theme={theme}
ref={menuRef}
inlineCollapsed={collapse}
inlineIndent={13}
bordered
// style={{ maxWidth: 200 }}
>
{renderMenu(menusData)}
)
}
`Menu.Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| className | 设置类的名称 | String | - |
| style | 元素的行内样式 | Object | - |
| inlineIndent | 菜单缩进宽度 | Number |
10 |
| theme | 主题颜色 | Enum{light, dark} | - |
| bordered | 是否有边框 | Boolean | false |
| inlineCollapsed | 菜单是否收起状态 | Boolean | false |
Menu.Item.Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| icon | 菜单图标
的 type 属性 | ReactNode/String | - |
| text | 菜单标题内容 | ReactNode | - |
| addonAfter | 菜单标题后面插入内容 | ReactNode | - |
| ~~isSubMenuItem~~ | 不可用,SubMenu 组件传递给 Item 组件的标记属性,这是一个内部参数。 | Boolean | - |
| tagName | 设置子节点标签名,默认 标签,也可以指定路由 | String | a |
| active | 激活选中状态 | Boolean | false |
| disabled | 禁用状态 | Boolean | false |其它参数可根据
tagName 来设置,默认 标签时,可设置 href="https://wwww.google.com" 或者 target="_blank" 等参数,你可以设置 react-router-dom 路由 ,例如:`jsx
import { Menu } from 'uiw';
import { Link } from 'react-router-dom';const Demo = () => {
return (
)
}
`Menu.SubMenu.Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| icon | 菜单图标
的 type 属性 | String | - |
| text | 菜单标题内容 | ReactNode | - |
| disabled | 禁用状态 | Boolean | false |
| collapse | 默认子菜单是 OverlayTrigger 的弹出层,通过设置 collapse={true} 变为~~折叠~~(弹出框式 @v4.2.0+)菜单 | Boolean | false |
| overlayProps | 对象将传递到 OverlayTrigger 组件,修改部分参数,相关参数参考 OverlayTrigger` | Object | - |Menu.Divider.Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| className | 设置类的名称 | String | - |
| style | 元素的行内样式 | Object | - |
| title | 标题 | String | - |