Switch

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Switch ray ile etiketi tek tıklama alanında toplar; etikete tıklamak da anahtarı değiştirir.

Seçenek etiketi

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

export default function Default() {
  return <Switch label="Seçenek etiketi" />;
}

Durumlar

Kapalı, açık, kaydediliyor (loading) ve devre dışı.

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

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Switch label="Seçenek etiketi" />
      <Switch label="Seçenek etiketi" defaultChecked />
      <Switch label="Seçenek etiketi" defaultChecked loading loadingLabel="Kaydediliyor" />
      <Switch label="Seçenek etiketi" disabled />
      <Switch label="Seçenek etiketi" disabled defaultChecked />
    </div>
  );
}

Açıklamalı

description etiketin altında durur ve anahtara aria-describedby ile bağlanır.

Seçenek etiketiSeçenek açıklaması burada yer alır.

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

export default function WithDescription() {
  return <Switch label="Seçenek etiketi" description="Seçenek açıklaması burada yer alır." defaultChecked />;
}

Değişikliği kaydetme

Anahtar yeni durumu hemen gösterir; kayıt sürerken loading başparmakta dönen halka gösterir ve yeni değişiklikleri yok sayar.

Seçenek etiketi

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

export default function SavingChange() {
  const [checked, setChecked] = useState(false);
  const [loading, setLoading] = useState(false);
  return (
    <Switch
      label="Seçenek etiketi"
      checked={checked}
      loading={loading}
      loadingLabel="Kaydediliyor"
      onCheckedChange={(next) => {
        setChecked(next);
        setLoading(true);
        setTimeout(() => setLoading(false), 1000);
      }}
    />
  );
}

Açık ve koyu mod

Açık ray color-action-primary-default dolgu alır.

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

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Switch label="Seçenek etiketi" />
      <Switch label="Seçenek etiketi" defaultChecked />
      <Switch label="Seçenek etiketi" defaultChecked loading loadingLabel="Kaydediliyor" />
      <Switch label="Seçenek etiketi" disabled />
      <Switch label="Seçenek etiketi" disabled defaultChecked />
    </div>
  );
}