Bileşenler

InlineAlert

İçeriğin içinde bir bölüm, form ya da sayfa hakkında bilgi, başarı, uyarı ya da hata mesajı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

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

InlineAlert, @bigbang/ui paketindedir.

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

<InlineAlert tone="danger" title="Form gönderilemedi" announce>
  İşaretli alanları düzeltip yeniden gönderin.
</InlineAlert>;

Özellikler

childrenZorunlu

Açıklama: Mesaj: ne olduğunu ve ne yapılacağını söyleyen bir ya da iki cümle.
Tür: ReactNode

tone

Açıklama: Anlam, renk ve ikon: nötr bilgi için info, success, dikkat isteyen durum için warning, işi durduran hata için danger.
Tür: AlertTone
Varsayılan: 'info'

title

Açıklama: Mesajın üstündeki kısa başlık.
Tür: ReactNode

actions

Açıklama: Mesajın altındaki en fazla iki buton ya da bağlantı, ör. ikincil bir Button ve bir Link.
Tür: ReactNode

dismissible

Açıklama: Kapat butonu gösterir. Uyarı söner ve onDismiss çalışır.
Tür: boolean
Varsayılan: false

onDismiss

Açıklama: Uyarı kapatılıp söndükten sonra çalışır.
Tür: () => void

dismissLabel

Açıklama: Kapat butonunun erişilebilir adı. Varsayılanı ui.alert.dismiss kütüphane metnidir ("Uyarıyı kapat" ya da "Dismiss").
Tür: string

announce

Açıklama: Sayfa yüklendikten sonra beliren uyarıyı okutur, ör. form gönderildikten sonra: danger role="alert", diğer tonlar role="status" alır. Sayfanın parçası olan uyarıda kapalı bırakın.
Tür: boolean
Varsayılan: false

className

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

Veri öznitelikleri

data-component="inline-alert" ve data-tone: kök üzerinde.
data-ending-style: kapanırken.