Menu 菜单

使用场景#

为页面或区块提供上下文菜单，或是收纳操作元素。

示例#

基本用法#

inline

function Basic() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={[
        { key: '1', label: '选项 1' },
        { key: '2', label: '选项 2', disabled: true },
        { key: '3', label: 'Option 2' },
      ]}
      onItemClick={(key, detail) => {
        console.log('YOUR click', key, detail);
      }}
    />
  );
}

function Basic() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={[
        { key: '1', label: '选项 1' },
        { key: '2', label: '选项 2', disabled: true },
        { key: '3', label: 'Option 2' },
      ]}
      onItemClick={(key, detail) => {
        console.log('YOUR click', key, detail);
      }}
    />
  );
}

分组与子菜单#

noInline

const menuItems = [
  { key: '1', label: '选项 1', selected: true, helper: 'Ctrl+P' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '3', type: 'divider' },
  { key: '4', label: '动物园', icon: 'layout' },
  {
    key: 'zoo',
    type: 'submenu',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝', selected: true },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        type: 'submenu',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    type: 'group',
    helper: '1.12 盛大开业',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子', selected: true },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        type: 'submenu',
        label: '小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function GroupAndSubMenu() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={menuItems}
      onItemClick={(key, detail) => {
        console.log('YOUR click', key, detail);
      }}
    />
  );
}

render(<GroupAndSubMenu />)

const menuItems = [
  { key: '1', label: '选项 1', selected: true, helper: 'Ctrl+P' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '3', type: 'divider' },
  { key: '4', label: '动物园', icon: 'layout' },
  {
    key: 'zoo',
    type: 'submenu',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝', selected: true },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        type: 'submenu',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    type: 'group',
    helper: '1.12 盛大开业',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子', selected: true },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        type: 'submenu',
        label: '小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function GroupAndSubMenu() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={menuItems}
      onItemClick={(key, detail) => {
        console.log('YOUR click', key, detail);
      }}
    />
  );
}

render(<GroupAndSubMenu />)

多选#

selectedKeys: 1,3

inline

function MultiSelect() {
  const [selectedKeys, onSelect] = useState(['1', '3']);

  return (
    <div>
      <p>selectedKeys: {selectedKeys.join(',')}</p>
      <Menu
        style={{ width: 200 }}
        dataSource={[
          { key: '1', label: '选项 1 ', helper: 'Ctrl+P' },
          { key: '2', label: '选项 2' },
          { key: '3', label: 'Option 3' },
        ]}
        selectMode="multiple"
        selectedKeys={selectedKeys}
        onSelect={onSelect}
      />
    </div>
  );
}

function MultiSelect() {
  const [selectedKeys, onSelect] = useState(['1', '3']);

  return (
    <div>
      <p>selectedKeys: {selectedKeys.join(',')}</p>
      <Menu
        style={{ width: 200 }}
        dataSource={[
          { key: '1', label: '选项 1 ', helper: 'Ctrl+P' },
          { key: '2', label: '选项 2' },
          { key: '3', label: 'Option 3' },
        ]}
        selectMode="multiple"
        selectedKeys={selectedKeys}
        onSelect={onSelect}
      />
    </div>
  );
}

非受控单选#

inline

function UncontrolledSingleSelect() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={[
        { key: '1', label: '选项 1 ', helper: 'Ctrl+P' },
        { key: '2', label: '选项 2' },
        { key: '3', label: 'Option 3' },
      ]}
      selectMode="single"
      defaultSelectedKeys={['1']}
      onSelect={(nextKeys, detail) => {
        console.log('onSelect', { nextKeys, detail });
      }}
    />
  );
}

function UncontrolledSingleSelect() {
  return (
    <Menu
      style={{ width: 200 }}
      dataSource={[
        { key: '1', label: '选项 1 ', helper: 'Ctrl+P' },
        { key: '2', label: '选项 2' },
        { key: '3', label: 'Option 3' },
      ]}
      selectMode="single"
      defaultSelectedKeys={['1']}
      onSelect={(nextKeys, detail) => {
        console.log('onSelect', { nextKeys, detail });
      }}
    />
  );
}

下拉菜单#

noInline

const menuItems = [
  { key: '1', label: '选项 1', selected: true, helper: 'Ctrl+P' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '3', type: 'divider' },
  { key: '4', label: '动物园', icon: 'layout' },
  {
    key: 'zoo',
    type: 'submenu',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝', selected: true },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        type: 'submenu',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    type: 'group',
    helper: '1.12 盛大开业',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子', selected: true },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        type: 'submenu',
        label: '小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function DropdownMenu() {
  return (
    <Popup target={<Button>更多操作</Button>} hasArrow>
      <Menu
        autoDismissPopup
        dataSource={menuItems}
        onItemClick={(key) => {
          console.log('onItemClick', key);
        }}
      />
    </Popup>
  );
}

render(<DropdownMenu />)

const menuItems = [
  { key: '1', label: '选项 1', selected: true, helper: 'Ctrl+P' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '3', type: 'divider' },
  { key: '4', label: '动物园', icon: 'layout' },
  {
    key: 'zoo',
    type: 'submenu',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝', selected: true },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        type: 'submenu',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    type: 'group',
    helper: '1.12 盛大开业',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子', selected: true },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        type: 'submenu',
        label: '小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function DropdownMenu() {
  return (
    <Popup target={<Button>更多操作</Button>} hasArrow>
      <Menu
        autoDismissPopup
        dataSource={menuItems}
        onItemClick={(key) => {
          console.log('onItemClick', key);
        }}
      />
    </Popup>
  );
}

render(<DropdownMenu />)

API#

字段	描述
dataSource*	`MenuItem[]` 菜单项列表
defaultOpenKeys	`string[]` 默认打开的子菜单
onItemClick	`(key: string, detail: { item: MenuItem; event: MouseEvent<HTMLDivElement, MouseEvent>; }) => void` 菜单项点击回调
style	`CSSProperties`
className	`string`
子菜单
openKeys	`string[]` 当前打开的子菜单
onOpen	`Dispatch<SetStateAction<string[]>>` 子菜单打开或关闭的回调函数
autoCloseSubmenus	`boolean` = true 点击菜单项时，是否自动关闭当前所有已打开的子菜单
autoDismissPopup	`boolean` = false 点击菜单项时，是否自动关闭包含菜单的弹层；该 prop 设置为 true 时，autoCloseSubmenus 的行为将被覆盖
interactionKind	`PopupInteractionKind` = 'hover' 打开子菜单的交互方式
选择
selectMode	`"none" \| "multiple" \| "single"` = 'none' 菜单项选择模式
selectedKeys	`string[]` 选中的菜单项
onSelect	`(nextKeys: string[], detail: { item: MenuItem; event: MouseEvent<HTMLDivElement, MouseEvent>; }) => void` 选择菜单项的回调
defaultSelectedKeys	`string[]` 默认选中的菜单项