12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
516
resources/views/admin/FLUX_COMPONENTS.md
Normal file
516
resources/views/admin/FLUX_COMPONENTS.md
Normal file
|
|
@ -0,0 +1,516 @@
|
|||
# Flux UI v2 - Komponenten-Referenz
|
||||
|
||||
**Projekt:** presseportale.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
|
||||
Loading…
Add table
Add a link
Reference in a new issue