菜单 Menu

<button class="xxd-btn" data-xxd-menu="m1">更多<i data-xxd-icon="ChevronDown" data-size="14"></i></button>
<div class="xxd-menu" id="m1" role="menu" popover>
  <button class="xxd-menu__item" role="menuitem"><i data-xxd-icon="Pen" data-size="14"></i>重命名<span class="xxd-menu__kbd">F2</span></button>
  <button class="xxd-menu__item" role="menuitem" data-submenu="m1-export" aria-haspopup="menu"><i data-xxd-icon="Download" data-size="14"></i>导出为</button>
  <div class="xxd-menu" id="m1-export" role="menu" popover="manual">
    <button class="xxd-menu__item" role="menuitem">Markdown</button>
    <button class="xxd-menu__item" role="menuitem">图片（PNG）</button>
  </div>
  <div class="xxd-menu__sep" role="separator"></div>
  <div class="xxd-menu__label">排序</div>
  <div role="group" aria-label="排序">
    <button class="xxd-menu__item" role="menuitemradio" aria-checked="true">最新在前</button>
    <button class="xxd-menu__item" role="menuitemradio" aria-checked="false">最早在前</button>
  </div>
  <button class="xxd-menu__item" role="menuitemcheckbox" aria-checked="true">智能标点</button>
  <div class="xxd-menu__sep" role="separator"></div>
  <button class="xxd-menu__item" role="menuitem" data-tone="danger"><i data-xxd-icon="Trash2" data-size="14"></i>删除</button>
</div>

export function MenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger render={<Button>更多</Button>} />
      <DropdownMenu.Content>
        <DropdownMenu.Item>重命名</DropdownMenu.Item>
        <DropdownMenu.Item>复制 Markdown</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item variant="danger">删除</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}