StatusBadge

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

StatusBadge.tsx

Storybook

StatusBadge · Playground

StatusBadge, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<StatusBadge status="approved" />;

Özellikler

statusZorunlu

Açıklama

Gösterilecek durum. Sözlükteki bir anahtar ton, simge ve metne eşlenir; sayfa ton vermez. Sözlükte olmayan kod nötr metin olarak gösterilir ve geliştirmede bir kez uyarı verir.

Tür

'draft' | 'pending' | 'in-review' | 'active' | 'approved' | 'completed' | 'paused' | 'cancelled' | 'rejected' | 'failed' | 'expired' | 'archived' | (string & Record<never, never>)

size

Açıklama

Yükseklik ve yatay iç boşluk: 16 ve 20 px. Yoğun tablolarda sm kullanın.

Tür

NonNullable<'sm' | 'md'>

Varsayılan

'md'

variant

Açıklama

Rozetin vurgusu. Tablo ve listelerde subtle, dikkat gerektiren tek durum için bold kullanın.

Tür

NonNullable<'bold' | 'subtle' | 'outline'>

Varsayılan

'subtle'

label

Açıklama

Sözlük metninin yerine geçer, örneğin ürününüzün kendi terimiyle. Ton ve simge durumdan gelmeye devam eder.

Tür

string

announce

Açıklama

Durum değişince etiketi kibarca duyuran bir canlı bölge ekler. Arka plan işi gibi kullanıcı eylemi olmadan değişen durumlar için açın; liste ve tablolarda kapalı bırakın.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: kenar boşlukları ve hizalama. Renk ya da boyutu değiştirmek için kullanmayın.

Tür

string

Bunların dışında yerel <span> öznitelikleri (id, aria-*) rozete iletilir. Ton vermek mümkün değildir: ton sözlükten gelir.

Durum sözlüğü

statusVocabulary ve StatusKey türü paketten dışa aktarılır. Her giriş { tone, icon, label } içerir; label kitaplık metin kimliğidir (ui.status.<anahtar>).

import { statusVocabulary, type StatusKey } from '@bigbang/ui';

const keys = Object.keys(statusVocabulary) as StatusKey[];

Yeni bir durum eklemek için vocabulary.ts dosyasına bir giriş ekleyin ve strings.ts dosyasına iki dilde ui.status.<anahtar> metnini yazın; label olarak yazılmamış bir metin kimliği tür hatası verir.

Veri öznitelikleri

• data-component="status-badge", data-status: rozet öğesinde.
• data-part="icon": simge kabında (Badge’den).

Durum değişimini duyurma

<StatusBadge status={job.status} announce />