125k

Drawer

PreviousNext

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

BaseRadixReact Aria
"use client"

import * as React from "react"

概要

ドロワーは、emilkowalski によって Vaul の上に構築されています。

インストール

pnpm dlx shadcn@latest add drawer

使い方

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

構成

次の構成を使用して Drawer を構築します。

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter

スクロール可能なコンテンツ

コンテンツがスクロールしている間、アクションを表示したままにします。

import { Button } from "@/components/ui/radix/button"
import {
  Drawer,

位置

direction プロップを使用してドロワーの側面を設定します。使用可能なオプションは、top、right、bottom、および left です。

import { Button } from "@/components/ui/radix/button"
import {
  Drawer,

レスポンシブ

Dialog コンポーネントと Drawer コンポーネントを組み合わせて、応答性の高いダイアログを作成できます。これにより、デスクトップでは Dialog コンポーネントがレンダリングされ、モバイルでは Drawer がレンダリングされます。

"use client"

import * as React from "react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

API リファレンス

完全な API リファレンスについては、Vaul ドキュメント を参照してください。