Drawer

"use client"

import * as React from "react"

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add drawer
コピー

以下をグローバル スタイルに追加してください。iOS Safari では、ドロワーのオーバーレイは絶対配置されており、ページがスクロールされた後にビューポートを覆うために body の位置指定が必要です。詳細については、Base UI のドキュメントを参照してください。

コピーbody {
  position: relative;
}

使い方#

コピーimport {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

コピー<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">{/* Content here */}</div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

構成#

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

コピーDrawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter

DrawerContent は、Base UI のポータル、オーバーレイ、ビューポート、ポップアップを組み合わせたものです。より低レベルの制御が必要な場合は、DrawerPortal、DrawerOverlay、DrawerSwipeHandle もエクスポートされています。

カスタム サイズ#

垂直方向のドロワーはコンテンツに合わせてサイズが決まり、デフォルトでは calc(100dvh - 6rem) が上限になります。サイド ドロワーはビューポート幅の 75%、大きな画面では 24rem を占めます。

垂直ドロワーの高さをカスタマイズするには、DrawerContent の h-* および max-h-* ユーティリティを使用します。

コピー<DrawerContent className="h-[50vh]">

サイド ドロワーの幅をカスタマイズするには、DrawerContent の w-* および max-w-* ユーティリティを使用します。

コピー<DrawerContent className="w-96">

同じコンポーネントが複数の方向でレンダリングされる場合、data-[swipe-axis=*] バリアントを使用してオーバーライドの範囲を 1 つの軸に設定します。

コピー<DrawerContent className="data-[swipe-axis=y]:max-h-[50vh] data-[swipe-axis=x]:w-96">

ドロワーの領域をスクロール可能にするには、スクロール コンテナーをフレックス アイテムにします。コンテンツサイズのドロワー内では解決されない h-full は避けてください。

コピー<DrawerContent>
  <DrawerHeader>...</DrawerHeader>
  <div className="flex-1 overflow-y-auto p-4">{/* Scrollable content */}</div>
  <DrawerFooter>...</DrawerFooter>
</DrawerContent>

スタイリング#

ドロワーは、スタイル レベルのカスタマイズ用の CSS 変数を公開します。 DrawerContent にサイズ変数を設定します。 CSS の [data-slot=drawer-overlay] にオーバーレイ変数を設定します。

ドロワーは、DrawerContent の data-[swipe-direction=down]: やその子孫の group-data-[swipe-axis=y]/drawer-popup: などのバリアントでターゲットにできるデータ属性も設定します。

位置#

swipeDirection プロップを使用してドロワーの側面を設定します。

使用可能なオプションは、up、right、down、および left です。

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

スワイプ ハンドル#

Drawer で showSwipeHandle を使用して、スワイプ ハンドルをレンダリングします。

"use client"

import { Button } from "@/components/ui/base/button"

ネスト#

別のドロワー内から新しいドロワーを開きます。親ドロワーはマウントされたまま残り、最前面のドロワーの背後に積み重なります。

"use client"

import { useIsMobile } from "@/hooks/use-mobile"

非モーダル#

modal={false} を設定すると、ドロワーが開いている間もページの残りの部分を操作できるようになります。disablePointerDismissal と組み合わせると、外側を押してもドロワーが閉じないようにできます。modal="trap-focus" を使用すると、スクロールやポインター操作を制限せずにドロワー内にフォーカスを維持できます。

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

スナップ ポイント#

snapPoints を使用して、ドロワーを事前設定された高さにスナップします。 0 と 1 の間の数字はビューポートの小数を表します。 1 より大きい数値はピクセル値として扱われます。文字列値は px および rem 単位をサポートします。スナップ ポイントは垂直ドロワーに適用されます。

制御された snapPoint プロップと onSnapPointChange プロップを使用して、アクティブなスナップ ポイントを追跡します。完全なスナップ ポイントに達すると、ドロワーに data-expanded 属性が設定され、data-expanded: バリアントでスタイルを指定できます。

"use client"

import { Button } from "@/components/ui/base/button"

レスポンシブ#

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

"use client"

import * as React from "react"

Vaul からの移行#

Base ドロワーは現在 Base UI を使用しています。以前のバージョンをインストールしていた場合は、以下の手順に従って使用箇所を更新してください。

コピー- npm install vaul
+ npm install @base-ui/react

コピー- <Drawer direction="bottom">
+ <Drawer swipeDirection="down">

コピー- <DrawerTrigger asChild>
-   <Button variant="outline">Open</Button>
- </DrawerTrigger>
+ <DrawerTrigger render={<Button variant="outline" />}>
+   Open
+ </DrawerTrigger>

コピー- <DrawerClose asChild>
-   <Button variant="outline">Cancel</Button>
- </DrawerClose>
+ <DrawerClose render={<Button variant="outline" />}>
+   Cancel
+ </DrawerClose>

コピー  <Drawer
    snapPoints={[0.25, 0.5, 1]}
-   activeSnapPoint={snapPoint}
-   setActiveSnapPoint={setSnapPoint}
-   snapToSequentialPoint
+   snapPoint={snapPoint}
+   onSnapPointChange={setSnapPoint}
+   snapToSequentialPoints
  >

コピー- <Drawer onAnimationEnd={(open) => setDone(open)}>
+ <Drawer onOpenChangeComplete={(open) => setDone(open)}>

コピー- <DrawerContent onOpenAutoFocus={(event) => event.preventDefault()}>
+ <DrawerContent initialFocus={false}>

コピー- <Drawer handleOnly repositionInputs={false} shouldScaleBackground>
+ <Drawer>

コピー- <Drawer dismissible={false}>
+ <Drawer disablePointerDismissal>

コピー- <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh]">
+ <DrawerContent className="data-[swipe-direction=down]:max-h-[50vh]">

API リファレンス#

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