Menu 菜单组件 #

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Button,
} from '@chakra-ui/react'
import { ChevronDownIcon } from '@chakra-ui/icons'

function Example() {
  return (
    <Menu>
      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
        操作
      </MenuButton>
      <MenuList>
        <MenuItem>下载</MenuItem>
        <MenuItem>复制</MenuItem>
        <MenuItem>标记</MenuItem>
        <MenuItem>删除</MenuItem>
      </MenuList>
    </Menu>
  )
}

import { MenuGroup, MenuDivider } from '@chakra-ui/react'

<Menu>
  <MenuButton as={Button}>文件</MenuButton>
  <MenuList>
    <MenuGroup title="文件操作">
      <MenuItem>新建</MenuItem>
      <MenuItem>打开</MenuItem>
      <MenuItem>保存</MenuItem>
    </MenuGroup>
    <MenuDivider />
    <MenuGroup title="导出">
      <MenuItem>导出为 PDF</MenuItem>
      <MenuItem>导出为 Word</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

import { Icon } from '@chakra-ui/react'
import { FiEdit, FiCopy, FiTrash, FiShare } from 'react-icons/fi'

<Menu>
  <MenuButton as={Button}>操作</MenuButton>
  <MenuList>
    <MenuItem icon={<Icon as={FiEdit} />}>编辑</MenuItem>
    <MenuItem icon={<Icon as={FiCopy} />}>复制</MenuItem>
    <MenuItem icon={<Icon as={FiShare} />}>分享</MenuItem>
    <MenuItem icon={<Icon as={FiTrash} />} color="red.500">删除</MenuItem>
  </MenuList>
</Menu>

<Menu>
  <MenuButton as={Button}>编辑</MenuButton>
  <MenuList>
    <MenuItem command="⌘N">新建</MenuItem>
    <MenuItem command="⌘O">打开</MenuItem>
    <MenuItem command="⌘S">保存</MenuItem>
  </MenuList>
</Menu>

<Menu>
  <MenuButton as={Button}>操作</MenuButton>
  <MenuList>
    <MenuItem>可用项</MenuItem>
    <MenuItem isDisabled>禁用项</MenuItem>
  </MenuList>
</Menu>

function UserMenu({ user }) {
  return (
    <Menu>
      <MenuButton>
        <HStack>
          <Avatar src={user.avatar} size="sm" />
          <Text>{user.name}</Text>
          <ChevronDownIcon />
        </HStack>
      </MenuButton>
      <MenuList>
        <MenuItem>个人资料</MenuItem>
        <MenuItem>设置</MenuItem>
        <MenuDivider />
        <MenuItem color="red.500">退出登录</MenuItem>
      </MenuList>
    </Menu>
  )
}