72Başlayın
HextaUI

Drawer

Herhangi bir kenardan kayarak gelen ve parmağınızı izleyen bir panel; yapışma noktaları, çalışan bir tutamaç ve üst üste binen iç içe çekmeceler içerir.

"use client"

import * as React from "react"
import { IconMinus, IconPlus } from "@tabler/icons-react"

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

export function DrawerDemo() {
  const [goal, setGoal] = React.useState(350)

  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Set daily goal
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto flex w-full max-w-sm flex-col">
          <DrawerHeader>
            <DrawerTitle>Move goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <div className="flex items-center justify-center gap-6 p-6">
            <Button
              variant="outline"
              size="icon"
              aria-label="Decrease goal"
              disabled={goal <= 200}
              onClick={() => setGoal(goal - 10)}
            >
              <IconMinus />
            </Button>
            <div className="flex min-w-32 flex-col items-center">
              <NumberFlow
                value={goal}
                className="text-6xl font-semibold tracking-tight"
              />
              <span className="text-xs text-muted-foreground uppercase">
                Calories / day
              </span>
            </div>
            <Button
              variant="outline"
              size="icon"
              aria-label="Increase goal"
              disabled={goal >= 600}
              onClick={() => setGoal(goal + 10)}
            >
              <IconPlus />
            </Button>
          </div>
          <DrawerFooter>
            <DrawerClose render={<Button />}>Save goal</DrawerClose>
            <DrawerClose render={<Button variant="outline" />}>
              Cancel
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/drawer.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import {
  Drawer,
  DrawerBody,
  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>
    <DrawerBody>{/* content */}</DrawerBody>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Kompozisyon

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

Örnekler

Yönler

Kenarı seçmek için <Drawer /> üzerinde swipeDirection ayarlayın. Drawer o kenardan açılır ve ona doğru kaydırılarak kapanır. Üst ve alt drawer'lar varsayılan olarak bir tutamak gösterir.

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

const directions = [
  { value: "up", label: "Top" },
  { value: "right", label: "Right" },
  { value: "down", label: "Bottom" },
  { value: "left", label: "Left" },
] as const

export function DrawerDirections() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {directions.map(({ value, label }) => (
        <Drawer key={value} swipeDirection={value}>
          <DrawerTrigger render={<Button variant="outline" />}>
            {label}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Swipe {value} to close</DrawerTitle>
              <DrawerDescription>
                The drawer follows your finger and keeps the momentum when you
                let go.
              </DrawerDescription>
            </DrawerHeader>
            <DrawerFooter>
              <DrawerClose render={<Button variant="outline" />}>
                Close
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}

Snap noktaları

Alt bir drawer'ı hazır yüksekliklerde durdurmak için snapPoints geçin. 0 ile 1 arası sayılar görünüm alanının kesirleridir, daha büyük sayılar pikseldir ve dizeler px veya rem alır. Görünen kısım her zaman içeriğine sığar; böylece ekranın altında hiçbir şey gizlenmez.

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

const snapPoints = ["20rem", 1]

const places = [
  "Blue Bottle Coffee",
  "Tartine Bakery",
  "Mission Dolores Park",
  "Ferry Building",
  "Golden Gate Park",
  "Lands End Trail",
  "Twin Peaks",
  "Coit Tower",
  "Alamo Square",
  "Baker Beach",
  "Crissy Field",
  "Japanese Tea Garden",
]

export function DrawerSnapPoints() {
  return (
    <Drawer snapPoints={snapPoints}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Nearby places
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Nearby places</DrawerTitle>
          <DrawerDescription>
            Drag up to see the full list, or down to close.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <ul className="flex flex-col divide-y">
            {places.map((place) => (
              <li key={place} className="py-3 text-sm">
                {place}
              </li>
            ))}
          </ul>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

Kaydırılabilir içerik

<DrawerBody /> kendi başına kayar; böylece üst ve alt bilgi yerinde kalır. Kaydırma, yalnızca gövde en üste geri kaydırıldığında başlar.

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

const sections = Array.from({ length: 12 }, (_, index) => index + 1)

export function DrawerScrollable() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Terms of service
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Terms of service</DrawerTitle>
          <DrawerDescription>Last updated October 2026.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <div className="flex flex-col gap-4 text-sm text-muted-foreground">
            {sections.map((section) => (
              <p key={section}>
                {section}. By using the service you agree to these terms. We may
                update them from time to time, and we will let you know when
                something important changes. Keep your account details safe and
                tell us if you think someone else has access.
              </p>
            ))}
          </div>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose render={<Button />}>Accept</DrawerClose>
          <DrawerClose render={<Button variant="outline" />}>
            Decline
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Formlar ve klavye

Alt bir drawer metin alanları içerdiğinde <DrawerContent /> bileşenini <DrawerVirtualKeyboardProvider /> içine sarın. Telefonlarda odaktaki alan, yazılım klavyesinin arkasında gizlenmek yerine onun üstünde görünüme kayar. Üst ve alt bilginin yerinde kalması için alanları <DrawerBody /> içinde tutun.

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
  DrawerVirtualKeyboardProvider,
} from "@/components/ui/drawer"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function DrawerKeyboard() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Delivery details
      </DrawerTrigger>
      <DrawerVirtualKeyboardProvider>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Delivery details</DrawerTitle>
            <DrawerDescription>
              Tap a field on your phone. It stays above the keyboard.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerBody>
            <FieldGroup>
              <Field>
                <FieldLabel>Name</FieldLabel>
                <Input name="name" autoComplete="name" />
              </Field>
              <Field>
                <FieldLabel>Phone</FieldLabel>
                <Input name="phone" type="tel" autoComplete="tel" />
              </Field>
              <Field>
                <FieldLabel>Street address</FieldLabel>
                <Input name="street" autoComplete="street-address" />
              </Field>
              <Field>
                <FieldLabel>Apartment</FieldLabel>
                <Input name="apartment" />
              </Field>
              <Field>
                <FieldLabel>City</FieldLabel>
                <Input name="city" autoComplete="address-level2" />
              </Field>
              <Field>
                <FieldLabel>Postal code</FieldLabel>
                <Input name="postal" autoComplete="postal-code" />
              </Field>
            </FieldGroup>
          </DrawerBody>
          <DrawerFooter>
            <DrawerClose render={<Button />}>Save address</DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </DrawerVirtualKeyboardProvider>
    </Drawer>
  )
}

İç içe

Aynı kenardaki bir drawer'dan açılan drawer üste yığılır. Arkadakiler küçülür, üstünde görünür ve en üsttekini kaydırarak uzaklaştırırken parmağınızı izler.

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

export function DrawerNested() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Choose a plan
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Choose a plan</DrawerTitle>
          <DrawerDescription>
            Compare plans, then open the details of the one you like.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Drawer>
            <DrawerTrigger render={<Button />}>Pro plan details</DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Pro plan</DrawerTitle>
                <DrawerDescription>
                  The first drawer steps back behind this one.
                </DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <Drawer>
                  <DrawerTrigger render={<Button />}>Checkout</DrawerTrigger>
                  <DrawerContent>
                    <DrawerHeader>
                      <DrawerTitle>Checkout</DrawerTitle>
                      <DrawerDescription>
                        Swipe down to go back one step.
                      </DrawerDescription>
                    </DrawerHeader>
                    <DrawerFooter>
                      <DrawerClose render={<Button variant="outline" />}>
                        Back
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
                <DrawerClose render={<Button variant="outline" />}>
                  Back
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Drawer'dan onay

Başka bir kenardaki diyaloglar, alert dialog'lar, sheet'ler ve drawer'lar yığılmak yerine üste katmanlanır. Drawer geri çekilir ve onu daha açık bir arka plan kaplar.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export function DrawerConfirm() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Photo options
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>IMG_2048.heic</DrawerTitle>
          <DrawerDescription>Taken on October 3, 2026.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Share</DrawerClose>
          <AlertDialog>
            <AlertDialogTrigger render={<Button variant="destructive" />}>
              Delete photo
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete “IMG_2048.heic”?</AlertDialogTitle>
                <AlertDialogDescription>
                  It will be removed from all your devices.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction variant="destructive">
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Duyarlı

Masaüstünde yan panel, telefonlarda alt sheet göstermek için swipeDirection değerini bir media query ile değiştirin.

"use client"

import * as React from "react"

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

const query = "(min-width: 768px)"

function subscribe(onChange: () => void) {
  const media = window.matchMedia(query)
  media.addEventListener("change", onChange)
  return () => media.removeEventListener("change", onChange)
}

function useIsDesktop() {
  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false
  )
}

export function DrawerResponsive() {
  const isDesktop = useIsDesktop()

  return (
    <Drawer swipeDirection={isDesktop ? "right" : "down"}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Notifications
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Notifications</DrawerTitle>
          <DrawerDescription>
            A side panel on desktop and a bottom sheet on phones.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Modal olmayan

modal={false} ile arka plan yoktur, sayfa kaymaya devam eder ve odak drawer'dan çıkabilir.

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

export function DrawerNonModal() {
  return (
    <Drawer modal={false} swipeDirection="right">
      <DrawerTrigger render={<Button variant="outline" />}>
        Open inspector
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Inspector</DrawerTitle>
          <DrawerDescription>
            The page stays scrollable and clickable while this is open.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Kontrollü

Trigger olmadan her yerden açmak için open ve onOpenChange geçin.

"use client"

import * as React from "react"

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

export function DrawerControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from anywhere
      </Button>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Controlled drawer</DrawerTitle>
            <DrawerDescription>
              Opened from a plain button, without a trigger.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}

Ayrık tetikleyiciler

Tek bir drawer'ı createDrawerHandle ile birkaç trigger arasında paylaşın. Her trigger, drawer'ın bir fonksiyon alt öğesi aracılığıyla render ettiği bir payload geçirir.

"use client"

import { Button } from "@/components/ui/button"
import {
  createDrawerHandle,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const contacts = createDrawerHandle<{ name: string; email: string }>()

export function DrawerDetached() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Olivia Martin", email: "[email protected]" }}
        render={<Button variant="outline" size="sm" />}
      >
        Olivia
      </DrawerTrigger>
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Jackson Lee", email: "[email protected]" }}
        render={<Button variant="outline" size="sm" />}
      >
        Jackson
      </DrawerTrigger>
      <Drawer handle={contacts}>
        {({ payload }) => (
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>{payload?.name}</DrawerTitle>
              <DrawerDescription>{payload?.email}</DrawerDescription>
            </DrawerHeader>
            <DrawerBody>
              <p className="text-sm text-muted-foreground">
                One drawer, opened by either trigger.
              </p>
            </DrawerBody>
          </DrawerContent>
        )}
      </Drawer>
    </div>
  )
}

Sağdan sola

İçeriğini yansıtmak için <DrawerContent /> bileşenine dir="rtl" geçin. swipeDirection fiziksel bir kenarı adlandırır; bu yüzden "left" solda kalır ve tutamak iç kenarda kalır.

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

export function DrawerRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap justify-center gap-2">
      <Drawer>
        <DrawerTrigger render={<Button variant="outline" />}>
          من الأسفل
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>تعديل الملف الشخصي</DrawerTitle>
            <DrawerDescription>
              يتم حفظ التغييرات عند النقر على حفظ.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button />}>حفظ</DrawerClose>
            <DrawerClose render={<Button variant="outline" />}>
              إلغاء
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="left" showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" />}>
          من اليسار
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>القائمة</DrawerTitle>
            <DrawerDescription>اسحب إلى اليسار للإغلاق.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button variant="outline" />}>
              إغلاق
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  )
}

