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

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Varsayılan ton info. Başlık isteğe bağlıdır; ekran okuyucular tonu başlığın önünde duyar (“Bilgi:”).

Bilgi: Yeni sürüm hazır

Sayfayı yenilediğinizde yeni sürüm açılır.

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

export default function Default() {
  return (
    <InlineAlert title="Yeni sürüm hazır">
      Sayfayı yenilediğinizde yeni sürüm açılır.
    </InlineAlert>
  );
}

Tonlar

Her ton kendi zemin rengini ve ikonunu kullanır; kenarlık her tonda nötrdür. Ton yalnızca renkle değil, ikon şekli ve okunan önekle de anlatılır.

Bilgi: Yeni sürüm hazır

Sayfayı yenilediğinizde yeni sürüm açılır.

Başarılı: Ayarlar kaydedildi

Değişiklikler bir sonraki girişinizde de geçerli olacak.

Uyarı: Bağlantı yavaş

Değişiklikler gecikmeli kaydedilebilir.

Hata: Form gönderilemedi

İşaretli alanları düzeltip yeniden gönderin.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <InlineAlert tone="info" title="Yeni sürüm hazır">
        Sayfayı yenilediğinizde yeni sürüm açılır.
      </InlineAlert>
      <InlineAlert tone="success" title="Ayarlar kaydedildi">
        Değişiklikler bir sonraki girişinizde de geçerli olacak.
      </InlineAlert>
      <InlineAlert tone="warning" title="Bağlantı yavaş">
        Değişiklikler gecikmeli kaydedilebilir.
      </InlineAlert>
      <InlineAlert tone="danger" title="Form gönderilemedi">
        İşaretli alanları düzeltip yeniden gönderin.
      </InlineAlert>
    </div>
  );
}

Eylemli

actions mesajın altına en fazla iki küçük buton ya da bağlantı koyar.

Hata: Form gönderilemedi

İşaretli alanları düzeltip yeniden gönderin.

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

export default function WithActions() {
  return (
    <InlineAlert
      tone="danger"
      title="Form gönderilemedi"
      actions={
        <>
          <Button size="sm" variant="secondary">
            Yeniden dene
          </Button>
          <Button size="sm" variant="tertiary">
            Ayrıntılar
          </Button>
        </>
      }
    >
      İşaretli alanları düzeltip yeniden gönderin.
    </InlineAlert>
  );
}

Kapatılabilir

Kapatınca uyarı söner, ardından kaldırılır ve odak bir sonraki kontrole geçer.

Bilgi: Yeni sürüm hazır

Sayfayı yenilediğinizde yeni sürüm açılır.

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

export default function Dismissible() {
  return (
    <InlineAlert dismissible title="Yeni sürüm hazır">
      Sayfayı yenilediğinizde yeni sürüm açılır.
    </InlineAlert>
  );
}

Açık ve koyu mod

Zemin color-status-*-background, kenarlık color-border-subtle, mesaj color-text-subtle token’ından gelir.

Bilgi: Yeni sürüm hazır

Sayfayı yenilediğinizde yeni sürüm açılır.

Başarılı: Ayarlar kaydedildi

Değişiklikler bir sonraki girişinizde de geçerli olacak.

Uyarı: Bağlantı yavaş

Değişiklikler gecikmeli kaydedilebilir.

Hata: Form gönderilemedi

İşaretli alanları düzeltip yeniden gönderin.

Bilgi: Yeni sürüm hazır

Sayfayı yenilediğinizde yeni sürüm açılır.

Başarılı: Ayarlar kaydedildi

Değişiklikler bir sonraki girişinizde de geçerli olacak.

Uyarı: Bağlantı yavaş

Değişiklikler gecikmeli kaydedilebilir.

Hata: Form gönderilemedi

İşaretli alanları düzeltip yeniden gönderin.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <InlineAlert tone="info" title="Yeni sürüm hazır">
        Sayfayı yenilediğinizde yeni sürüm açılır.
      </InlineAlert>
      <InlineAlert tone="success" title="Ayarlar kaydedildi">
        Değişiklikler bir sonraki girişinizde de geçerli olacak.
      </InlineAlert>
      <InlineAlert tone="warning" title="Bağlantı yavaş">
        Değişiklikler gecikmeli kaydedilebilir.
      </InlineAlert>
      <InlineAlert tone="danger" title="Form gönderilemedi">
        İşaretli alanları düzeltip yeniden gönderin.
      </InlineAlert>
    </div>
  );
}