Bileşenler

Spinner

Bir şey yüklenirken dönen açık yay; durumu ekran okuyucuya da bildirir.

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

Spinner role="status" taşır ve görünmeyen “Yükleniyor” metnini okutur.

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

export default function Default() {
  return <Spinner />;
}

Boyutlar

xs 12, sm 16, md 20 ve lg 24 px; ikon boyutu token’larını kullanır.

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

export default function Sizes() {
  return (
    <div className="flex items-center gap-lg">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

Tonlar

current çevredeki metin rengini, subtle ikincil metni, brand birincil eylem rengini alır; primary aynı rengi çizen eski addır.

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

export default function Tones() {
  return (
    <div className="flex items-center gap-lg text-fg-default">
      <Spinner size="md" tone="current" />
      <Spinner size="md" tone="subtle" />
      <Spinner size="md" tone="brand" />
    </div>
  );
}

Görünür metinle

Görünür bir metin durumu söylüyorsa Spinner’ı decorative yapın ve durum rolünü metnin kapsayıcısına verin.

Kaydediliyor

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

export default function WithText() {
  return (
    <div role="status" className="flex items-center gap-sm type-body-md text-fg-subtle">
      <Spinner decorative />
      <span>Kaydediliyor</span>
    </div>
  );
}

Açık ve koyu mod

Yay renk token’larından gelir; iki modda da aynı karşıtlığı korur.

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

export default function Tones() {
  return (
    <div className="flex items-center gap-lg text-fg-default">
      <Spinner size="md" tone="current" />
      <Spinner size="md" tone="subtle" />
      <Spinner size="md" tone="brand" />
    </div>
  );
}