Klavye

TuşAction
EnterSpaceTrigger üzerinde, drawer'ı açar ve odağı içine taşır.
TabShift + TabOdaklanabilir öğeler arasında gezinir. Odak, modal bir drawer'ın içinde kalır.
EscEn üstteki drawer'ı kapatır ve odağı trigger'ına geri verir.

Erişilebilirlik

  • Drawer bir diyalogdur. <DrawerTitle /> onu etiketler, <DrawerDescription /> tanımlar; bu yüzden her zaman bir başlık ekleyin.
  • Kaydırmak asla tek çıkış yolu değildir: Escape, arka plan ve bir <DrawerClose /> düğmesi de drawer'ı kapatır.
  • Tutamak dekoratiftir ve yardımcı teknolojilerden gizlenir. Fareyle drawer içindeki metin, drawer'ı sürüklemeden seçilebilir.
  • Azaltılmış hareket etkinken drawer kaymak yerine solarak girer ve çıkar. Sürükleme yine işaretçiyi izler.

API referansı

Base UI drawer üzerine kuruludur. Her parça, sardığı primitive'in prop'larını kabul eder.

Drawer

PropTürVarsayılan
swipeDirectionAçıldığı kenar ve onu kapatan yön.
"up" | "down" | "left" | "right""down"
showSwipeHandleTutamağı gösterir. Varsayılan olarak yukarı ve aşağı için true, sol ve sağ için false.
boolean–
snapPointsDikey bir drawer'ın durabileceği yükseklikler. 0–1 görünüm alanının bir kesridir, >1 piksel demektir, dizeler px veya rem alır.
(number | string)[]–
snapPoint
number | string | null–
defaultSnapPoint
number | string | null–
onSnapPointChange
(snapPoint, details) => void–
defaultOpen
booleanfalse
open
boolean–
onOpenChange
(open: boolean, details) => void–
onOpenChangeCompleteAçma ya da kapatma animasyonu bittikten sonra çağrılır.
(open: boolean) => void–
modalArka plan yalnızca true olduğunda render edilir.
boolean | "trap-focus"true
disablePointerDismissalArka plana tıklandığında açık tutun.
booleanfalse
handle
DrawerHandle<Payload>–
children
ReactNode | ({ payload }) => ReactNode–

DrawerTrigger

PropTürVarsayılan
handle
DrawerHandle<Payload>–
payload
Payload–
render
ReactElement | (props, state) => ReactElement<button>
ÖznitelikAçıklama
data-slot="drawer-trigger"CSS'te tetikleyiciyi hedefleyin.
data-popup-openDrawer'ı açıkken bulunur.

DrawerContent

Portalı, arka planı, görünüm alanını ve popup'ı, ayrıca tutamağı render eder. Dikey drawer'lar içeriklerine, görünüm alanı yüksekliği eksi 4rem'e kadar sığar. Yan drawer'lar %75 genişliğindedir, sm breakpoint'inden itibaren en çok 24rem. h-* veya w-* ile geçersiz kılın ya da data-[swipe-axis=y]: ile tek bir eksene kapsamlayın.

PropTürVarsayılan
initialFocus
boolean | RefObject | (type) => HTMLElement | boolean–
finalFocus
boolean | RefObject | (type) => HTMLElement | boolean–
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="drawer-popup"Drawer paneli.
data-slot="drawer-content"Alt öğelerinizin etrafındaki iç sarmalayıcı. Başka hiçbir şey kaymadığında o kayar.
data-swipe-directionup, right, down veya left.
data-swipe-axisx veya y.
data-openDrawer açıkken bulunur.
data-starting-styleAnimasyonla belirirken bulunur.
data-ending-styleAnimasyonla kaybolurken bulunur.
data-swipingSürüklenirken bulunur.
data-snap-pointsDrawer'ın snap noktaları olduğunda bulunur.
data-expandedTam yükseklikli snap noktasında bulunur.
data-nested-drawer-openÜstte başka bir drawer açıkken bulunur.
data-stackAynı kenardaki bir drawer üste yığılıyken bulunur.
--drawer-insetDrawer'ı görünüm alanı kenarlarından uzağa yüzdürür. Varsayılan 0px.
--drawer-bleed-backgroundKenarının ötesine sürüklendiğinde ortaya çıkan alanı doldurur. Varsayılan olarak popover rengidir.
--drawer-swipe-movement-xYatay sürükleme mesafesi. Bir -y değişkeni de vardır.
--drawer-snap-point-offsetGeçerli snap noktasının üstten ne kadar aşağıda durduğu.
--nested-drawersÜstte kaç drawer açık.

