Sheet

扩展 Dialog 组件，用于显示与屏幕主要内容互补的内容。

Component Source API Reference

安装 ​

pnpm dlx shadcn-vue@latest add sheet

用法 ​

vue
<script setup lang="ts">
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
</script>

<template>
  <Sheet>
    <SheetTrigger>打开</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>确定要执行此操作吗？</SheetTitle>
        <SheetDescription>
          此操作不可撤销。这将永久删除您的账户并从我们的服务器中移除您的数据。
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

示例 ​

侧边位置 ​

使用 <SheetContent /> 的 side 属性来指定组件出现在屏幕的哪一侧。可选值为 top（顶部）、right（右侧）、bottom（底部）或 left（左侧）。

尺寸 ​

您可以使用 CSS 类来调整 Sheet 的尺寸：

vue
<template>
  <Sheet>
    <SheetTrigger>打开</SheetTrigger>
    <SheetContent class="w-[400px] sm:w-[540px]">
      <SheetHeader>
        <SheetTitle>确定要执行此操作吗？</SheetTitle>
        <SheetDescription>
          此操作不可撤销。这将永久删除您的账户并从我们的服务器中移除您的数据。
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>
Edit this page on GitHub