Bileşenler

Banner

Uygulamanın ya da sayfanın tepesinde, altındaki her şeyi etkileyen durum için tam genişlik mesaj.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

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

Banner, @bigbang/ui paketindedir.

import { Banner, Link } from '@bigbang/ui';

<Banner tone="warning" action={<Link href="/durum">Ayrıntılar</Link>}>
  Bu gece 23.00 ile 01.00 arasında bakım yapılacak.
</Banner>;

Özellikler

childrenZorunlu

Açıklama: Mesaj: tüm uygulama ya da sayfa hakkında tek cümle, ör. planlı bakım.
Tür: ReactNode

tone

Açıklama: Anlam ve renk: duyurular için info, işi etkileyen durum için warning, kesinti ya da engellenmiş hesap için danger, nadiren success.
Tür: AlertTone
Varsayılan: 'info'

action

Açıklama: Mesajdan sonra tek bağlantı ya da buton, ör. "Ayrıntılar".
Tür: ReactNode

dismissible

Açıklama: Kapat butonu gösterir. Banner söner ve onDismiss çalışır; geri gelmemesi için kapatıldığını saklayın.
Tür: boolean
Varsayılan: false

onDismiss

Açıklama: Banner 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 banner'ı okutur: danger role="alert", diğer tonlar role="status" alır.
Tür: boolean
Varsayılan: false

Veri öznitelikleri

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