---
title: "Layout"
description: "Sayfa içeriği için sütun ön ayarları ve ayar ekranları için numaralanabilen SettingsGroup."
---

<Callout type="info" title="Ne zaman kullanılır">
Her sayfada grid sınıfı yazmak yerine kullanın; böylece tüm uygulamalar aynı ritmi paylaşır.
</Callout>

## Kurulum

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

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

## Örnekler

### Ana + yan sütun

Detay sayfaları: içerik solda, meta bilgiler sağda. 1024px altında tek sütuna düşer.

**Örnek: Ana + yan sütun** (`layout/main-aside`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/layout/main-aside?align=stretch)

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Layout, LayoutColumn } from "@/components/ikas/layout"

export default function LayoutMainAside() {
  return (
    <Layout columns="main-aside">
      <LayoutColumn>
        <Card>
          <CardHeader>
            <CardTitle>Ana alan</CardTitle>
          </CardHeader>
          <CardContent className="h-32 text-muted-foreground">Ana içerik: ürünler, zaman akışı, formlar.</CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Ana alan</CardTitle>
          </CardHeader>
          <CardContent className="h-20 text-muted-foreground">Kartlar 20px aralıkla alt alta dizilir.</CardContent>
        </Card>
      </LayoutColumn>
      <LayoutColumn>
        <Card>
          <CardHeader>
            <CardTitle>Yan alan</CardTitle>
          </CardHeader>
          <CardContent className="h-24 text-muted-foreground">Müşteri, notlar, ek bilgiler.</CardContent>
        </Card>
      </LayoutColumn>
    </Layout>
  )
}
```

### Ayar grubu

Ayar sayfaları: üstü çizgili etiket sütunu solda, kontroller sağda. Uzun sayfalarda `index` ile numaralayın ve bölüm menüsündeki numaralarla eşleştirin ([Ayarlar örneği](https://builders.ikas.com/tr/docs/app-development/ui-kit/examples/settings)).

**Örnek: Ayar grubu** (`layout/settings-group`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/layout/settings-group?align=stretch)

```tsx
import { Card, CardContent } from "@/components/ui/card"
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { SettingRow } from "@/components/ikas/setting-row"
import { SettingsGroup } from "@/components/ikas/layout"
import { marketplace } from "@/demos/_data"

export default function LayoutSettingsGroup() {
  return (
    <div className="flex w-full flex-col gap-8">
      <SettingsGroup index="01" label="Mağaza bağlantısı" hint="Ürünlerinizin yayınlandığı pazaryeri hesabı.">
        <Card>
          <CardContent>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="seller-id">Satıcı ID</FieldLabel>
                <Input id="seller-id" defaultValue={marketplace.sellerId} />
              </Field>
              <Field>
                <FieldLabel htmlFor="api-key">API anahtarı</FieldLabel>
                <Input id="api-key" type="password" defaultValue={marketplace.apiKey} />
                <FieldDescription>Satıcı panelinde Hesap → Entegrasyonlar altında bulabilirsiniz.</FieldDescription>
              </Field>
            </FieldGroup>
          </CardContent>
        </Card>
      </SettingsGroup>
      <SettingsGroup index="02" label="Stok" hint="Pazaryerine stok değişikliklerinin ne zaman gideceği.">
        <Card>
          <CardContent>
            <SettingRow
              htmlFor="sync-stock"
              title="Stok değişikliklerini anında gönder"
              description="Kapalıysa stok 15 dakikada bir toplu gönderilir."
              control={<Switch id="sync-stock" defaultChecked />}
            />
          </CardContent>
        </Card>
      </SettingsGroup>
    </div>
  )
}
```

## API

### `Layout`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `columns` | `"one" \| "main-aside" \| "half" \| "third"` | `"one"` | Sütun ön ayarı. Tüm ön ayarlar mobilde tek sütuna düşer. |

### `SettingsGroup`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `label` (zorunlu) | `React.ReactNode` | - | Grup adı, h2 olarak render edilir. |
| `hint` | `React.ReactNode` | - | Bu gruptaki ayarların neyi değiştirdiği. |
| `index` | `string` | - | Etiketin üstündeki mono numara, örn. "01". Bölüm menüsü olan uzun sayfalarda. |