# Flux UI v2 - Komponenten-Referenz **Projekt:** pressekonto.test Backend **Flux Version:** 2.x **Stand:** 23. Januar 2026 --- ## ⚠️ Korrekte Flux v2 Syntax ### ✅ Offizielle Syntax (v2.x) **Quelle:** [Flux UI Table Documentation](https://fluxui.dev/components/table) ```blade Name Value ``` **Wichtig:** Flux nutzt **Punktnotation** (`.`) für verschachtelte Komponenten! --- ## 📋 Tabellen (Tables) ### Einfache Tabelle ```blade Name Email Status @foreach($users as $user) {{ $user->name }} {{ $user->email }} Active @endforeach ``` ### Tabelle mit Empty State ```blade Spalte 1 Spalte 2 @forelse($items as $item) {{ $item->value }} @empty
Keine Daten gefunden
@endforelse ``` --- ## 🎨 Cards ### Einfache Card ```blade Überschrift Inhalt der Card ``` ### Card mit statistiken ```blade
Label 1,234
``` --- ## 🔘 Buttons ### Standard Button ```blade Klick mich ``` ### Button mit Icon ```blade Neu erstellen Weiter ``` ### Button-Varianten ```blade Primary Ghost Danger ``` ### Button-Größen ```blade Klein Mittel Groß ``` ### Link-Button (Livewire Navigate) ```blade Benutzer ``` --- ## 🏷️ Badges ### Standard Badge ```blade Standard ``` ### Badge mit Farben ```blade Erfolg Fehler Warnung Info Neutral Default ``` ### Badge mit Icon ```blade Aktiv Inaktiv ``` ### Badge-Größen ```blade Klein Mittel Groß ``` --- ## 📝 Formulare ### Input ```blade ``` ### Input mit Fehler ```blade ``` ### Select ```blade ``` ### Textarea ```blade ``` ### Checkbox ```blade Ich akzeptiere die AGB ``` ### Radio ```blade Option 1 Option 2 ``` --- ## 🔍 Suche & Filter ### Suchfeld ```blade ``` ### Filter-Kombination ```blade
``` --- ## 🎭 Icons (Hero Icons) ### Icon-Verwendung ```blade ``` ### Häufig verwendete Icons ```blade {{-- Allgemein --}} {{-- Benutzer --}} {{-- Content --}} {{-- Business --}} {{-- Actions --}} {{-- Status --}} {{-- Navigation --}} ``` Vollständige Liste: https://heroicons.com --- ## 📦 Modal / Dialogs ### Einfaches Modal ```blade Bestätigung Möchten Sie diesen Eintrag wirklich löschen? Abbrechen Löschen ``` --- ## 🎨 Layout-Komponenten ### Main Container ```blade Seitentitel {{-- Inhalt --}} ``` ### Grid Layout ```blade
... ... ... ...
``` ### Spacer ```blade ``` --- ## 📊 Statistik-Cards (Beispiel) ```blade
{{ __('Gesamt') }} 1,234
{{ __('Aktiv') }} 890
``` --- ## 🎯 Best Practices ### 1. Immer mit Card-Wrapper ```blade {{-- Tabellen-Inhalt --}} ``` ### 2. Empty States mit Icons ```blade @empty
{{ __('Keine Einträge gefunden') }}
@endforelse ``` ### 3. Responsive Actions ```blade
{{-- Filter --}}
Neu
``` ### 4. Livewire Wire:navigate ```blade Benutzer ``` ### 5. Dark Mode Support Flux unterstützt automatisch Dark Mode mit `dark:` Klassen: ```blade
Text
``` --- ## 🔗 Ressourcen - **Flux UI Docs:** https://fluxui.dev/docs - **Hero Icons:** https://heroicons.com - **Tailwind CSS:** https://tailwindcss.com/docs - **Livewire:** https://livewire.laravel.com --- ## ✅ Korrektur-Checkliste Beim Erstellen neuer Views prüfen: - [ ] `` als Wrapper - [ ] `` für Header - [ ] `` für einzelne Spalten - [ ] `` für Body - [ ] `` für Zeilen (mit key!) - [ ] `` für Zellen - [ ] Icons mit `flux:icon.{name}` Syntax - [ ] Dark Mode Klassen wo nötig - [ ] Responsive Klassen (`sm:`, `lg:`) - [ ] `wire:navigate` bei internen Links --- **Letztes Update:** 23. Januar 2026 **Version:** Flux UI v2.x **Status:** ✅ Alle Views korrigiert