Dropdown 下拉菜单

显示一个菜单给用户，例如一组操作或功能。

BrDropdown 基于 BrConfigProvider 实现全局主题配置（颜色/圆角/阴影/z-index 等 tokens），支持多触发方式和位置适配。

基础用法

点击触发器显示下拉菜单。

Example

触发方式

支持自定义触发元素和 Hover 触发（通过 v-model:open 控制）。

Example

位置

支持 align 和 side 属性控制弹出位置，支持 12 个不同的方向。

Example

分组与分隔线

使用 BrDropdownGroup 和 BrDropdownSeparator 对菜单项进行分组。 支持 disabled 属性禁用菜单项。

Example

主题定制

通过 BrConfigProvider 全局配置 Dropdown 的圆角、背景色、阴影等。

Example

API

BrDropdown

Prop	类型	默认值	说明
defaultOpen	boolean	false	默认是否打开。
open	boolean	undefined	受控打开状态（配合 @update:open/v-model:open 使用）。
dir	'ltr' | 'rtl'	undefined	阅读方向。
modal	boolean	true	是否为模态（禁用背景交互）。

BrDropdownTrigger

Prop	类型	默认值	说明
asChild	boolean	false	是否作为子元素渲染（此时不渲染 button 标签）。
disabled	boolean	false	是否禁用。

BrDropdownContent

Prop	类型	默认值	说明
align	'start' | 'center' | 'end'	'center'	对齐方式。
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	弹出方向。
sideOffset	number	4	侧边偏移量。
alignOffset	number	0	对齐偏移量。
avoidCollisions	boolean	true	是否避免碰撞边界。
loop	boolean	false	是否循环键盘导航。
class	string	''	自定义样式类名。

BrDropdownItem

Prop	类型	默认值	说明
disabled	boolean	false	是否禁用。
textValue	string	undefined	文本值（用于键盘搜索）。
inset	boolean	false	是否缩进（用于对齐带图标的项）。
class	string	''	自定义样式类名。

BrDropdownLabel

Prop	类型	默认值	说明
inset	boolean	false	是否缩进。