Bileşenler

Toggle

Basılı kalan iki durumlu buton; bir ayarı açar ya da kapatır.

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ç

Varsayılan

Yalnızca ikon taşıyan Toggle bir label ister. Basılınca aria-pressed="true" olur ve dolgu ile kenarlık birlikte değişir.

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

export default function Default() {
  return <Toggle icon="bold" label="Kalın" />;
}

Metinli

children görünür metni verir ve düğmeyi adlandırır. defaultPressed ilk durumu basılı yapar.

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

export default function WithText() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="bold">Kalın</Toggle>
      <Toggle variant="secondary" defaultPressed>
        Öğe
      </Toggle>
    </div>
  );
}

Durumlar

tertiary basılana kadar kenarlıksızdır; secondary iki durumda da kenarlıklıdır. disabled düğmeyi kapatır.

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

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="italic" label="İtalik" />
      <Toggle icon="italic" label="İtalik" defaultPressed />
      <Toggle variant="secondary" icon="underline" label="Altı çizili" />
      <Toggle variant="secondary" icon="underline" label="Altı çizili" defaultPressed />
      <Toggle icon="bold" label="Kalın" disabled />
    </div>
  );
}

Kontrollü

pressed ve onPressedChange ile durumu siz tutarsınız.

false

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

export default function Controlled() {
  const [pressed, setPressed] = useState(false);
  return (
    <div className="flex items-center gap-md">
      <Toggle variant="secondary" icon="bold" label="Kalın" pressed={pressed} onPressedChange={setPressed} />
      <span className="type-body-sm text-fg-subtle">{pressed ? 'true' : 'false'}</span>
    </div>
  );
}

Açık ve koyu mod

Basılı dolgu color-surface-selected, kenarlık color-border-selected token’ından gelir.

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

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Toggle icon="italic" label="İtalik" />
      <Toggle icon="italic" label="İtalik" defaultPressed />
      <Toggle variant="secondary" icon="underline" label="Altı çizili" />
      <Toggle variant="secondary" icon="underline" label="Altı çizili" defaultPressed />
      <Toggle icon="bold" label="Kalın" disabled />
    </div>
  );
}