ICF Nürnberg

Church Management

UI Library

Tailwind CSS Navbar component

Alerts

Alerts informieren Nutzer über wichtige Ereignisse

Standard Alert

Alert-Farben (ICF Design)

Verschiedene Alert-Typen mit ICF-Farbschema

Alert mit Buttons

Alert mit Titel und Beschreibung

Alert Stile

Alert mit Close Button

Verwendungsbeispiele

Info Alert (Blau #0056b3)

<div role="alert" class="alert" style="background-color: rgba(0, 86, 179, 0.1); border-left: 4px solid #0056b3;"> <svg ...></svg> <span style="color: #0056b3;">Ihre Nachricht</span> </div>

Success Alert (Grün #28a745)

<div role="alert" class="alert" style="background-color: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745;"> <svg ...></svg> <span style="color: #28a745;">Erfolg!</span> </div>

Warning Alert (Orange #ff6600)

<div role="alert" class="alert" style="background-color: rgba(255, 102, 0, 0.1); border-left: 4px solid #ff6600;"> <svg ...></svg> <span style="color: #ff6600;">Warnung!</span> </div>

🎯 Wiederverwendbare Alert-Komponente

Die <app-alert> Komponente kann in der gesamten App verwendet werden. Sie ist voll konfigurierbar und unterstützt alle ICF-Farben.

Info Alert

<app-alert type="info" message="Neue Software-Aktualisierung verfügbar."> </app-alert>

Success Alert mit Titel

<app-alert type="success" title="Erfolgreich gespeichert!" message="Ihre Änderungen wurden erfolgreich gespeichert."> </app-alert>

Warning Alert mit Action-Button

<app-alert type="warning" title="Session läuft bald ab" message="Ihre Session läuft in 5 Minuten ab." [actions]="sessionActions"> </app-alert> // In der TypeScript-Datei: sessionActions: AlertAction[] = [ { label: 'Verlängern', style: 'accent', onClick: () => console.log('Session verlängert') } ];

Error Alert (schließbar)

<app-alert type="error" title="Fehler!" message="Die Verbindung zum Server konnte nicht hergestellt werden." [dismissible]="true"> </app-alert>

Alert mit mehreren Action-Buttons

<app-alert type="default" message="Wir verwenden Cookies für eine bessere Benutzererfahrung." [actions]="cookieActions"> </app-alert> // In der TypeScript-Datei: cookieActions: AlertAction[] = [ { label: 'Ablehnen', style: 'secondary', onClick: () => console.log('Cookies abgelehnt') }, { label: 'Akzeptieren', style: 'accent', onClick: () => console.log('Cookies akzeptiert') } ];

Alert ohne Icon

<app-alert type="info" message="Dies ist eine Benachrichtigung ohne Icon." [showIcon]="false"> </app-alert>

📋 Konfigurationsoptionen

PropertyTypStandardBeschreibung
type'info' | 'success' | 'warning' | 'error' | 'default''default'Alert-Typ (bestimmt Farbe und Icon)
titlestring-Optional: Titel des Alerts (fett dargestellt)
messagestring-Hauptnachricht des Alerts (erforderlich)
showIconbooleantrueIcon anzeigen oder ausblenden
customIconstring-Optional: SVG-Path für eigenes Icon
actionsAlertAction[][]Array von Action-Buttons
dismissiblebooleanfalseSchließen-Button anzeigen
verticalbooleanfalseVertikales Layout (mobile-first)

AlertAction Interface

interface AlertAction { label: string; // Button-Text style?: 'primary' | 'secondary' | 'accent'; // Button-Style onClick: () => void; // Click-Handler }

🎨 ICF Alert Farben

Info: ICF Blau #0056b3
Success: ICF Grün #28a745
Warning: ICF Orange #ff6600
Error: ICF Rot #dc3545