SegmentedControl

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Seçeneği değiştirerek dolgunun yaya bağlı kaymasına bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

SegmentedControl 36 px yükseklikte gelir. Seçili seçenek, katman zemini üstünde kayan yükseltilmiş bir dolguyla gösterilir. label zorunludur.

GünlükHaftalıkAylık

import { SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function Default() {
  return (
    <SegmentedControl label="Dönem" items={items} defaultValue="week" />
  );
}

İkonlu

Her seçenek etiketten önce süs ikonu alabilir.

ListeIzgara

import { SegmentedControl } from '@bigbang/ui';

export default function WithIcons() {
  return (
    <SegmentedControl
      label="Görünüm"
      defaultValue="list"
      items={[
        { value: 'list', label: 'Liste', icon: 'list' },
        { value: 'grid', label: 'Izgara', icon: 'layout-grid' },
      ]}
    />
  );
}

Boyutlar

size 32 ya da 36 px yükseklik verir.

import { SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function Sizes() {
  return (
    <div className="flex flex-col items-start gap-lg">
      <SegmentedControl label="Dönem sm" items={items} defaultValue="day" size="sm" />
      <SegmentedControl label="Dönem md" items={items} defaultValue="day" />
    </div>
  );
}

Tam genişlik

fullWidth denetimi kapsayıcıya yayar; genişlik seçenekler arasında eşit bölünür.

GünlükHaftalıkAylık

import { SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function FullWidth() {
  return (
    <div className="w-full max-w-md">
      <SegmentedControl label="Dönem" items={items} defaultValue="month" fullWidth />
    </div>
  );
}

Devre dışı

Tek bir seçenek disabled alabilir; ok tuşları onu atlar. Denetimin tamamı için disabled verin.

GünlükHaftalıkAylıkYıllık

import { SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function Disabled() {
  return (
    <SegmentedControl
      label="Dönem"
      items={[...items, { value: 'year', label: 'Yıllık', disabled: true }]}
      defaultValue="day"
    />
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

import { SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
  { value: 'month', label: 'Aylık' },
];

export default function Default() {
  return (
    <SegmentedControl label="Dönem" items={items} defaultValue="week" />
  );
}