Drawer

特にタッチ画面で、スワイプして閉じられる一時的な操作パネルに使います。

プレビュー

プロフィール設定のドロワー

説明と閉じるボタン付きのプロフィールパネルを開き、ボタンまたは下スワイプで閉じます。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/drawer

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

プロフィール設定のドロワー

npx shadcn@latest add @neumorphism-ui/drawer @neumorphism-ui/button

Registry JSON

使い方

Drawer にトリガー、内容、ヘッダー、タイトル、説明を組み合わせます。swipeDirection で方向を指定し、ジェスチャーに加えて閉じるボタンも用意します。

"use client";

import { Button } from "@/components/ui/button";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";

export default function Example() {
  return (
    <Drawer swipeDirection="down">
      <DrawerTrigger render={<Button />}>Quick settings</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Quick settings</DrawerTitle>
          <DrawerDescription>Adjust options without leaving this page.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter><DrawerClose render={<Button />}>Done</DrawerClose></DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

API リファレンス

Base UI Drawer のジェスチャーとフォーカス管理を使用します。Sheet が固定タスクパネルなのに対し、Drawer はスワイプで閉じたり別方向から開いたりする一時的なタッチ向け表面に適しています。

コンポーネント	プロパティ	型	デフォルト	説明
`Drawer`	`swipeDirection`	`"down" \| "up" \| "left" \| "right"`	`"down"`	開閉とスワイプの方向を指定します。
`Drawer`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	Drawer の開閉状態を制御します。
`Drawer`	`snapPoints`	`number[]`	`—`	必要に応じて中間の停止位置を構成します。
`DrawerTrigger`	`render`	`ReactElement`	`—`	既存の Button などを trigger として合成します。
`DrawerContent`	`className`	`string \| (state) => string`	`—`	方向とジェスチャー動作を維持しながらパネルのスタイルを拡張します。

プレビュー

プロフィール設定のドロワー

インストール

使い方

API リファレンス

アクセシビリティ