Bileşenler

ResultState

Bir görevin ya da akışın sonunda sonucu, bundan sonra ne olacağını ve sonraki adımları gösteren ekran.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

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

ResultState, @bigbang/ui paketindedir.

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

<ResultState
  tone="success"
  focusOnMount
  title="Başvurunuz alındı"
  description="Sonucu iki iş günü içinde e-postayla bildireceğiz."
  actions={<Button>Ana sayfaya dön</Button>}
/>;

Özellikler

toneZorunlu

Açıklama: Görevin nasıl bittiği: success; başarısız olduysa danger; sorunlarla bittiyse warning; başkasını bekliyorsa info.
Tür: AlertTone

titleZorunlu

Açıklama: Sonuç, birkaç sözcükle, ör. "Başvurunuz alındı".
Tür: ReactNode

description

Açıklama: Bundan sonra ne olacağı, bir ya da iki cümle.
Tür: ReactNode

actions

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

children

Açıklama: Metnin altındaki ayrıntılar, ör. bir başvuru numarası ya da kısa bir özet listesi.
Tür: ReactNode

headingLevel

Açıklama: Başlığın belge düzeyi.
Tür: 1 | 2 | 3
Varsayılan: 1

focusOnMount

Açıklama: Sonuç bir akışın son adımının yerini aldığında odağı başlığa taşır; ekran okuyucu sonucu hemen okur.
Tür: boolean
Varsayılan: false

size

Açıklama: sm daha sıkıdır, simge ve başlık daha küçüktür; bir Card ya da Drawer içindeki sonuç içindir. md sayfayı doldurur.
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="result-state" ve data-tone: kök üzerinde.