---
title: "Drawer"
description: "Kenardan açılan, sürükleyerek kapatılabilen panel. Mobilde aksiyon listeleri ve kısa formlar için."
---

<Callout type="info" title="Ne zaman kullanılır">
Mobil öncelikli akışlar: satır aksiyonları, kısa bir not formu, filtre seçimi. Masaüstünde detay ve düzenleme paneli için [Sheet](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/sheet) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/drawer
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. shadcn/ui'deki gibi [vaul](https://vaul.emilkowal.ski) kullanır; Drawer prop'larının hepsi çalışır (direction, snapPoints, open, onOpenChange).

## Örnekler

### Aksiyon listesi

Varsayılan yön alttan. Her aksiyonu DrawerClose ile sarın ki seçince kapansın.

**Örnek: Aksiyon listesi** (`drawer/actions`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/drawer/actions)

```tsx
import { MoreHorizontalIcon, PrinterIcon, TruckIcon, UndoIcon } from "lucide-react"
import { toast } from "sonner"

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

const actions = [
  { icon: TruckIcon, label: "Kargoya ver", message: "Kargo etiketi oluşturuldu" },
  { icon: PrinterIcon, label: "Faturayı yazdır", message: "Fatura yazıcıya gönderildi" },
  { icon: UndoIcon, label: "İade başlat", message: "İade talebi açıldı" },
]

/** Mobile action sheet: the app's row actions, reachable with a thumb. */
export default function DrawerActions() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">
          <MoreHorizontalIcon data-icon="inline-start" />
          Sipariş işlemleri
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader className="text-left">
            <DrawerTitle>#10482 numaralı sipariş</DrawerTitle>
            <DrawerDescription>3 ürün · ₺1.840,00 · Ödendi</DrawerDescription>
          </DrawerHeader>
          <div className="flex flex-col gap-1 px-4">
            {actions.map((action) => (
              <DrawerClose key={action.label} asChild>
                <Button variant="ghost" size="lg" className="justify-start" onClick={() => toast.success(action.message)}>
                  <action.icon data-icon="inline-start" className="text-icon" />
                  {action.label}
                </Button>
              </DrawerClose>
            ))}
          </div>
          <DrawerFooter>
            <DrawerClose asChild>
              <Button variant="outline">Kapat</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

### Form

DrawerBody içerik uzunsa kaydırılır; başlık ve butonlar yerinde kalır.

**Örnek: Form** (`drawer/form`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/drawer/form)

```tsx
import { PlusIcon } from "lucide-react"
import { toast } from "sonner"

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

export default function DrawerForm() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button>
          <PlusIcon data-icon="inline-start" />
          Not ekle
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <form
          className="mx-auto flex w-full max-w-md flex-col"
          onSubmit={(event) => {
            event.preventDefault()
            toast.success("Not eklendi")
          }}
        >
          <DrawerHeader>
            <DrawerTitle>Siparişe not ekle</DrawerTitle>
            <DrawerDescription>Notu yalnızca mağaza ekibi görür.</DrawerDescription>
          </DrawerHeader>
          <DrawerBody>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="note-title">Başlık</FieldLabel>
                <Input id="note-title" defaultValue="Hediye paketi" />
              </Field>
              <Field>
                <FieldLabel htmlFor="note-body">Not</FieldLabel>
                <Textarea id="note-body" placeholder="Paketin içine kart eklenecek" />
              </Field>
            </FieldGroup>
          </DrawerBody>
          <DrawerFooter className="sm:flex-row sm:justify-end">
            <DrawerClose asChild>
              <Button variant="outline">Vazgeç</Button>
            </DrawerClose>
            <Button type="submit">Kaydet</Button>
          </DrawerFooter>
        </form>
      </DrawerContent>
    </Drawer>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- İçeriği max-w-sm gibi bir genişlikle ortalayın; geniş ekranda tam genişlik boş kalır.
- Altta ana aksiyonu, üstünde Vazgeç'i gösterin.

**Yapmayın:**

- Uzun formlar için kullanmayın; ayrı bir sayfa açın.
- Drawer içinden başka bir drawer açmayın.

## API

shadcn/ui ile aynı parçalar: `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerDescription`, `DrawerFooter`, `DrawerClose`. Ek olarak `DrawerBody`: başlık ile alt bilgi arasında kaydırılan alan.