Docs
ドロワー

ドロワー

React 用ドローワーコンポーネント。

Docs

概要

ドロワーは、emilkowalski_による Vaul を基盤に構築されています。

インストール

npx shadcn-ui@latest add drawer

使用方法

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
  <DrawerTrigger>開く</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>本当に大丈夫ですか？</DrawerTitle>
      <DrawerDescription>この操作は取り消せません。</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>送信</Button>
      <DrawerClose>
        <Button variant="outline">キャンセル</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

例

レスポンシブダイアログ

Dialog と Drawer コンポーネントを組み合わせて、レスポンシブなダイアログを作成できます。これは、デスクトップでは Dialog コンポーネントを、モバイルでは Drawer をレンダリングします。