Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant de pain grillé

Dernière mise à jour:

Toast CSS Tailwind uniquement CSS pour le positionnement des notifications : placement en haut, en bas, au début, à la fin et au centre. Pas de JavaScript pour la mise en page. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants Toast affichent des notifications brèves et non intrusives positionnées sur les bords de l'écran. Construits avec des composants de positionnement et d'alerte fixes, les toasts communiquent des commentaires du système tels que des confirmations de réussite, des messages d'erreur ou des mises à jour de statut. Le système de toast Frutjam prend en charge six positions de placement, idéales pour les soumissions de formulaires, les opérations asynchrones et les notifications en temps réel.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
toastBaseFixed-position notification container
toast-topModificateurAnchors to the top of the viewport
toast-bottomModificateurAnchors to the bottom of the viewport (default)
toast-startModificateurAnchors to the left
toast-centerModificateurCentré horizontalement
toast-endModificateurAnchors to the right (default)
toast-middleModificateurCentré verticalement

Utilisation de base

New message arrived. 
1
2
3
4
5
<div 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 className="toast">
        {toast.toasts.map(t => (
          <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}>
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </>
  )
}

Toast Positions

Top Positions

Top Start
Top Center
Top End
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-top toast-start">
  <div class="alert alert-info"><span>Top Start</span></div>
</div>

<div class="toast toast-top toast-center">
  <div class="alert alert-info"><span>Top Center</span></div>
</div>

<div class="toast toast-top toast-end">
  <div class="alert alert-info"><span>Top End</span></div>
</div>

Bottom Positions

Bottom Start
Bottom Center
Bottom End
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-bottom toast-start">
  <div class="alert alert-info"><span>Bottom Start</span></div>
</div>

<div class="toast toast-bottom toast-center">
  <div class="alert alert-info"><span>Bottom Center</span></div>
</div>

<div class="toast toast-bottom toast-end">
  <div class="alert alert-info"><span>Bottom End</span></div>
</div>

Toast Colors

File saved successfully.
Storage is almost full.
Connection failed.
Update available.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div 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>

Multiple Toasts

Profile updated.
2 new notifications.
html 
1
2
3
4
5
6
7
8
<div 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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Griller sur demande. Fini les cours hallucinés.

Essayez Cherry MCP