Avviso

Un avviso dice a chi legge qualcosa sulla pagina o su un’azione che ha compiuto. Il colore sceglie insieme l’icona e il ruolo ARIA: danger e warning si annunciano come role="alert", tutto ciò che è più sommesso è un garbato role="status".

Colori

Attenzione
È disponibile una nuova versione di sitelo.
Pubblicato
169 pagine pubblicate in 1,7 secondi.
Nota
In questo progetto le island sono disattivate.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Attenzione' }, 'È disponibile una nuova versione di sitelo.'),
  alert({ color: 'success', title: 'Pubblicato' }, '169 pagine pubblicate in 1,7 secondi.'),
  alert({ color: 'warning', title: 'Pagina lenta' }, 'Una pagina ha impiegato più di 500 ms per essere renderizzata.'),
  alert({ color: 'danger', title: 'Build fallita' }, 'Due link interni puntano a pagine che non esistono.'),
  alert({ color: 'neutral', title: 'Nota' }, 'In questo progetto le island sono disattivate.'),
)

Senza titolo

Un avviso di una riga non ha bisogno di un’intestazione sopra la frase.

Salvato.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Salvato.'),
  alert({ color: 'danger' }, 'Quell’indirizzo email è già in uso.'),
)

Varianti

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'La predefinita — una superficie tinta.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Trasparente, con un bordo colorato.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Il colore pieno della palette, per qualcosa che non deve sfuggire.'),
)

Icone

Ogni colore ha un’icona predefinita. Passa il tuo markup come icon, oppure icon: false per non averne alcuna.

Nessuna icona
Solo il testo.
Un’icona personalizzata
Va bene qualunque SVG — le icone sono markup, non una dipendenza.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Nessuna icona' }, 'Solo il testo.'),
  alert({
    color: 'primary',
    title: 'Un’icona personalizzata',
    icon: icon('star'),
  }, 'Va bene qualunque SVG — le icone sono markup, non una dipendenza.'),
)

Richiudibile

Il pulsante di chiusura porta con sé il proprio handler:

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

Quindi l’avviso qui sotto si chiude davvero senza che nulla sia stato importato in questa pagina. Se quel modulo non arriva mai, il pulsante viene renderizzato e non fa nulla, ed è per questo che un avviso non dovrebbe mai essere l’unico posto in cui un messaggio compare.

Richiudibile
Clicca la × — l’handler si scarica da sé alla prima pressione.
alert({ color: 'primary', title: 'Richiudibile', dismissible: true },
  'Clicca la × — l’handler si scarica da sé alla prima pressione.',
)

Contenuto ricco

Gli avvisi accettano qualunque figlio, quindi un’azione o un elenco possono vivere al loro interno.

alert({ color: 'danger', title: 'Controllo dei link fallito' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Due link puntano a pagine che non sono state generate:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'collegato da /docs' }),
      listItem({ title: '/blog/draft', description: 'collegato da /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Mostra i dettagli'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Ignora'),
    ),
  ),
)

Props

PropTipoPredefinitoDescrizione
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Sceglie la palette, l’icona predefinita e il ruolo ARIA.
variant'soft' | 'outline' | 'solid''soft'Quanto peso porta l’avviso.
titleChild—Prima riga in grassetto.
iconChild | false—Markup di un’icona personalizzata, oppure false per nessuna.
dismissiblebooleanfalseAggiunge un pulsante di chiusura che importa il proprio handler.
dismissLabelstring'Dismiss'Nome accessibile di quel pulsante.