Alert

Alert mówi czytającemu coś o stronie albo o akcji, którą wykonał. Kolor dobiera razem ikonę i rolę ARIA: danger i warning zapowiadają się jako role="alert", a wszystko cichsze jako uprzejme role="status".

Kolory

Uwaga
Dostępna jest nowa wersja sitelo.
Wdrożone
Opublikowano 169 stron w 1,7 sekundy.
Uwaga
W tym projekcie wyspy są wyłączone.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Uwaga' }, 'Dostępna jest nowa wersja sitelo.'),
  alert({ color: 'success', title: 'Wdrożone' }, 'Opublikowano 169 stron w 1,7 sekundy.'),
  alert({ color: 'warning', title: 'Wolna strona' }, 'Jedna strona renderowała się dłużej niż 500 ms.'),
  alert({ color: 'danger', title: 'Build nieudany' }, 'Dwa wewnętrzne odnośniki prowadzą do stron, które nie istnieją.'),
  alert({ color: 'neutral', title: 'Uwaga' }, 'W tym projekcie wyspy są wyłączone.'),
)

Bez tytułu

Jednowierszowy alert nie potrzebuje nagłówka nad zdaniem.

Zapisano.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Zapisano.'),
  alert({ color: 'danger' }, 'Ten adres e-mail jest już zajęty.'),
)

Warianty

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Domyślny — zabarwiona powierzchnia.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Przezroczysty, z kolorowym obramowaniem.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Pełny kolor palety, na coś, czego nie wolno przeoczyć.'),
)

Ikony

Każdy kolor ma domyślną ikonę. Podaj własne znaczniki jako icon albo icon: false, żeby nie było żadnej.

Bez ikony
Sam tekst.
Własna ikona
Zadziała dowolny SVG — ikony to znaczniki, a nie zależność.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Bez ikony' }, 'Sam tekst.'),
  alert({
    color: 'primary',
    title: 'Własna ikona',
    icon: icon('star'),
  }, 'Zadziała dowolny SVG — ikony to znaczniki, a nie zależność.'),
)

Do zamknięcia

Przycisk zamykający niesie własny handler:

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

Więc alert poniżej naprawdę się zamyka, choć na tej stronie nic nie zostało zaimportowane. Jeśli ten moduł nigdy nie dotrze, przycisk się wyrenderuje i nic nie zrobi — i właśnie dlatego alert nigdy nie powinien być jedynym miejscem, w którym pojawia się komunikat.

Do zamknięcia
Kliknij × — handler sam się pobiera przy pierwszym naciśnięciu.
alert({ color: 'primary', title: 'Do zamknięcia', dismissible: true },
  'Kliknij × — handler sam się pobiera przy pierwszym naciśnięciu.',
)

Bogata treść

Alerty przyjmują dowolne dzieci, więc akcja albo lista może siedzieć w środku.

alert({ color: 'danger', title: 'Sprawdzanie odnośników nieudane' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Dwa odnośniki prowadzą do stron, które nie powstały:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'podlinkowane z /docs' }),
      listItem({ title: '/blog/draft', description: 'podlinkowane z /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Pokaż szczegóły'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Zignoruj'),
    ),
  ),
)

Propsy

PropTypDomyślnieOpis
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Dobiera paletę, domyślną ikonę i rolę ARIA.
variant'soft' | 'outline' | 'solid''soft'Ile wagi niesie alert.
titleChild—Pogrubiony pierwszy wiersz.
iconChild | false—Znaczniki własnej ikony albo false, by jej nie było.
dismissiblebooleanfalseDodaje przycisk zamykający, który sam importuje swój handler.
dismissLabelstring'Dismiss'Dostępna nazwa tego przycisku.