Kevin Adametz
0a3e52d603
Umbenennung presseportale → pressekonto in Domains, Themes und Dokumentation. Design-Tokens, Portal-Shell, Customer-Dashboard, Auth- und Admin-PM-Views. Artisan-Befehl migrate:legacy-media mit Tests und Hub-Flux-Entwicklungsdocs. Co-authored-by: Cursor <cursoragent@cursor.com>
516 lines
11 KiB
Markdown
516 lines
11 KiB
Markdown
# 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
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Name</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
<flux:table.row>
|
|
<flux:table.cell>Value</flux:table.cell>
|
|
</flux:table.row>
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
```
|
|
|
|
**Wichtig:** Flux nutzt **Punktnotation** (`.`) für verschachtelte Komponenten!
|
|
|
|
---
|
|
|
|
## 📋 Tabellen (Tables)
|
|
|
|
### Einfache Tabelle
|
|
|
|
```blade
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Name</flux:table.column>
|
|
<flux:table.column>Email</flux:table.column>
|
|
<flux:table.column>Status</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@foreach($users as $user)
|
|
<flux:table.row :key="$user->id">
|
|
<flux:table.cell>{{ $user->name }}</flux:table.cell>
|
|
<flux:table.cell>{{ $user->email }}</flux:table.cell>
|
|
<flux:table.cell>
|
|
<flux:badge color="green">Active</flux:badge>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforeach
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
```
|
|
|
|
### Tabelle mit Empty State
|
|
|
|
```blade
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Spalte 1</flux:table.column>
|
|
<flux:table.column>Spalte 2</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@forelse($items as $item)
|
|
<flux:table.row :key="$item->id">
|
|
<flux:table.cell>{{ $item->value }}</flux:table.cell>
|
|
</flux:table.row>
|
|
@empty
|
|
<flux:table.row>
|
|
<flux:table.cell colspan="2">
|
|
<div class="flex flex-col items-center justify-center py-12">
|
|
<flux:icon.inbox class="size-12 text-zinc-400" />
|
|
<flux:text class="mt-4 text-zinc-500">Keine Daten gefunden</flux:text>
|
|
</div>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforelse
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Cards
|
|
|
|
### Einfache Card
|
|
|
|
```blade
|
|
<flux:card>
|
|
<flux:heading>Überschrift</flux:heading>
|
|
<flux:text>Inhalt der Card</flux:text>
|
|
</flux:card>
|
|
```
|
|
|
|
### Card mit statistiken
|
|
|
|
```blade
|
|
<flux:card>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:text class="text-sm text-zinc-500">Label</flux:text>
|
|
<flux:text size="xl" weight="bold">1,234</flux:text>
|
|
</div>
|
|
<flux:icon.chart-bar class="size-8 text-blue-500" />
|
|
</div>
|
|
</flux:card>
|
|
```
|
|
|
|
---
|
|
|
|
## 🔘 Buttons
|
|
|
|
### Standard Button
|
|
|
|
```blade
|
|
<flux:button>Klick mich</flux:button>
|
|
```
|
|
|
|
### Button mit Icon
|
|
|
|
```blade
|
|
<flux:button icon="plus">Neu erstellen</flux:button>
|
|
<flux:button icon-trailing="arrow-right">Weiter</flux:button>
|
|
```
|
|
|
|
### Button-Varianten
|
|
|
|
```blade
|
|
<flux:button variant="primary">Primary</flux:button>
|
|
<flux:button variant="ghost">Ghost</flux:button>
|
|
<flux:button variant="danger">Danger</flux:button>
|
|
```
|
|
|
|
### Button-Größen
|
|
|
|
```blade
|
|
<flux:button size="sm">Klein</flux:button>
|
|
<flux:button size="md">Mittel</flux:button>
|
|
<flux:button size="lg">Groß</flux:button>
|
|
```
|
|
|
|
### Link-Button (Livewire Navigate)
|
|
|
|
```blade
|
|
<flux:button href="{{ route('admin.users') }}" wire:navigate>
|
|
Benutzer
|
|
</flux:button>
|
|
```
|
|
|
|
---
|
|
|
|
## 🏷️ Badges
|
|
|
|
### Standard Badge
|
|
|
|
```blade
|
|
<flux:badge>Standard</flux:badge>
|
|
```
|
|
|
|
### Badge mit Farben
|
|
|
|
```blade
|
|
<flux:badge color="green">Erfolg</flux:badge>
|
|
<flux:badge color="red">Fehler</flux:badge>
|
|
<flux:badge color="yellow">Warnung</flux:badge>
|
|
<flux:badge color="blue">Info</flux:badge>
|
|
<flux:badge color="gray">Neutral</flux:badge>
|
|
<flux:badge color="zinc">Default</flux:badge>
|
|
```
|
|
|
|
### Badge mit Icon
|
|
|
|
```blade
|
|
<flux:badge color="green" icon="check">Aktiv</flux:badge>
|
|
<flux:badge color="red" icon="x-mark">Inaktiv</flux:badge>
|
|
```
|
|
|
|
### Badge-Größen
|
|
|
|
```blade
|
|
<flux:badge size="sm">Klein</flux:badge>
|
|
<flux:badge size="md">Mittel</flux:badge>
|
|
<flux:badge size="lg">Groß</flux:badge>
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Formulare
|
|
|
|
### Input
|
|
|
|
```blade
|
|
<flux:input
|
|
wire:model="name"
|
|
label="Name"
|
|
placeholder="Geben Sie Ihren Namen ein"
|
|
icon="user"
|
|
/>
|
|
```
|
|
|
|
### Input mit Fehler
|
|
|
|
```blade
|
|
<flux:input
|
|
wire:model="email"
|
|
label="E-Mail"
|
|
:error="$errors->first('email')"
|
|
/>
|
|
```
|
|
|
|
### Select
|
|
|
|
```blade
|
|
<flux:select wire:model="status" label="Status">
|
|
<option value="">Bitte wählen...</option>
|
|
<option value="active">Aktiv</option>
|
|
<option value="inactive">Inaktiv</option>
|
|
</flux:select>
|
|
```
|
|
|
|
### Textarea
|
|
|
|
```blade
|
|
<flux:textarea
|
|
wire:model="description"
|
|
label="Beschreibung"
|
|
rows="5"
|
|
/>
|
|
```
|
|
|
|
### Checkbox
|
|
|
|
```blade
|
|
<flux:checkbox wire:model="terms">
|
|
Ich akzeptiere die AGB
|
|
</flux:checkbox>
|
|
```
|
|
|
|
### Radio
|
|
|
|
```blade
|
|
<flux:radio wire:model="type" value="option1">Option 1</flux:radio>
|
|
<flux:radio wire:model="type" value="option2">Option 2</flux:radio>
|
|
```
|
|
|
|
---
|
|
|
|
## 🔍 Suche & Filter
|
|
|
|
### Suchfeld
|
|
|
|
```blade
|
|
<flux:input
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="Suchen..."
|
|
icon="magnifying-glass"
|
|
/>
|
|
```
|
|
|
|
### Filter-Kombination
|
|
|
|
```blade
|
|
<div class="flex gap-4">
|
|
<flux:input
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="Suchen..."
|
|
icon="magnifying-glass"
|
|
class="flex-1"
|
|
/>
|
|
|
|
<flux:select wire:model.live="status" class="w-40">
|
|
<option value="all">Alle Status</option>
|
|
<option value="active">Aktiv</option>
|
|
<option value="inactive">Inaktiv</option>
|
|
</flux:select>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎭 Icons (Hero Icons)
|
|
|
|
### Icon-Verwendung
|
|
|
|
```blade
|
|
<flux:icon.user class="size-6" />
|
|
<flux:icon.check-circle class="size-8 text-green-500" />
|
|
<flux:icon.x-mark class="size-4" />
|
|
```
|
|
|
|
### Häufig verwendete Icons
|
|
|
|
```blade
|
|
{{-- Allgemein --}}
|
|
<flux:icon.home />
|
|
<flux:icon.cog />
|
|
<flux:icon.bell />
|
|
|
|
{{-- Benutzer --}}
|
|
<flux:icon.user />
|
|
<flux:icon.user-group />
|
|
<flux:icon.users />
|
|
|
|
{{-- Content --}}
|
|
<flux:icon.newspaper />
|
|
<flux:icon.document-text />
|
|
<flux:icon.folder />
|
|
|
|
{{-- Business --}}
|
|
<flux:icon.building-office />
|
|
<flux:icon.credit-card />
|
|
<flux:icon.chart-bar />
|
|
|
|
{{-- Actions --}}
|
|
<flux:icon.pencil />
|
|
<flux:icon.trash />
|
|
<flux:icon.eye />
|
|
<flux:icon.plus />
|
|
|
|
{{-- Status --}}
|
|
<flux:icon.check-circle />
|
|
<flux:icon.x-circle />
|
|
<flux:icon.exclamation-triangle />
|
|
|
|
{{-- Navigation --}}
|
|
<flux:icon.arrow-right />
|
|
<flux:icon.chevron-down />
|
|
<flux:icon.bars-3 />
|
|
```
|
|
|
|
Vollständige Liste: https://heroicons.com
|
|
|
|
---
|
|
|
|
## 📦 Modal / Dialogs
|
|
|
|
### Einfaches Modal
|
|
|
|
```blade
|
|
<flux:modal name="confirm-delete" variant="danger">
|
|
<flux:modal.content>
|
|
<flux:heading>Bestätigung</flux:heading>
|
|
<flux:text>Möchten Sie diesen Eintrag wirklich löschen?</flux:text>
|
|
</flux:modal.content>
|
|
|
|
<flux:modal.footer>
|
|
<flux:button variant="ghost" wire:click="$set('showModal', false)">
|
|
Abbrechen
|
|
</flux:button>
|
|
<flux:button variant="danger" wire:click="delete">
|
|
Löschen
|
|
</flux:button>
|
|
</flux:modal.footer>
|
|
</flux:modal>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Layout-Komponenten
|
|
|
|
### Main Container
|
|
|
|
```blade
|
|
<flux:main>
|
|
<flux:heading size="xl">Seitentitel</flux:heading>
|
|
|
|
{{-- Inhalt --}}
|
|
</flux:main>
|
|
```
|
|
|
|
### Grid Layout
|
|
|
|
```blade
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<flux:card>...</flux:card>
|
|
<flux:card>...</flux:card>
|
|
<flux:card>...</flux:card>
|
|
<flux:card>...</flux:card>
|
|
</div>
|
|
```
|
|
|
|
### Spacer
|
|
|
|
```blade
|
|
<flux:spacer />
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Statistik-Cards (Beispiel)
|
|
|
|
```blade
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<flux:card>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
|
|
{{ __('Gesamt') }}
|
|
</flux:text>
|
|
<flux:text size="xl" weight="bold">1,234</flux:text>
|
|
</div>
|
|
<flux:icon.users class="size-8 text-blue-500" />
|
|
</div>
|
|
</flux:card>
|
|
|
|
<flux:card>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
|
|
{{ __('Aktiv') }}
|
|
</flux:text>
|
|
<flux:text size="xl" weight="bold">890</flux:text>
|
|
</div>
|
|
<flux:icon.check-circle class="size-8 text-green-500" />
|
|
</div>
|
|
</flux:card>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Best Practices
|
|
|
|
### 1. Immer mit Card-Wrapper
|
|
|
|
```blade
|
|
<flux:card class="overflow-hidden">
|
|
<flux:table>
|
|
{{-- Tabellen-Inhalt --}}
|
|
</flux:table>
|
|
</flux:card>
|
|
```
|
|
|
|
### 2. Empty States mit Icons
|
|
|
|
```blade
|
|
@empty
|
|
<flux:tr>
|
|
<flux:td colspan="7">
|
|
<div class="flex flex-col items-center justify-center py-12">
|
|
<flux:icon.inbox class="size-12 text-zinc-400 dark:text-zinc-600" />
|
|
<flux:text class="mt-4 text-zinc-500">
|
|
{{ __('Keine Einträge gefunden') }}
|
|
</flux:text>
|
|
</div>
|
|
</flux:td>
|
|
</flux:tr>
|
|
@endforelse
|
|
```
|
|
|
|
### 3. Responsive Actions
|
|
|
|
```blade
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex flex-1 gap-4">
|
|
{{-- Filter --}}
|
|
</div>
|
|
|
|
<flux:button icon="plus">Neu</flux:button>
|
|
</div>
|
|
```
|
|
|
|
### 4. Livewire Wire:navigate
|
|
|
|
```blade
|
|
<flux:button href="{{ route('admin.users') }}" wire:navigate>
|
|
Benutzer
|
|
</flux:button>
|
|
```
|
|
|
|
### 5. Dark Mode Support
|
|
|
|
Flux unterstützt automatisch Dark Mode mit `dark:` Klassen:
|
|
|
|
```blade
|
|
<div class="bg-white dark:bg-zinc-800">
|
|
<flux:text class="text-zinc-900 dark:text-zinc-100">Text</flux:text>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🔗 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:
|
|
|
|
- [ ] `<flux:table>` als Wrapper
|
|
- [ ] `<flux:table.columns>` für Header
|
|
- [ ] `<flux:table.column>` für einzelne Spalten
|
|
- [ ] `<flux:table.rows>` für Body
|
|
- [ ] `<flux:table.row :key="...">` für Zeilen (mit key!)
|
|
- [ ] `<flux:table.cell>` 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
|