Menu 菜单

Menu 菜单

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

API

菜单

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
selectedKeys	当前选中的菜单项, 设置此属性，组件的选中变为受控状态	Array/ReactNode	-
defaultSelectedKeys	初始化选中的菜单项，只在组件初次render的时候生效	Array/ReactNode	[]
selectMode	菜单选择的模式，支持单选和多选可选值:'single', 'multiple'	Enum	-
openKeys	当前打开的菜单项，设置此属性，组件的打开变为受控状态	Array/ReactNode	-
defaultOpenKeys	初始化打开的菜单项，只在组件初次render的时候生效	Array/ReactNode	[]
openMode	子菜单同时打开模式，是多个还是一个可选值:'single', 'multiple'	Enum	'multiple'
shallowSelect	如果此属性为true，表明只会选中第一级的菜单	Boolean	-
onSelect	选中/取消选中了任意MenuItem签名:Function(selectedKeys: Array, menuItem: MenuItem, meta: Object) => void参数:selectedKeys: {Array} 选中的菜单的keymenuItem: {MenuItem} 当前点击的菜单项的实例meta: {Object} 选中菜单项的上下级关系	Function	() => {}
onDeselect	取消选中的菜单项签名:Function(selectedKey: String) => void参数:selectedKey: {String} 取消选中的菜单项的key	Function	() => {}
onClick	点击菜单项触发的事件签名:Function(selectedKeys: Array, menuItem: MenuItem, meta: Object) => void参数:selectedKeys: {Array} 点击的菜单项的keymenuItem: {MenuItem} 当前点击的菜单项的实例meta: {Object} 选中菜单项的上下级关系	Function	() => {}
onOpen	打开子菜单的时候触发的事件签名:Function(openKeys: Array) => void参数:openKeys: {Array} 打开的子菜单的key	Function	() => {}
hasIcon	是否带有菜单的图标	Boolean	false
indentSize	级联菜单下面缩进的尺寸	Number	20
header	配置菜单的头部	any	-
footer	配置菜单的底部	any	-
multipleCol	是否启用多列模式	Boolean	false
autoFocusFirstItem	是否让第一个菜单自动获取焦点	Boolean	false
autoFocus	是否启用设置焦点功能	Boolean	true
focusedKey	焦点项索引值	String	-
direction	菜单的方向可选值:'ver', 'hoz'	Enum	'ver'

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
helper	显示在菜单右侧的帮助文本，通常用于一些附加信息	String	null
disabled	禁用当前菜单项, 被禁用不会触发事件, 也无法选中Checkbox/Radio	Boolean	false
onClick	点击了菜单项触发的事件签名:Function(key: String, e: Event) => void参数:key: {String} 当前菜单项的key值e: {Event} DOM事件	Function	() => {}
needIndent	是否显示缩进	Boolean	true
checked	当前的菜单项是否被选中, 优先级比Menu传入的selectedKeys要高	Boolean	-
onChange	选择被改变的时候触发的事件签名:Function(checked: Boolean) => void参数:checked: {Boolean} 是否选中	Function	() => {}

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
label	分组的标签	any	'menu-group'

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
helper	显示在菜单右侧的帮助文本，通常用于一些附加信息	String	null
disabled	禁用当前菜单项, 被禁用不会触发事件, 也无法选中Checkbox/Radio	Boolean	false
selected	当前的菜单项是否被选中, 优先级比Menu传入的selectedKeys要高	Boolean	-
onClick	点击了菜单项触发的事件签名:Function(key: String, e: Event) => void参数:key: {String} 当前菜单项的key值e: {Event} DOM事件	Function	() => {}
hasSelectedIcon	是否显示选中图标	Boolean	true
needIndent	是否显示缩进	Boolean	true

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
disabled	禁用当前菜单项, 被禁用不会触发事件	Boolean	false
label	菜单项的标签	any	'popup-item'
autoWidth	是否自动让弹出层的宽度和菜单项保持一致，逻辑是如果弹出层的宽度比菜单项小的话和菜单项保持一致，如果宽度大于菜单项则不做处理	Boolean	false

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
helper	显示在菜单右侧的帮助文本，通常用于一些附加信息	String	null
disabled	禁用当前菜单项, 被禁用不会触发事件, 也无法选中Checkbox/Radio	Boolean	false
onClick	点击了菜单项触发的事件签名:Function(key: String, e: Event) => void参数:key: {String} 当前菜单项的key值e: {Event} DOM事件	Function	() => {}
needIndent	是否显示缩进	Boolean	true
checked	当前的菜单项是否被选中, 优先级比Menu传入的selectedKeys要高	Boolean	-
onChange	选择被改变的时候触发的事件签名:Function(checked: Boolean) => void参数:checked: {Boolean} 是否选中	Function	() => {}

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
label	子菜单的标签	any	'sub-item'
visible	设置子菜单的显示状态	Boolean	-
mode	设置子菜单表现的形式可选值:'inline', 'popup'	Enum	'inline'
triggerType	设置子菜单显示触发的类型可选值:'click', 'hover'	Enum	'click'
selectable	设置子菜单的label是否可以被选中	Boolean	false
align	设置子菜单的跟随类型可选值:'outside', 'follow'	Enum	'follow'

