アクションとオーバーレイ@neumorphism-ui/drawer

Drawer

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

@neumorphism-ui/drawer

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/drawer

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

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

Example

export default function Example() {
  return <Drawer swipeDirection="down">
    <DrawerTrigger render={<Button />}>クイック設定</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>クイック設定</DrawerTitle>
        <DrawerDescription>現在の画面を離れずによく使う設定を調整します。</DrawerDescription>
      </DrawerHeader>
      <div className="grid gap-3 px-5 py-4"><p>通知や表示の設定をこの領域に配置できます。</p></div>
      <DrawerFooter><DrawerClose render={<Button variant="primary" />}>完了</DrawerClose></DrawerFooter>
    </DrawerContent>
  </Drawer>;
}

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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`	`—`	方向とジェスチャー動作を維持しながらパネルのスタイルを拡張します。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