DrawerOverlay

modal true olduğunda <DrawerContent /> tarafından render edilir. Kaydırdıkça solar ve snap noktaları varsa en az yarı görünür kalır. Bir sheet'in veya başka bir kenardaki drawer'ın üstüne katmanlanan drawer daha açık bir arka plan alır.

ÖznitelikAçıklama
data-slot="drawer-overlay"Arka plan.
data-nestedKatmanlı drawer'ların daha açık arka planlarında bulunur.
--drawer-overlay-min-opacityKaydırırken solarak ineceği en düşük opaklık. 0, snap noktalarıyla 0.5.

DrawerSwipeHandle

showSwipeHandle açıkken <DrawerContent /> tarafından iç kenarda render edilir. Drawer'ın tamamı sürüklenebilir, bu yüzden tutamak görsel bir ipucudur.

ÖznitelikAçıklama
data-slot="drawer-swipe-handle"Tutamak.

DrawerHeader, DrawerBody, DrawerFooter

Drawer'ı düzenleyen düz <div> öğeleri. Üst bilgi, küçük ekranlardaki dikey drawer'larda metnini ortalar, gövde kayar ve kalan alanı kaplar, alt bilgi ise eylemlerini üst üste dizer.

ÖznitelikAçıklama
data-slot="drawer-header"Başlık ve açıklama.
data-slot="drawer-body"Kaydırılabilir içerik.
data-slot="drawer-footer"Eylemler.

DrawerTitle

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<h2>
ÖznitelikAçıklama
data-slot="drawer-title"Drawer'ı etiketler.

DrawerDescription

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<p>
ÖznitelikAçıklama
data-slot="drawer-description"Drawer'ı tanımlar.

DrawerVirtualKeyboardProvider

Hiçbir öğe render etmez. <Drawer /> içine, <DrawerContent /> çevresine yerleştirin. Yazılım klavyesi açıkken drawer'ın kaydırma kapsayıcısının altına yer ekler, odaktaki alanı görünüme kaydırır ve iOS'ta alanlara dokunmanın klavyeyi açmasını sağlar. Onsuz drawer'lar etkilenmez.

PropTürVarsayılan
children
ReactNode–
ÖznitelikAçıklama
--drawer-keyboard-insetKlavye açıkken görünüm alanında ayarlanır: klavyenin sayfayla ne kadar çakıştığı. 0px yedeğiyle kullanın.

DrawerClose

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<button>
ÖznitelikAçıklama
data-slot="drawer-close"Basıldığında drawer'ı kapatır.

createDrawerHandle

createDrawerHandle<Payload>(), bir <Drawer /> öğesini başka bir yerde render edilen tetikleyicilere bağlayan bir tanıtıcı döndürür. Bileşeninizin dışında, yalnızca bir kez oluşturun.

İlgili

Kullanıldığı bloklar

Drawer üzerine kurulan bloklar.