7.3 KiB

Raw Blame History

🧁 Toastra – Notification Plugin

Ein universelles Notification-System für jede Art von Projekt (Vanilla JS, Laravel + Vite, usw.). Über eine globale toastra.notify(...)-API können Benachrichtigungen angezeigt werden, während eine globale config.js Standardwerte (Position, Dauer, Animation etc.) verwaltet.

Dieses Plugin ist nicht von Vue, React oder AlpineJS abhängig – alles läuft in reinem JavaScript.
Domain: toastra.com

📁 Verzeichnisstruktur

src/
└── plugins/
    └── Toastra/
        ├── index.js
        ├── src/
        │   ├── config.js
        │   ├── message.js
        │   └── message.css
        └── README.md

⚙️ Integration

1. HTML-Einbindung (ohne Build-Tool)

<script src="path/to/Toastra/index.js"></script>
<link rel="stylesheet" href="path/to/Toastra/src/message.css">

Jetzt kannst du direkt toastra.notify(...) verwenden.

2. Laravel + Vite Setup

Vite-Konfiguration (`vite.config.js`)

resolve: {
    alias: {
        '@': '/resources/js',
        '@toastra': '/src/plugins/Toastra',
    },
}

In `app.js` importieren:

import '@toastra';

In `app.css` importieren:

@import "@toastra/src/message.css";

🚀 Verwendung

Standardwerte in `config.js`

toastra.config({
  mode: "dark-mode",
  icon: true,
  position: "bottom-center",
  progressbar: true,
  animation: "slide-up",
});

Benachrichtigung anzeigen

toastra.notify({ text: 'Hallo Welt!' });

toastra.notify({
  title: 'Fehler',
  text: 'Es ist etwas schiefgelaufen!',
  type: 'error'
});

toastra.notify({
  type: 'success',
  text: 'Gespeichert!',
  position: 'top-center',
  duration: 8000
});

⚙️ Konfigurationsoptionen

Key	Standard	Beschreibung	Mögliche Werte
`type`	`'default'`	Stil der Nachricht	`'default'`, `'success'`, `'info'`, `'warning'`, `'error'`, `'update'`
`mode`	`'default-mode'`	Farbmodus	`'default-mode'`, `'light-mode'`, `'dark-mode'`
`position`	`'top-right'`	Anzeigeort	`'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
`duration`	`3000`	Anzeigezeit in ms	Zahl
`selector`	`'body'`	Container für die Nachricht	CSS-Selektor
`icon`	`null`	Icon anzeigen	`true`, `null`, HTML-String
`progressbar`	`false`	Fortschrittsbalken	`true`/`false`
`close`	`false`	Manuelles Schließen	`true`/`false`
`title`	`''`	Titelzeile	String
`text`	`'Hi Guys, how are you?'`	Nachrichtentext	String
`onComplete`	`null`	Callback bei Ende	Funktion oder `null`
`onCompleteParams`	`{}`	Parameter für Callback	Objekt
`offset`	`{ top: '', left: '', right: '', bottom: '' }`	Abstand zum Bildschirmrand	CSS-Werte wie `'20px'`
`style`	`{ color: '', background: '' }`	Benutzerdefinierte Farben	CSS-Stilobjekt
`animation`	`'slide-right'`	Ein-/Ausblendanimation	`'slide-right'`, `'slide-left'`, `'slide-up'`, `'slide-down'`
`classname`	`''`	Zusätzliche CSS-Klassen	`'my-toast custom-class'`

📝 Styling

Passe message.css an, um z. B. Farben, Abstände oder Animationen zu ändern. Auch mit Tailwind erweiterbar.

🧪 Demo & Vorschau

Live-Demo bald verfügbar unter toastra.com
Für lokale Tests einfach im Projekt:

toastra.notify({ text: '🎉 Toastra funktioniert!' });

✅ Fazit

Modular, Framework-unabhängig
Elegante Toast-Benachrichtigungen
Frei konfigurierbar über toastra.config(...) und toastra.notify(...)

7.3 KiB Raw Blame History Unescape Escape