Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Toast-Komponente

Zuletzt aktualisiert:

Nur CSS Tailwind CSS-Toast für die Positionierung von Benachrichtigungen – oben, unten, am Anfang, am Ende und in der Mitte. Kein JavaScript für das Layout. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Toast-Komponenten zeigen kurze, unaufdringliche Benachrichtigungen an den Rändern des Bildschirms an. Toasts basieren auf festen Positionierungs- und Warnkomponenten und übermitteln Systemrückmeldungen wie Erfolgsbestätigungen, Fehlermeldungen oder Statusaktualisierungen. Das Frutjam-Toastsystem unterstützt sechs Platzierungspositionen – ideal für Formularübermittlungen, asynchrone Vorgänge und Echtzeitbenachrichtigungen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
toastBaseBenachrichtigungscontainer mit fester Position
toast-topModifikatorVerankert sich am oberen Rand des Ansichtsfensters
toast-bottomModifikatorAnker am unteren Rand des Ansichtsfensters (Standard)
toast-startModifikatorAnker auf der linken Seite
toast-centerModifikatorHorizontal zentriert
toast-endModifikatorAnker nach rechts (Standard)
toast-middleModifikatorVertikal zentriert

Grundlegende Verwendung

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>
    </>
  )
}

Toastpositionen

Top-Positionen

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>

Untere Positionen

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>

Toastfarben

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>

Mehrere 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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Toast-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP