Uyarı

Bir uyarı, okura sayfa ya da yaptığı bir işlem hakkında bir şey söyler. Renk, simgeyi ve ARIA rolünü birlikte seçer: danger ve warning kendilerini role="alert" olarak duyurur, daha sessiz olan her şey kibar bir role="status" olur.

Renkler

Dikkat
sitelo’nun yeni bir sürümü var.
Dağıtıldı
1,7 saniyede 169 sayfa yayımlandı.
Not
Bu projede adalar kapalı.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Dikkat' }, 'sitelo’nun yeni bir sürümü var.'),
  alert({ color: 'success', title: 'Dağıtıldı' }, '1,7 saniyede 169 sayfa yayımlandı.'),
  alert({ color: 'warning', title: 'Yavaş sayfa' }, 'Bir sayfanın işlenmesi 500 ms’den uzun sürdü.'),
  alert({ color: 'danger', title: 'Derleme başarısız' }, 'İki iç bağlantı var olmayan sayfaları gösteriyor.'),
  alert({ color: 'neutral', title: 'Not' }, 'Bu projede adalar kapalı.'),
)

Başlıksız

Tek satırlık bir uyarının cümlenin üstünde bir başlığa ihtiyacı yoktur.

Kaydedildi.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Kaydedildi.'),
  alert({ color: 'danger' }, 'Bu e-posta adresi zaten kullanımda.'),
)

Türevler

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Varsayılan — renkli bir yüzey.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Saydam, renkli bir kenarlıkla.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Kaçırılmaması gereken bir şey için paletin tam rengi.'),
)

Simgeler

Her rengin varsayılan bir simgesi vardır. Kendi biçimlendirmenizi icon olarak geçirin ya da hiç olmaması için icon: false kullanın.

Simgesiz
Yalnızca metin.
Özel bir simge
Her SVG çalışır — simgeler bir bağımlılık değil, biçimlendirmedir.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Simgesiz' }, 'Yalnızca metin.'),
  alert({
    color: 'primary',
    title: 'Özel bir simge',
    icon: icon('star'),
  }, 'Her SVG çalışır — simgeler bir bağımlılık değil, biçimlendirmedir.'),
)

Kapatılabilir

Kapatma düğmesi kendi işleyicisini taşır:

onclick="import('/su/alert.js').then(m=>m.dismiss(this))"

Yani aşağıdaki uyarı, bu sayfada hiçbir şey içe aktarılmadan gerçekten kapanır. O modül hiç gelmezse düğme işlenir ve bir şey yapmaz; bu yüzden bir uyarı, bir iletinin göründüğü tek yer olmamalıdır.

Kapatılabilir
× işaretine tıklayın — işleyici ilk basışta kendini getirir.
alert({ color: 'primary', title: 'Kapatılabilir', dismissible: true },
  '× işaretine tıklayın — işleyici ilk basışta kendini getirir.',
)

Zengin içerik

Uyarılar her tür çocuğu alır, bu yüzden içinde bir eylem ya da bir liste yaşayabilir.

alert({ color: 'danger', title: 'Bağlantı denetimi başarısız' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'İki bağlantı üretilmemiş sayfaları gösteriyor:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: '/docs sayfasından bağlandı' }),
      listItem({ title: '/blog/draft', description: '/blog sayfasından bağlandı' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Ayrıntıları göster'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Yok say'),
    ),
  ),
)

Proplar

PropTürVarsayılanAçıklama
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Paleti, varsayılan simgeyi ve ARIA rolünü seçer.
variant'soft' | 'outline' | 'solid''soft'Uyarının taşıdığı ağırlık.
titleChild—Kalın ilk satır.
iconChild | false—Özel simge biçimlendirmesi ya da hiç olmaması için false.
dismissiblebooleanfalseKendi işleyicisini içe aktaran bir kapatma düğmesi ekler.
dismissLabelstring'Dismiss'O düğmenin erişilebilir adı.