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

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Tek cümlelik mesaj ve isteğe bağlı tek bağlantı. Banner yoğun durum renklerini kullanır.

Bu gece 23.00 ile 01.00 arasında bakım yapılacak.Ayrıntılar

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

export default function Default() {
  return (
    <Banner tone="warning" action={<Link href="#details">Ayrıntılar</Link>}>
      Bu gece 23.00 ile 01.00 arasında bakım yapılacak.
    </Banner>
  );
}

Tonlar

Duyurular için info, işi etkileyen durum için warning, kesinti için danger.

Yeni özellikler eklendi.

Hizmet yeniden çalışıyor.

Bu gece 23.00 ile 01.00 arasında bakım yapılacak.

Hizmet şu anda kullanılamıyor.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <Banner tone="info">Yeni özellikler eklendi.</Banner>
      <Banner tone="success">Hizmet yeniden çalışıyor.</Banner>
      <Banner tone="warning">Bu gece 23.00 ile 01.00 arasında bakım yapılacak.</Banner>
      <Banner tone="danger">Hizmet şu anda kullanılamıyor.</Banner>
    </div>
  );
}

Kapatılabilir

Kapatınca banner söner ve kaldırılır. Kapatıldığını saklayın ki yeniden gelmesin.

Yeni özellikler eklendi.

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

export default function Dismissible() {
  return (
    <Banner tone="info" dismissible>
      Yeni özellikler eklendi.
    </Banner>
  );
}

Açık ve koyu mod

Zemin color-status-*-emphasis, metin color-status-*-on-emphasis token’larından gelir.

Yeni özellikler eklendi.

Hizmet yeniden çalışıyor.

Bu gece 23.00 ile 01.00 arasında bakım yapılacak.

Hizmet şu anda kullanılamıyor.

Yeni özellikler eklendi.

Hizmet yeniden çalışıyor.

Bu gece 23.00 ile 01.00 arasında bakım yapılacak.

Hizmet şu anda kullanılamıyor.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <Banner tone="info">Yeni özellikler eklendi.</Banner>
      <Banner tone="success">Hizmet yeniden çalışıyor.</Banner>
      <Banner tone="warning">Bu gece 23.00 ile 01.00 arasında bakım yapılacak.</Banner>
      <Banner tone="danger">Hizmet şu anda kullanılamıyor.</Banner>
    </div>
  );
}