# LivaSplitter
Package: @dataliva/livalib
Description: @dataliva/livalib yeniden boyutlandırılabilir panel bileşeni.

DevExtreme'in Splitter bileşeni üzerine kurulu, kullanıcı tarafından
sürüklenerek yeniden boyutlandırılabilen panel container'ı. Paneller
`LivaSplitterItem` ile tanımlanır; her panele başlangıç boyutu, minimum boyut
ve daraltılabilirlik verilebilir. Splitter'lar iç içe kullanılarak karma
yerleşimler oluşturulabilir.

```tsx
import { LivaSplitter, LivaSplitterItem } from "@dataliva/livalib";
```

## Temel Kullanım

`size` panelin başlangıç boyutunu, `minSize` sürükleme sırasındaki alt sınırı
belirler. `collapsible` verilen panel, ayıraç üzerindeki ok ile tamamen
daraltılabilir.

**Örnek — Temel kullanım — yeniden boyutlandırılabilir iki panel:**

```tsx
const pane = (bg: string): CSSProperties => ({
  height: "100%",
  padding: 16,
  boxSizing: "border-box",
  background: bg,
});

<LivaSplitter height={300} width="100%">
  <LivaSplitterItem size="30%" minSize="15%" collapsible>
    <div style={pane("rgba(14, 165, 233, 0.10)")}>
      <strong>Gezinti</strong>
      <p>Sol panel. Ayıracı sürükleyerek genişliği değiştirin, ok simgesiyle paneli daraltın.</p>
    </div>
  </LivaSplitterItem>
  <LivaSplitterItem>
    <div style={pane("rgba(16, 185, 129, 0.10)")}>
      <strong>İçerik</strong>
      <p>Sağ panel kalan alanı doldurur.</p>
    </div>
  </LivaSplitterItem>
</LivaSplitter>
```

## İç İçe Bölmeler

Bir `LivaSplitterItem` içine ikinci bir `LivaSplitter` yerleştirilerek
yatay + dikey karma düzenler kurulur. `orientation="vertical"` panelleri
alt alta böler.

**Örnek — İç içe bölmeler — dikey yönelim:**

```tsx
<LivaSplitter height={340} width="100%">
  <LivaSplitterItem size="35%" collapsible>
    <div style={pane("rgba(14, 165, 233, 0.10)")}>
      <strong>Sol Panel</strong>
      <p>Daraltılabilir gezinti alanı.</p>
    </div>
  </LivaSplitterItem>
  <LivaSplitterItem>
    <LivaSplitter orientation="vertical">
      <LivaSplitterItem size="50%">
        <div style={pane("rgba(16, 185, 129, 0.10)")}>
          <strong>Sağ Üst</strong>
          <p>Dikey ayıracı sürükleyerek yüksekliği değiştirin.</p>
        </div>
      </LivaSplitterItem>
      <LivaSplitterItem>
        <div style={pane("rgba(234, 88, 12, 0.10)")}>
          <strong>Sağ Alt</strong>
          <p>İç içe splitter ile karma yerleşimler kurulabilir.</p>
        </div>
      </LivaSplitterItem>
    </LivaSplitter>
  </LivaSplitterItem>
</LivaSplitter>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `allowKeyboardNavigation` | `boolean` | `true` |
| `separatorSize` | `number` | `8` |
| `dataSource` | `Array \| DataSource` | — |
| `items` | `Item[]` | — |
| `height` | `number \| string` | — |
| `width` | `number \| string` | — |
| `onResizeStart` | `(e) => void` | — |
| `onResize` | `(e) => void` | — |
| `onResizeEnd` | `(e) => void` | — |
| `onItemCollapsed` | `(e) => void` | — |
| `onItemExpanded` | `(e) => void` | — |
| `className` | `string` | `''` |
| `children` | `React.ReactNode` | — |

Ayrıca DevExtreme `ISplitterOptions`'tan gelen tüm prop'lar kullanılabilir.

### LivaSplitterItem

| Prop | Tip | Varsayılan |
|------|------|---------|
| `size` | `number \| string` | — |
| `minSize` | `number \| string` | — |
| `maxSize` | `number \| string` | — |
| `resizable` | `boolean` | `true` |
| `collapsible` | `boolean` | `false` |
| `collapsed` | `boolean` | `false` |
| `visible` | `boolean` | `true` |
| `children` | `React.ReactNode` | — |