方法

签名:Function() => mixed返回值:{mixed} null

代码示例

基本

最简单的用法

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onClick={onClick} className="customize-limit">
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item disabled key="2">
      Option 2
    </Menu.Item>
    <Menu.Divider key="d" />
    <Menu.SubMenu label="Sub Menu">
      <Menu.Item>Option 3</Menu.Item>
    </Menu.SubMenu>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

分组

分组菜单

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onClick={onClick} className="customize-limit">
    <Menu.Group label="Group 1" key="xxx">
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
      <Menu.Item key="3">Option 3</Menu.Item>
    </Menu.Group>
    <Menu.Group label="Group 2" key="xyz">
      <Menu.Item key="12">Option 1</Menu.Item>
      <Menu.Item key="22">Option 2</Menu.Item>
      <Menu.Item key="32">Option 3</Menu.Item>
    </Menu.Group>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

头尾

可以设置菜单的头尾

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu
    onClick={onClick}
    className="customize-limit"
    header={<h3>分组菜单</h3>}
    footer={<h3>菜单尾部</h3>}
  >
    <Menu.Item key="1" helper="CTRL+P">
      Option 1
    </Menu.Item>
    <Menu.Item key="2">Option 2</Menu.Item>
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}
.customize-limit h3 {
    padding-left:10px;
    font-size:14px;
    color:#666;
    margin:0;
}

Checkbox模式

多选菜单 Checkbox 模式

查看源码在线预览

import { Menu } from "@icedesign/base";
const onSelect = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <div>
    <Menu onSelect={onSelect} className="customize-limit">
      <Menu.CheckboxItem key="1">Option 1</Menu.CheckboxItem>
      <Menu.CheckboxItem disabled key="2">
        Option 2
      </Menu.CheckboxItem>
      <Menu.Divider key="5" />
      <Menu.CheckboxItem key="3">Option 3</Menu.CheckboxItem>
      <Menu.CheckboxItem key="4">Option 4</Menu.CheckboxItem>
    </Menu>
  </div>,
  mountNode
);

.customize-limit {
    width: 200px;
}

普通多选

多选菜单

查看源码在线预览

import { Menu } from "@icedesign/base";
const onSelect = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onSelect={onSelect} selectMode="multiple" className="customize-limit">
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item disabled key="2">
      Option 2
    </Menu.Item>
    <Menu.Divider key="5" />
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

外部弹出菜单

使用 PopupItem 弹出子菜单，与 SubMenumode=popup 的区别是子菜单会渲染到追加到 body 尾部的外部节点中

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onClick={onClick} className="customize-limit">
    <Menu.PopupItem label="Popup Item 1" key="xxx">
      <Menu>
        <Menu.Item key="1">Option 1</Menu.Item>
        <Menu.Item key="2">Option 2</Menu.Item>
      </Menu>
    </Menu.PopupItem>
    <Menu.PopupItem label="Popup Item 2" key="yyy">
      <Menu>
        <Menu.Item key="3">Option 3</Menu.Item>
      </Menu>
    </Menu.PopupItem>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

