---
title: "Bar List"
description: "Sıralı yatay liste: etiket hafif bir çubuğun üstünde, değer sağda. Çubuklar mount'ta sırayla kayarak dolar."
---

<Callout type="info" title="Ne zaman kullanılır">
En çok satan ürünler, trafik kaynakları, en çok iade edilenler gibi ilk 5–10 sıralaması. Zaman eksenli veri için Bar Chart kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/bar-list
```

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

## Örnekler

### En çok satan ürünler

Varsayılan mürekkep rengi, ciroya göre azalan sıra.

**Örnek: En çok satan ürünler** (`bar-list/top-products`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/bar-list/top-products)

```tsx
import { BarList } from "@/components/ikas/bar-list"

const money = (value: number) => new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY", maximumFractionDigits: 0 }).format(value)

export default function BarListTopProducts() {
  return (
    <BarList
      className="w-full max-w-md"
      aria-label="En çok satan ürünler"
      header={{ name: "Ürün", value: "Ciro" }}
      valueFormat={money}
      data={[
        { name: "Basic oversize tişört", value: 184320 },
        { name: "Keten gömlek", value: 132450 },
        { name: "Wide leg pantolon", value: 98760 },
        { name: "Kanvas çanta", value: 64210 },
        { name: "Örgü hırka", value: 41980 },
      ]}
    />
  )
}
```

### Trafik kaynakları

İkon ve href ile; satır link olur. color ile tek bir grafik rengi verilebilir.

**Örnek: Trafik kaynakları** (`bar-list/traffic`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/bar-list/traffic)

```tsx
import { CameraIcon, GlobeIcon, MailIcon, SearchIcon, ShoppingBagIcon } from "lucide-react"

import { BarList } from "@/components/ikas/bar-list"

export default function BarListTraffic() {
  return (
    <BarList
      className="w-full max-w-md"
      aria-label="Trafik kaynakları"
      header={{ name: "Kaynak", value: "Ziyaret" }}
      color="var(--chart-1)"
      data={[
        { name: "Arama motorları", value: 18420, icon: <SearchIcon />, href: "#" },
        { name: "Sosyal medya", value: 12960, icon: <CameraIcon />, href: "#" },
        { name: "Doğrudan", value: 9310, icon: <GlobeIcon />, href: "#" },
        { name: "E-posta bülteni", value: 4120, icon: <MailIcon />, href: "#" },
        { name: "Pazaryeri", value: 2870, icon: <ShoppingBagIcon />, href: "#" },
      ]}
    />
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Listeyi 5–10 satırla sınırlayın, gerisi için "Tümünü gör" linki verin.

**Yapmayın:**

- Satırları değerlerine göre farklı renklere boyamayın; uzunluk zaten değeri gösteriyor.

## API

### `BarList`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `data` (zorunlu) | `BarListItem[]` | - | Satırlar. |
| `color` | `string` | `"var(--chart-ink)"` | Çubuk rengi; %12 yoğunlukta yıkama olarak çizilir. |
| `valueFormat` | `(value: number) => string` | `defaultNumberFormat` | Sağdaki değer biçimi. |
| `sortOrder` | `"descending" \| "ascending" \| "none"` | `"descending"` | Sıralama. |
| `header` | `{ name: React.ReactNode; value: React.ReactNode }` | - | Liste üstündeki küçük sütun başlıkları. |
| `className` | `string` | - |  |
| `aria-label` | `string` | - | Accessible summary of what the list shows. |