---
title: "Collapse"
description: "Yüksekliği 0 ile auto arasında yaylı geçişle açar. İçerik alan açıldıktan sonra belirir, kapanmadan önce söner."
---

<Callout type="info" title="Ne zaman kullanılır">
Bir düğme ya da switch'e bağlı ek alanlar: "Değiştir" editörleri, bir ayar açılınca gelen seçenekler.
</Callout>

## Kurulum

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

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Değiştir / Kapat

Tetikleyici outline sm buton; aria-expanded ve aria-controls ile Collapse'a bağlanır.

**Örnek: Değiştir / Kapat** (`collapse/disclosure`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/collapse/disclosure)

```tsx
import * as React from "react"
import { PencilIcon, XIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Collapse } from "@/components/ikas/collapse"

export default function CollapseDisclosure() {
  const [open, setOpen] = React.useState(false)
  const id = React.useId()

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Tetikleyici</CardTitle>
        <CardDescription>Stok 10 adedin altına düştüğünde</CardDescription>
        <CardAction>
          <Button variant="outline" size="sm" aria-expanded={open} aria-controls={id} onClick={() => setOpen((o) => !o)}>
            {open ? <XIcon data-icon="inline-start" /> : <PencilIcon data-icon="inline-start" data-anim="wiggle" />}
            {open ? "Kapat" : "Değiştir"}
          </Button>
        </CardAction>
      </CardHeader>
      <Collapse open={open} id={id}>
        <CardContent>
          <div className="grid gap-4 border-t pt-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor={`${id}-threshold`}>Eşik</FieldLabel>
              <Input id={`${id}-threshold`} defaultValue={10} inputMode="numeric" />
            </Field>
            <Field>
              <FieldLabel htmlFor={`${id}-sku`}>Ürün kodu</FieldLabel>
              <Input id={`${id}-sku`} placeholder="Tüm ürünler" />
            </Field>
          </div>
        </CardContent>
      </Collapse>
    </Card>
  )
}
```

### Switch'e bağlı bölüm

Ayar kapalıyken ilgili alanlar hiç görünmez.

**Örnek: Switch'e bağlı bölüm** (`collapse/switch-section`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/collapse/switch-section)

```tsx
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"
import { Field, FieldLabel } from "@/components/ui/field"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Collapse } from "@/components/ikas/collapse"
import { SettingRow } from "@/components/ikas/setting-row"

export default function CollapseSwitchSection() {
  const [enabled, setEnabled] = React.useState(true)

  return (
    <Card className="w-full max-w-md">
      <CardContent>
        <SettingRow
          title="Özet e-postası"
          description="Satış ve stok özetini düzenli olarak gönderir."
          htmlFor="digest"
          control={<Switch id="digest" checked={enabled} onCheckedChange={setEnabled} aria-controls="digest-options" />}
        />
        <Collapse open={enabled} id="digest-options" className="pt-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor="digest-frequency">Sıklık</FieldLabel>
              <Select defaultValue="weekly">
                <SelectTrigger id="digest-frequency" className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent position="popper">
                  <SelectItem value="daily">Her gün</SelectItem>
                  <SelectItem value="weekly">Her hafta</SelectItem>
                  <SelectItem value="monthly">Her ay</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel htmlFor="digest-time">Saat</FieldLabel>
              <Select defaultValue="09">
                <SelectTrigger id="digest-time" className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent position="popper">
                  <SelectItem value="09">09:00</SelectItem>
                  <SelectItem value="13">13:00</SelectItem>
                  <SelectItem value="18">18:00</SelectItem>
                </SelectContent>
              </Select>
            </Field>
          </div>
        </Collapse>
      </CardContent>
    </Card>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Dolguyu Collapse'ın içine verin, dışına değil.

**Yapmayın:**

- Sayfanın ana içeriğini Collapse arkasına saklamayın.

## API

### `Collapse`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `open` (zorunlu) | `boolean` | - | Açık mı. |
| `children` (zorunlu) | `React.ReactNode` | - |  |
| `className` | `string` | - | İç sarmalayıcı. Dolguyu buraya verin ki kapanınca yükseklik gerçekten 0 olsun. |
| `id` | `string` | - | Tetikleyicinin aria-controls değeri. |