Sheet 侧边面板

用于侧边面板场景的 MoriUI 组件。

导入

import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from 'moriui'

示例

概览

编辑资料的侧边面板。

<script setup lang="ts">
  import {
    Button,
    Input,
    Label,
    Sheet,
    SheetClose,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
    SheetTrigger
  } from 'moriui'
</script>

<template>
  <Sheet>
    <SheetTrigger as-child>
      <Button variant="outline">
        打开
      </Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>编辑资料</SheetTitle>
        <SheetDescription>在此修改你的资料。</SheetDescription>
      </SheetHeader>
      <div class="grid flex-1 auto-rows-min gap-6 px-4">
        <div class="grid gap-3">
          <Label for="name">姓名</Label>
          <Input id="name" default-value="张三" />
        </div>
        <div class="grid gap-3">
          <Label for="username">用户名</Label>
          <Input id="username" default-value="@zhangsan" />
        </div>
      </div>
      <SheetFooter>
        <Button type="submit">
          保存
        </Button>
        <SheetClose as-child>
          <Button variant="outline">
            取消
          </Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</template>

位置

使用 side 控制面板从屏幕边缘滑出。

<script setup lang="ts">
  import {
    Button,
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger
  } from 'moriui'

  const sides = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <Sheet v-for="side in sides" :key="side">
      <SheetTrigger as-child>
        <Button variant="outline" class="capitalize">
          {{ side }}
        </Button>
      </SheetTrigger>
      <SheetContent :side="side">
        <SheetHeader>
          <SheetTitle class="capitalize">
            {{ side }} 面板
          </SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  </div>
</template>

无关闭按钮

隐藏默认关闭按钮。

<script setup lang="ts">
  import {
    Button,
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger
  } from 'moriui'
</script>

<template>
  <Sheet>
    <SheetTrigger as-child>
      <Button variant="outline">
        无关闭按钮
      </Button>
    </SheetTrigger>
    <SheetContent show-close-button="false">
      <SheetHeader>
        <SheetTitle>无关闭按钮</SheetTitle>
      </SheetHeader>
      <p class="text-sm text-muted-foreground px-4">
        用户必须通过其他操作关闭此面板。
      </p>
    </SheetContent>
  </Sheet>
</template>

RTL

从右到左的面板布局。

<script setup lang="ts">
  import {
    Button,
    DirectionProvider,
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider direction="rtl">
    <Sheet dir="rtl">
      <SheetTrigger as-child>
        <Button variant="outline">
          فتح
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>لوحة جانبية</SheetTitle>
        </SheetHeader>
        <p class="text-sm text-muted-foreground px-4">
          اتجاه المحتوى من اليمين إلى اليسار.
        </p>
      </SheetContent>
    </Sheet>
  </DirectionProvider>
</template>

使用说明

组合方式

Sheet 由 Trigger 和 Content 组成；Content 内可使用 Header、Title、Description 与 Footer 组织结构。

位置

side 控制面板从屏幕边缘滑出的方向，支持 top、right、bottom、left。

无关闭按钮

showCloseButton 控制默认关闭控件的显示。

RTL

方向由 DirectionProvider 控制。

变体

SheetContent 的 side 支持 top、right、bottom、left。

可访问性

Sheet 复用 Reka UI Dialog 的焦点管理、Escape 关闭、遮罩交互和焦点归还。Content 内应提供 SheetTitle，并在需要时提供 SheetDescription。

API 参考

属性	类型	默认值	说明
`Sheet v-model:open`	`boolean`	`undefined`	面板的受控打开状态。
`Sheet defaultOpen`	`boolean`	`false`	非受控初始打开状态。
`SheetContent side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	面板从屏幕边缘滑出的方向。
`SheetContent showCloseButton`	`boolean`	`true`	是否显示默认关闭按钮。
`SheetClose as / asChild`	`string \| Component / boolean`	`'button' / false`	关闭触发器的元素组合能力。
`SheetHeader class`	`HTMLAttributes["class"]`	`undefined`	合并到面板头部的调用方类。
`SheetFooter class`	`HTMLAttributes["class"]`	`undefined`	合并到面板脚部的调用方类。