Componente de torrada

Brinde CSS Tailwind somente CSS para posicionamento de notificação: posicionamento superior, inferior, inicial, final e central. Sem JavaScript para layout. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do Toast exibem notificações breves e não intrusivas posicionadas nas bordas da tela. Construídos com posicionamento fixo e componentes de alerta, os brindes comunicam feedback do sistema, como confirmações de sucesso, mensagens de erro ou atualizações de status. O sistema brinde Frutjam suporta seis posições de posicionamento, ideal para envios de formulários, operações assíncronas e notificações em tempo real.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura: funciona com Django, HTMX, Laravel, React e qualquer pilha.

Uso Básico

1
2
3
4
5

<div role="status" aria-live="polite" class="toast">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { useToast } from 'frutjam/react'

export default function ToastDemo() {
  const toast = useToast()
  return (
    <>
      <button className="btn" onClick={() => toast.info('New message arrived.')}>Show Toast</button>
      <div role="status" aria-live="polite" className="toast">
        {toast.toasts.map(t => (
          <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}>
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </>
  )
}

Posições de torradas

Principais posições

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div role="status" aria-live="polite" class="toast toast-top toast-start">
  <div class="alert alert-info"><span>Top Start</span></div>
</div>

<div role="status" aria-live="polite" class="toast toast-top toast-center">
  <div class="alert alert-info"><span>Top Center</span></div>
</div>

<div role="status" aria-live="polite" class="toast toast-top toast-end">
  <div class="alert alert-info"><span>Top End</span></div>
</div>

Posições inferiores

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div role="status" aria-live="polite" class="toast toast-bottom toast-start">
  <div class="alert alert-info"><span>Bottom Start</span></div>
</div>

<div role="status" aria-live="polite" class="toast toast-bottom toast-center">
  <div class="alert alert-info"><span>Bottom Center</span></div>
</div>

<div role="status" aria-live="polite" class="toast toast-bottom toast-end">
  <div class="alert alert-info"><span>Bottom End</span></div>
</div>

Centralizado

Um modificador horizontal e um vertical se combinam, então toast-center toast-middle coloca um brinde no meio da tela.

1
2
3

<div role="status" aria-live="polite" class="toast toast-middle toast-center">
  <div class="alert alert-info"><span>Middle Center</span></div>
</div>

Animação de entrada

Cada torrada desaparece e se ajusta por conta própria. Não há nada a acrescentar a isso e nenhuma classe para ativá-lo.

O toast-slide-* modificadores são para quando você deseja uma direção diferente do aumento padrão. Escolha a borda em que a torrada fica, para que ela entre de fora da tela e não através dela: toast-slide-end pertence a toast-end, toast-slide-down com toast-top.

1
2
3

<div role="status" aria-live="polite" class="toast toast-top toast-end toast-slide-down">
  <div class="alert alert-info"><span>Drops in from the top</span></div>
</div>

A distância é a largura ou altura da própria torrada, e não a distância até a borda da tela, portanto, uma torrada centralizada começa perto do meio, e não fora da tela.

Não há animação de saída. Um brinde desaparece no momento em que é removido da página, porque o CSS não tem estado para fazer a transição. Desaparecer significa mantê-lo no DOM e animá-lo você mesmo.

A animação é ignorada para quem solicitou movimento reduzido.

Largura

Cada torrada é limitada a 24rem portanto, uma mensagem longa não ocupa a tela do telefone. Substituir --toast--width para mudar isso.

1
2
3

<div role="status" aria-live="polite" class="toast [--toast--width:32rem]">
  <div class="alert alert-info"><span>A wider toast.</span></div>
</div>

Cores do brinde

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div role="status" aria-live="polite" class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>File saved successfully.</span>
  </div>
  <div class="alert alert-warning">
    <span>Storage is almost full.</span>
  </div>
  <div class="alert alert-error">
    <span>Connection failed.</span>
  </div>
  <div class="alert alert-info">
    <span>Update available.</span>
  </div>
</div>

Vários brindes

1
2
3
4
5
6
7
8

<div role="status" aria-live="polite" class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>Profile updated.</span>
  </div>
  <div class="alert alert-info">
    <span>2 new notifications.</span>
  </div>
</div>