146 lines
7.3 KiB
Markdown
146 lines
7.3 KiB
Markdown
# 🧁 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](https://toastra.com)
|
||
|
||
---
|
||
|
||
## 📁 Verzeichnisstruktur
|
||
|
||
```
|
||
src/
|
||
└── plugins/
|
||
└── Toastra/
|
||
├── index.js
|
||
├── src/
|
||
│ ├── config.js
|
||
│ ├── message.js
|
||
│ └── message.css
|
||
└── README.md
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ Integration
|
||
|
||
### 1. HTML-Einbindung (ohne Build-Tool)
|
||
|
||
```html
|
||
<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`)
|
||
|
||
```js
|
||
resolve: {
|
||
alias: {
|
||
'@': '/resources/js',
|
||
'@toastra': '/src/plugins/Toastra',
|
||
},
|
||
}
|
||
```
|
||
|
||
#### In `app.js` importieren:
|
||
|
||
```js
|
||
import '@toastra';
|
||
```
|
||
|
||
#### In `app.css` importieren:
|
||
|
||
```css
|
||
@import "@toastra/src/message.css";
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Verwendung
|
||
|
||
### Standardwerte in `config.js`
|
||
|
||
```js
|
||
toastra.config({
|
||
mode: "dark-mode",
|
||
icon: true,
|
||
position: "bottom-center",
|
||
progressbar: true,
|
||
animation: "slide-up",
|
||
});
|
||
```
|
||
|
||
### Benachrichtigung anzeigen
|
||
|
||
```js
|
||
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](https://toastra.com)**
|
||
Für lokale Tests einfach im Projekt:
|
||
|
||
```js
|
||
toastra.notify({ text: '🎉 Toastra funktioniert!' });
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Fazit
|
||
|
||
- Modular, Framework-unabhängig
|
||
- Elegante Toast-Benachrichtigungen
|
||
- Frei konfigurierbar über `toastra.config(...)` und `toastra.notify(...)`
|