Bileşenler

ToggleGroup

Tek bir değeri paylaşan Toggle seti; tek sekme durağı, öğeler arasında ok tuşları.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Tek seçim

Varsayılan olarak bir öğeye basmak diğerlerini bırakır. defaultValue ilk basılı öğeyi verir.

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Single() {
  return (
    <ToggleGroup label="Metin hizası" defaultValue={['left']}>
      <Toggle value="left" icon="align-left" label="Sola hizala" />
      <Toggle value="center" icon="align-center" label="Ortala" />
      <Toggle value="right" icon="align-right" label="Sağa hizala" />
    </ToggleGroup>
  );
}

Çoklu seçim

multiple birden çok öğenin basılı kalmasına izin verir. variant ve size tüm öğelere aktarılır.

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Multiple() {
  return (
    <ToggleGroup label="Metin biçimi" multiple defaultValue={['bold']} variant="secondary">
      <Toggle value="bold" icon="bold" label="Kalın" />
      <Toggle value="italic" icon="italic" label="İtalik" />
      <Toggle value="underline" icon="underline" label="Altı çizili" />
    </ToggleGroup>
  );
}

Dikey

orientation="vertical" öğeleri alt alta dizer; odak yukarı ve aşağı ok tuşlarıyla taşınır.

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Vertical() {
  return (
    <ToggleGroup label="Metin hizası" orientation="vertical" defaultValue={['center']}>
      <Toggle value="left" icon="align-left">
        Sola hizala
      </Toggle>
      <Toggle value="center" icon="align-center">
        Ortala
      </Toggle>
      <Toggle value="right" icon="align-right">
        Sağa hizala
      </Toggle>
    </ToggleGroup>
  );
}

Kontrollü

value ve onValueChange ile basılı değerleri siz tutarsınız. Değer her zaman bir dizidir.

["left"]

import { Toggle, ToggleGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [value, setValue] = useState(['left']);
  return (
    <div className="flex items-center gap-md">
      <ToggleGroup label="Metin hizası" value={value} onValueChange={setValue} size="sm">
        <Toggle value="left" icon="align-left" label="Sola hizala" />
        <Toggle value="center" icon="align-center" label="Ortala" />
        <Toggle value="right" icon="align-right" label="Sağa hizala" />
      </ToggleGroup>
      <code className="type-body-sm text-fg-subtle">{JSON.stringify(value)}</code>
    </div>
  );
}

Açık ve koyu mod

Öğeler Toggle’ın token’larını kullanır; grup renk eklemez.

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Multiple() {
  return (
    <ToggleGroup label="Metin biçimi" multiple defaultValue={['bold']} variant="secondary">
      <Toggle value="bold" icon="bold" label="Kalın" />
      <Toggle value="italic" icon="italic" label="İtalik" />
      <Toggle value="underline" icon="underline" label="Altı çizili" />
    </ToggleGroup>
  );
}