关于

Drawer 构建于 Vaul Vue 之上。

安装

pnpm dlx shadcn-vue@latest add drawer

用法

<script setup lang="ts">
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
</script>

<template>
  <Drawer>
    <DrawerTrigger>打开</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>确定要执行此操作吗？</DrawerTitle>
        <DrawerDescription>此操作不可逆转。</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>提交</Button>
        <DrawerClose>
          <Button variant="outline">
            取消
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</template>

背景缩放

如需背景具有缩放效果，需在根组件添加 vaul-drawer-wrapper 属性。

<div vaul-drawer-wrapper id="app"></div>

示例

响应式对话框

您可以组合使用 Dialog 和 Drawer 组件创建响应式对话框。该方案会在桌面端渲染 Dialog 组件，在移动端渲染 Drawer 组件。