Bileşenler

StatusBadge

Bir durumu, ortak durum sözlüğünden ton, simge ve metinle gösterir.

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

status tek zorunlu özelliktir. Sözlükteki anahtar tonu, simgeyi ve metni belirler; ton vermezsiniz. Metin Provider’ın diline göre gelir.

Etkin

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

export default function Default() {
  return <StatusBadge status="active" />;
}

Tüm durumlar

Başlangıç sözlüğü on iki durum içerir. Her durumun tonu, simgesi ve metni sabittir; böylece aynı durum her ekranda aynı görünür.

TaslakBeklemedeİnceleniyorEtkinOnaylandıTamamlandıDuraklatıldıİptal edildiReddedildiBaşarısızSüresi dolduArşivlendi

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

export default function Statuses() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="draft" />
      <StatusBadge status="pending" />
      <StatusBadge status="in-review" />
      <StatusBadge status="active" />
      <StatusBadge status="approved" />
      <StatusBadge status="completed" />
      <StatusBadge status="paused" />
      <StatusBadge status="cancelled" />
      <StatusBadge status="rejected" />
      <StatusBadge status="failed" />
      <StatusBadge status="expired" />
      <StatusBadge status="archived" />
    </div>
  );
}

Varyantlar

subtle tablo ve listeler içindir. bold dikkat gerektiren tek bir durum için kullanılır. Varyant sözlükteki tonu değiştirmez; yalnızca vurguyu artırır.

OnaylandıOnaylandıBaşarısızBaşarısız

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="approved" />
      <StatusBadge status="approved" variant="bold" />
      <StatusBadge status="failed" />
      <StatusBadge status="failed" variant="bold" />
    </div>
  );
}

Boyutlar

size yüksekliği ve iç boşluğu belirler: sm 16 px, md 20 px. Yoğun tablolarda sm kullanın.

BeklemedeBeklemede

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="pending" size="sm" />
      <StatusBadge status="pending" size="md" />
    </div>
  );
}

Özel metin

label yalnızca metni değiştirir; ton ve simge durumun kendisinden gelir. Ürününüzün kendi terimini kullanmak gerektiğinde işe yarar.

Yayında

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

export default function Label() {
  return <StatusBadge status="active" label="Yayında" />;
}

Durum değişimi

Durum değişince rozet yeniden oluşturulur ve yeni durum yumuşakça belirir. announce ile değişiklik ekran okuyucuya kibarca duyurulur; bunu kullanıcı eylemi olmadan değişen durumlar için açın.

Taslak

import { Button, StatusBadge, type StatusKey } from '@bigbang/ui';
import { useState } from 'react';

const sequence: StatusKey[] = ['draft', 'pending', 'in-review', 'approved', 'completed'];

export default function StatusChange() {
  const [index, setIndex] = useState(0);
  return (
    <div className="flex items-center gap-xl">
      <div className="min-w-32">
        <StatusBadge status={sequence[index % sequence.length] ?? 'draft'} announce />
      </div>
      <Button size="sm" variant="secondary" onClick={() => setIndex((current) => current + 1)}>
        Sonraki durum
      </Button>
    </div>
  );
}

Bilinmeyen durum

Sözlükte olmayan bir kod nötr tonda ve ham kodla gösterilir; geliştirme sırasında konsolda bir kez uyarı verilir. Bu bir kurtarma yoludur: sözlüğe eksik durumu ekleyin.

on-hold

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

export default function Unknown() {
  return <StatusBadge status="on-hold" />;
}

Açık ve koyu mod

StatusBadge tüm renklerini durum token’larından alır; iki modda da metin kontrastı korunur.

OnaylandıOnaylandıBaşarısızBaşarısız

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="approved" />
      <StatusBadge status="approved" variant="bold" />
      <StatusBadge status="failed" />
      <StatusBadge status="failed" variant="bold" />
    </div>
  );
}