# LivaResponsiveBox
Package: @dataliva/livalib
Description: @dataliva/livalib duyarlı grid yerleşim bileşeni.

DevExtreme'in ResponsiveBox bileşeni üzerine kurulu, satır/sütun oranlarıyla
çalışan duyarlı yerleşim container'ı. Izgara `LivaResponsiveBoxRow` ve
`LivaResponsiveBoxCol` ile tanımlanır; her `LivaResponsiveBoxItem`,
`LivaResponsiveBoxLocation` aracılığıyla ızgaradaki hücresine yerleştirilir.

```tsx
import {
  LivaResponsiveBox,
  LivaResponsiveBoxRow,
  LivaResponsiveBoxCol,
  LivaResponsiveBoxItem,
  LivaResponsiveBoxLocation,
} from "@dataliva/livalib";
```

## Sayfa Düzeni

Üst bilgi ve alt bilgi `colspan={2}` ile iki sütuna yayılır; orta satır menü
ve içerik olarak 1:3 oranında bölünür.

**Örnek — Klasik sayfa düzeni:**

```tsx
const box = (bg: string): CSSProperties => ({
  height: "100%",
  margin: 4,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: 8,
  color: "#fff",
  fontSize: 14,
  fontWeight: 600,
  background: bg,
});

<LivaResponsiveBox height={320} width="100%">
  <LivaResponsiveBoxRow ratio={1} />
  <LivaResponsiveBoxRow ratio={2} />
  <LivaResponsiveBoxRow ratio={1} />
  <LivaResponsiveBoxCol ratio={1} />
  <LivaResponsiveBoxCol ratio={3} />
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={0} col={0} colspan={2} />
    <div style={box("#0284c7")}>Üst Bilgi</div>
  </LivaResponsiveBoxItem>
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={1} col={0} />
    <div style={box("#0891b2")}>Menü</div>
  </LivaResponsiveBoxItem>
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={1} col={1} />
    <div style={box("#059669")}>İçerik</div>
  </LivaResponsiveBoxItem>
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={2} col={0} colspan={2} />
    <div style={box("#475569")}>Alt Bilgi</div>
  </LivaResponsiveBoxItem>
</LivaResponsiveBox>
```

## Oranlar

Satır ve sütunların `ratio` değerleri, kullanılabilir alanın hangi oranda
paylaşılacağını belirler.

**Örnek — Oranlı sütunlar (1 : 2 : 1):**

```tsx
<LivaResponsiveBox height={140} width="100%">
  <LivaResponsiveBoxRow ratio={1} />
  <LivaResponsiveBoxCol ratio={1} />
  <LivaResponsiveBoxCol ratio={2} />
  <LivaResponsiveBoxCol ratio={1} />
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={0} col={0} />
    <div style={box("#7c3aed")}>ratio 1</div>
  </LivaResponsiveBoxItem>
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={0} col={1} />
    <div style={box("#db2777")}>ratio 2</div>
  </LivaResponsiveBoxItem>
  <LivaResponsiveBoxItem>
    <LivaResponsiveBoxLocation row={0} col={2} />
    <div style={box("#ea580c")}>ratio 1</div>
  </LivaResponsiveBoxItem>
</LivaResponsiveBox>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `rows` | `Row[]` | — |
| `cols` | `Col[]` | — |
| `dataSource` | `Array \| DataSource` | — |
| `items` | `Item[]` | — |
| `screenByWidth` | `(width: number) => string` | — |
| `singleColumnScreen` | `string` | `''` |
| `height` | `number \| string` | — |
| `width` | `number \| string` | — |
| `onItemClick` | `(e) => void` | — |
| `className` | `string` | `''` |
| `children` | `React.ReactNode` | — |

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

### LivaResponsiveBoxRow / LivaResponsiveBoxCol

| Prop | Tip | Varsayılan |
|------|------|---------|
| `ratio` | `number` | `1` |
| `baseSize` | `number` | `0` |
| `shrink` | `number` | `1` |
| `screen` | `string` | — |

### LivaResponsiveBoxItem

| Prop | Tip | Varsayılan |
|------|------|---------|
| `location` | `Location \| Location[]` | — |
| `template` | `any` | — |
| `visible` | `boolean` | `true` |
| `children` | `React.ReactNode` | — |

### LivaResponsiveBoxLocation

| Prop | Tip | Varsayılan |
|------|------|---------|
| `row` | `number` | — |
| `col` | `number` | — |
| `colspan` | `number` | — |
| `rowspan` | `number` | — |
| `screen` | `string` | — |