ToastStack

ToastStack é a região que a página monta uma vez para renderizar o que estiver na fila de toasts. Ela cuida de posição, empilhamento e dispensa; não decide quando um toast aparece — isso é trabalho do store, e qualquer código com acesso a ele pode enfileirar um.

Em React não existe componente com este nome: lá a mesma região é renderizada pelo ToastProvider. A diferença existe porque Alpine não tem forma de provider — um store mais um ponto de montagem fazem o mesmo trabalho com menos peças.

Quando usar

Monte exatamente um ToastStack por documento, perto do fim do <body>, e deixe-o lá. Todo o resto conversa com o store.

Prefira outra coisa quando:

A mensagem pertence a um campo ou formulário específico — use Alert, que fica no fluxo, ao lado do que descreve, e não some sozinha.
A mensagem precisa de resposta antes de qualquer outra coisa — use Dialog, que bloqueia.
A página ainda não tem nada a anunciar — uma fila vazia não renderiza nada, então não há estado vazio a desenhar.

Acessibilidade

A região anuncia de forma educada: um toast é informação complementar, e interromper o leitor de tela no meio de uma frase por causa dele é a troca errada.
A dispensa é alcançável pelo teclado em todo toast — o temporizador é conveniência, nunca a única saída.
Os toasts empilham na ordem da fila, então a ordem de leitura acompanha a ordem visual.

API e código

React: Em React a fila é renderizada pelo ToastProvider, não por um componente próprio.

x-data="lyraToastStack({ … })"

Este binding não recebe opções — monte e ele funciona.

A pilha não recebe opções — ela renderiza o que estiver no store. Monte uma por documento e enfileire toasts de qualquer lugar com $store.lyraToasts:

html

<div class="lyra-toast-stack" x-data="lyraToastStack()">
  <template x-for="toast in toasts" :key="toast.id">
    <div class="lyra-toast" role="status">
      <span class="lyra-toast__icon" :class="toneClass(toast.tone)"></span>
      <span x-text="toast.message"></span>
      <button class="lyra-toast__close" :data-toast-id="toast.id" x-bind="closeButton">×</button>
    </div>
  </template>
</div>

Cada toast carrega o próprio id, então o botão de fechar o lê do elemento em vez de um closure. toneClass() mapeia o tom para o modificador do ícone; o ícone em si é você quem fornece.

<lyra:toast-stack> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraToastStack() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Este componente não recebe props — é só usar a tag.

blade

<lyra:toast-stack />