Bileşenler

EmptyState

Bir sayfa, panel ya da liste henüz boşken ya da arama sonuç vermediğinde gösterilen açıklama ve sonraki adım.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { EmptyState } from '@bigbang/ui';
Kaynak: EmptyState.tsx
Storybook: EmptyState · Playground

EmptyState, @bigbang/ui paketindedir.

import { Button, EmptyState } from '@bigbang/ui';

<EmptyState
  icon="search"
  title="Sonuç bulunamadı"
  description="Aramanızı değiştirip yeniden deneyin."
  actions={<Button variant="secondary">Filtreleri temizle</Button>}
/>;

Özellikler

titleZorunlu

Açıklama: Neyin boş olduğu, birkaç sözcükle, ör. "Henüz öğe yok".
Tür: ReactNode

description

Açıklama: Neden boş olduğu ve sonra ne yapılacağı, bir ya da iki cümle.
Tür: ReactNode

icon

Açıklama: Başlığın üstündeki yuvarlak alandaki ikon. media verilince kullanılmaz.
Tür: IconName
Varsayılan: 'file'

media

Açıklama: İkon yerine bir çizim; dekoratif olarak işaretleyin (alt="").
Tür: ReactNode

actions

Açıklama: Sonraki adım: bir birincil Button ve en fazla bir ikincil Button ya da Link.
Tür: ReactNode

headingLevel

Açıklama: Başlığın belge düzeyi. Sayfa ana hattına uyun: sayfa bölümünde 2, kart içinde 3.
Tür: 2 | 3 | 4
Varsayılan: 2

size

Açıklama: Sayfa ya da geniş panel için md; kart, tablo ya da menü içinde sm.
Tür: 'sm' | 'md'
Varsayılan: 'md'

className

Açıklama: Yalnızca yerleşim için: kenar boşlukları ve konum.
Tür: string

Veri öznitelikleri

data-component="empty-state": kök üzerinde.