DropdownMenu 下拉菜单

基于 reka-ui 的组合式下拉菜单，支持普通项、复选项、单选组、子菜单等。

何时使用

  • 需要以菜单形式承载一组操作命令时。
  • 需要收纳次要操作、避免界面拥挤时。

基础用法

<script setup lang="ts">
import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, Button,
} from "@reglow/reui";
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">打开菜单</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>我的账户</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>个人资料</DropdownMenuItem>
      <DropdownMenuItem>设置</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>退出登录</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

导入

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup,
  DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator,
  DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuSub,
  DropdownMenuSubTrigger, DropdownMenuSubContent,
} from "@reglow/reui";

组成

组件说明
DropdownMenu根容器（reka DropdownMenuRoot props）
DropdownMenuTrigger / DropdownMenuContent触发器 / 菜单内容
DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioGroup / DropdownMenuRadioItem菜单项
DropdownMenuLabel / DropdownMenuSeparator / DropdownMenuShortcut标签 / 分隔线 / 快捷键
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent子菜单
Breadcrumb 面包屑
显示当前页面在系统层级结构中的位置，并能向上返回。
Tabs 标签页
Tabs 标签页