Radio模式

单选菜单 Radio 模式

查看源码在线预览

import { Menu } from "@icedesign/base";
const onSelect = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onSelect={onSelect} className="customize-limit">
    <Menu.RadioItem key="1">Option 1</Menu.RadioItem>
    <Menu.RadioItem disabled key="2">
      Option 2
    </Menu.RadioItem>
    <Menu.Divider key="5" />
    <Menu.RadioItem key="3">Option 3</Menu.RadioItem>
    <Menu.RadioItem key="4">Option 4</Menu.RadioItem>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

单选

单选菜单

查看源码在线预览

import { Menu } from "@icedesign/base";
const onSelect = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onSelect={onSelect} selectMode="single" className="customize-limit">
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item disabled key="2">
      Option 2
    </Menu.Item>
    <Menu.Divider key="5" />
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

内联菜单

SubMenu 的内联模式

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onClick={onClick} openMode="single" className="customize-limit">
    <Menu.SubMenu label="Sub Menu 1" key="xxx">
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
    </Menu.SubMenu>
    <Menu.SubMenu label="Sub Menu 2" key="yyy">
      <Menu.Item key="3">Option 3</Menu.Item>
    </Menu.SubMenu>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

弹出菜单

SubMenu 的弹出模式，与 PopupItem 的区别是子菜单会被渲染在内容区域里

查看源码在线预览

import { Menu } from "@icedesign/base";
const onClick = (...args) => {
  console.log(...args);
};
ReactDOM.render(
  <Menu onClick={onClick} openMode="single" className="customize-limit">
    <Menu.SubMenu mode="popup" label="Sub Menu 1" key="xxx">
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
    </Menu.SubMenu>
    <Menu.SubMenu mode="popup" label="Sub Menu 2" key="yyy">
      <Menu.Item key="3">Option 3</Menu.Item>
    </Menu.SubMenu>
  </Menu>,
  mountNode
);

.customize-limit {
    width: 200px;
}

子菜单标签可选

查看源码在线预览

import { Radio, Menu } from "@icedesign/base";
const onSelect = (...args) => {
  console.log(...args);
};
class App extends React.Component {
  state = {
    subMenuSelectable: false
  };
  toggleSubMenuSelectable = value => {
    this.setState({
      subMenuSelectable: value === "true"
    });
  };
  render() {
    const { subMenuSelectable } = this.state;
    return (
      <div>
        <div className="button-wraper">
          <Radio.Group
            shape="button"
            size="large"
            value={subMenuSelectable ? "true" : "false"}
            onChange={this.toggleSubMenuSelectable}
          >
            <Radio value="false">子菜单标签不可选</Radio>
            <Radio value="true">子菜单标签可选</Radio>
          </Radio.Group>
        </div>
        <Menu
          selectMode="single"
          onSelect={onSelect}
          defaultOpenKeys={["4", "5"]}
          openMode="multiple"
          className="customize-limit"
        >
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.SubMenu
            key="4"
            label="Sub Menu 1"
            selectable={this.state.subMenuSelectable}
          >
            <Menu.Item key="4-1">Option 1</Menu.Item>
            <Menu.Item key="4-2">Option 2</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu
            key="5"
            label="Sub Menu 2"
            selectable={this.state.subMenuSelectable}
          >
            <Menu.Item key="5-1">Option 1</Menu.Item>
            <Menu.Item key="5-2">Option 2</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.button-wraper {
    margin: 0 0 20px 0;
}
.customize-limit{
    width:200px;
}

Menu 菜单

安装方法

API

菜单

Menu.CheckboxItem

Menu.Divider

Menu.Group

Menu.Item

Menu.PopupItem

Menu.RadioItem

Menu.SubMenu

方法

代码示例

相关区块

暂无相关区块