DropdownMenu 下拉菜单

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

下拉菜单用于在点击触发器后展示一系列操作选项。

何时使用

  • 需要展示一组操作命令时。
  • 空间有限需要收纳操作选项时。

导入

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@reglow/reui";

代码演示

基础用法

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

const open = ref(false);
</script>

<template>
  <DropdownMenu v-model:open="open">
    <DropdownMenuTrigger as-child>
      <Button variant="outline">打开菜单</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>新建文件</DropdownMenuItem>
      <DropdownMenuItem>复制</DropdownMenuItem>
      <DropdownMenuItem>粘贴</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

危险操作

通过 variant="destructive" 标记危险操作项。

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">操作</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>编辑</DropdownMenuItem>
      <DropdownMenuItem variant="destructive">删除</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

分组与标签

使用 DropdownMenuGroup 分组，DropdownMenuLabel 添加分组标题。

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">操作</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>文件操作</DropdownMenuLabel>
      <DropdownMenuGroup>
        <DropdownMenuItem>新建</DropdownMenuItem>
        <DropdownMenuItem>打开</DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuLabel>其他</DropdownMenuLabel>
      <DropdownMenuItem>设置</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

单选与复选

<script setup lang="ts">
import { ref } from "vue";

const selected = ref("light");
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">主题</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuRadioGroup v-model="selected">
        <DropdownMenuRadioItem value="light">浅色</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="dark">深色</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="system">跟随系统</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

子菜单

使用 DropdownMenuSub 创建子菜单。

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">操作</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>新建</DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>导出</DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem>PDF</DropdownMenuItem>
          <DropdownMenuItem>Word</DropdownMenuItem>
          <DropdownMenuItem>Excel</DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

快捷键提示

使用 DropdownMenuShortcut 显示快捷键文本。

<template>
  <DropdownMenuItem>
    复制
    <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
  </DropdownMenuItem>
</template>

API

DropdownMenu Props

参数说明类型默认值
open是否展开（v-model:open）booleanfalse
defaultOpen默认是否展开booleanfalse
modal是否模态booleantrue
dir方向"ltr" | "rtl""ltr"

DropdownMenuItem Props

参数说明类型默认值
variant样式变体"default" | "destructive""default"
inset是否缩进booleanfalse
disabled是否禁用booleanfalse
class附加类名string-

子组件

组件说明
DropdownMenuTrigger触发器，支持 as-child
DropdownMenuContent内容面板，支持 side / align / sideOffset
DropdownMenuGroup分组容器
DropdownMenuLabel分组标签
DropdownMenuSeparator分隔线
DropdownMenuShortcut快捷键文本
DropdownMenuSub子菜单容器
DropdownMenuSubTrigger子菜单触发器
DropdownMenuSubContent子菜单内容面板
DropdownMenuCheckboxItem复选项
DropdownMenuRadioGroup单选组
DropdownMenuRadioItem单选项

DropdownMenuContent Props

参数说明类型默认值
side弹出方向"top" | "right" | "bottom" | "left""bottom"
align对齐方式"start" | "center" | "end""center"
sideOffset侧边偏移number4
class附加类名string-
Breadcrumb 面包屑
显示当前页面在系统层级结构中的位置，并能向上返回。
Steps 步骤条
引导用户按照流程完成任务的导航条，支持多种样式、方向与状态。