Sheet 抽屉
新粗野主义风格的侧边面板组件，可从任意边缘滑入。基于 reka-ui 的 Dialog 原语构建。
预览
安装
pnpm dlx brutx-vue@latest add sheet用法
<script setup>
import { DialogRoot as Sheet, DialogTrigger as SheetTrigger, DialogClose as SheetClose } from 'reka-ui'
import {
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
Button,
} from 'brutx-ui-vue'
</script>
<template>
<Sheet>
<SheetTrigger as-child>
<Button variant="outline">Open Sheet</Button>
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Edit Profile</SheetTitle>
<SheetDescription>
Make changes to your profile here.
</SheetDescription>
</SheetHeader>
<div class="py-4">
<p class="text-sm">Sheet content goes here.</p>
</div>
<SheetFooter>
<SheetClose as-child>
<Button variant="outline">Cancel</Button>
</SheetClose>
<Button variant="primary">Save</Button>
</SheetFooter>
</SheetContent>
</Sheet>
</template>方向变体
| 方向 | 说明 |
|---|---|
top | 从顶部滑入 |
bottom | 从底部滑入 |
left | 从左侧滑入（最大 sm:max-w-sm） |
right | 从右侧滑入（默认，最大 sm:max-w-sm） |
<script setup>
import { DialogRoot as Sheet, DialogTrigger as SheetTrigger } from 'reka-ui'
import { SheetContent, Button } from 'brutx-ui-vue'
</script>
<template>
<Sheet>
<SheetTrigger as-child>
<Button>Open Left Sheet</Button>
</SheetTrigger>
<SheetContent side="left">
<p>Content slides in from the left.</p>
</SheetContent>
</Sheet>
</template>子组件
| 组件 | 说明 |
|---|---|
Sheet | 根原语（从 reka-ui 导入 DialogRoot 并命名为 Sheet） |
SheetTrigger | 触发原语（从 reka-ui 导入 DialogTrigger） |
SheetPortal | 传送容器原语（从 reka-ui 导入 DialogPortal） |
SheetContent | 带方向变体的面板内容，内置关闭按钮 |
SheetHeader | 头部容器 |
SheetFooter | 底部容器 |
SheetTitle | 带样式的面板标题，包装 Reka UI DialogTitle |
SheetDescription | 带样式的面板描述，包装 Reka UI DialogDescription |
SheetClose | 关闭原语（从 reka-ui 导入 DialogClose） |
Reka UI 原语
Sheet、SheetTrigger、SheetPortal 和 SheetClose 分别是从 reka-ui 导入的 DialogRoot、DialogTrigger、DialogPortal 和 DialogClose 的本地别名。下方生成 API 中的五个样式组件从 BrutxUI 导入。
Sheet 使用布尔值 open 和 v-model:open 控制打开状态，通过 update:open 发出新的布尔状态。defaultOpen 设置非受控初始状态，默认 false；modal 默认 true。默认插槽用于放置触发器与面板，并提供当前 open 状态和 close() 方法。
SheetContent 将其他属性和事件监听器传给 DialogContent。例如 openAutoFocus 可在模板中使用 @open-auto-focus 监听。内置关闭按钮使用 sheet.close 本地化文本；side="left" 时位于左上角，其余方向位于右上角。
API 参考
SheetContent
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
side | "bottom" | "left" | "right" | "top" | undefined | "right" | 面板从视口哪一侧滑入，控制定位、边框与过渡方向；left 时内置关闭按钮位于左上角，其余方向位于右上角。 |
详情声明类型NonNullable<"right" | "bottom" | "left" | "top" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/sheet/SheetContent.vue | |||
class | string | undefined | undefined | 合并到浮动内容面板的 CSS 类；其余属性和监听器通过 $attrs 传给 Reka UI DialogContent。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/sheet/SheetContent.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@openAutoFocus | [event: Event] | 通过 $attrs 转发的 Reka UI 事件，在内容打开时准备自动聚焦时触发，可调用 preventDefault() 接管聚焦。 |
详情声明类型[event: Event] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
@closeAutoFocus | [event: Event] | 通过 $attrs 转发的 Reka UI 事件，在内容关闭时准备恢复焦点时触发，可阻止默认聚焦。 |
详情声明类型[event: Event] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
@interactOutside | [event: PointerDownOutsideEvent | FocusOutsideEvent] | 通过 $attrs 转发的 Reka UI 事件，在面板外发生指针按下或焦点交互时触发，可阻止由该交互引起的关闭。 |
详情声明类型[event: PointerDownOutsideEvent | FocusOutsideEvent] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
@escapeKeyDown | [event: KeyboardEvent] | 通过 $attrs 转发的 Reka UI 事件，在顶层面板收到 Escape 按键时触发，可阻止默认关闭。 |
详情声明类型[event: KeyboardEvent] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
@pointerDownOutside | [event: PointerDownOutsideEvent] | 通过 $attrs 转发的 Reka UI 事件，在面板外按下指针时触发，可阻止默认关闭。 |
详情声明类型[event: PointerDownOutsideEvent] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
@focusOutside | [event: FocusOutsideEvent] | 通过 $attrs 转发的 Reka UI 事件，在焦点移到面板外时触发，可阻止该外部交互的默认处理。 |
详情声明类型[event: FocusOutsideEvent] 来源packages/ui/src/components/sheet/SheetContent.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 面板主体，可组合 SheetHeader、内容区域与 SheetFooter；本地化的内置关闭按钮位于内容之后。 |
详情声明类型{}来源packages/ui/src/components/sheet/SheetContent.vue | ||
SheetDescription
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 合并到 Reka UI 描述原语的 CSS 类，默认使用辅助说明文字样式。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/sheet/SheetDescription.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 面板的辅助说明，用于无障碍描述关联；插槽没有有效内容时不渲染描述元素。 |
详情声明类型{}来源packages/ui/src/components/sheet/SheetDescription.vue | ||
SheetHeader
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 合并到面板头部容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/sheet/SheetHeader.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 面板标题、描述与其他头部内容。 |
详情声明类型{}来源packages/ui/src/components/sheet/SheetHeader.vue | ||
SheetTitle
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 合并到 Reka UI 标题原语的 CSS 类，默认使用粗体标题样式。 |
详情 | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 面板标题，用于无障碍名称关联；插槽没有有效内容时不渲染标题元素。 |
详情声明类型{}来源packages/ui/src/components/sheet/SheetTitle.vue | ||
可访问性
- 键盘操作：支持
Escape关闭面板 - ARIA 属性：自动管理
aria-labelledby（关联SheetTitle）、aria-describedby（关联SheetDescription） - 焦点管理：打开时焦点锁定在面板内，关闭时恢复焦点到触发器