Toast

Le toast est le seul composant ici qui ne peut pas être statique : il apparaît en réponse à un événement. La page rend une zone vide avec toasts(), et toast() depuis sitelo/ui/client y ajoute des éléments.

La zone est une région live polie : tout ce qu’on y ajoute est annoncé sans voler le focus.

Mise en place

Placez la zone n’importe où dans le body — elle est en position fixe, donc l’endroit importe peu :

import { toasts } from 'sitelo/ui'

body(
  // …la page…
  toasts(),
)

C’est la seule partie du runtime que rien dans la page ne déclenche pour vous : c’est donc la seule que vous atteignez vous-même, depuis un attribut d’événement et sans rien dans le bundle :

button({ onclick: "import('/su/toast.js').then(m=>m.toast('Enregistré.',{color:'success'}))" }, 'Enregistrer')

Ou depuis votre propre module, quand il y en a déjà un qui tourne :

import { toast } from 'sitelo/ui/client'

toast('Enregistré.', { color: 'success' })

Essayez

Cette page rend une zone toasts() et les boutons ci-dessous vont chercher le runtime eux-mêmes : ils produisent donc de vrais toasts — en bas à droite. Rien n’est chargé tant que vous n’en pressez pas un.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Enregistré.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Deux pages n’ont pas de méta description.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('Le build a échoué. Voyez le rapport de liens.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Celui-ci reste jusqu’à ce que vous le fermiez.',{color:'neutral',duration:0}))",
  }, 'Jusqu’à fermeture'),
)

Options

duration est la durée d’affichage, en millisecondes ; 0 le laisse jusqu’à ce que quelqu’un le ferme. Chaque toast a un bouton de fermeture, câblé sur le même gestionnaire que celui d’une alerte.

toast('Enregistré.', { color: 'success' })
toast('Toujours en cours…', { color: 'neutral', duration: 0 })
toast('Déployé en 1,7 s', { color: 'success', duration: 8000 })

Ce qu’il rend

Un toast est une alert() dans la zone des toasts — même balisage, mêmes couleurs, même bouton de fermeture. Rien de nouveau à apprendre, et rien de plus à styler.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Enregistré.'),
  alert({ color: 'danger', dismissible: true }, 'Le build a échoué. Voyez le rapport de liens.'),
)

Quand en utiliser un

Un toast sert à confirmer ce que le lecteur vient de faire. C’est le mauvais endroit pour ce sur quoi il doit agir ou qu’il doit lire attentivement — il disparaît, il est facile à manquer, et sur un site statique la plupart des messages ont leur place dans la page elle-même, sous forme d’alert().

Props

toasts() ne prend aucune prop. toast() depuis sitelo/ui/client :

Il renvoie l’élément ajouté, ou null quand la page n’a pas de zone toasts().