Kevin Adametz 0a3e52d603 19-05-2026 Rebrand Pressekonto, Hub-Flux UI und Legacy-Media-Migration

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>

2026-05-19 16:36:13 +00:00

11 KiB

Raw Blame History

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

<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

<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

<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

<flux:card>
    <flux:heading>Überschrift</flux:heading>
    <flux:text>Inhalt der Card</flux:text>
</flux:card>

Card mit statistiken

<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

<flux:button>Klick mich</flux:button>

Button mit Icon

<flux:button icon="plus">Neu erstellen</flux:button>
<flux:button icon-trailing="arrow-right">Weiter</flux:button>

Button-Varianten

<flux:button variant="primary">Primary</flux:button>
<flux:button variant="ghost">Ghost</flux:button>
<flux:button variant="danger">Danger</flux:button>

Button-Größen

<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)

<flux:button href="{{ route('admin.users') }}" wire:navigate>
    Benutzer
</flux:button>

🏷️ Badges

Standard Badge

<flux:badge>Standard</flux:badge>

Badge mit Farben

<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

<flux:badge color="green" icon="check">Aktiv</flux:badge>
<flux:badge color="red" icon="x-mark">Inaktiv</flux:badge>

Badge-Größen

<flux:badge size="sm">Klein</flux:badge>
<flux:badge size="md">Mittel</flux:badge>
<flux:badge size="lg">Groß</flux:badge>

📝 Formulare

Input

<flux:input 
    wire:model="name" 
    label="Name"
    placeholder="Geben Sie Ihren Namen ein"
    icon="user"
/>

Input mit Fehler

<flux:input 
    wire:model="email" 
    label="E-Mail"
    :error="$errors->first('email')"
/>

Select

<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

<flux:textarea 
    wire:model="description" 
    label="Beschreibung"
    rows="5"
/>

Checkbox

<flux:checkbox wire:model="terms">
    Ich akzeptiere die AGB
</flux:checkbox>

Radio

<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

<flux:input
    wire:model.live.debounce.300ms="search"
    placeholder="Suchen..."
    icon="magnifying-glass"
/>

Filter-Kombination

<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

<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

{{-- 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

<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

<flux:main>
    <flux:heading size="xl">Seitentitel</flux:heading>
    
    {{-- Inhalt --}}
</flux:main>

Grid Layout

<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

<flux:spacer />

📊 Statistik-Cards (Beispiel)

<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

<flux:card class="overflow-hidden">
    <flux:table>
        {{-- Tabellen-Inhalt --}}
    </flux:table>
</flux:card>

2. Empty States mit Icons

@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

<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

<flux:button href="{{ route('admin.users') }}" wire:navigate>
    Benutzer
</flux:button>

5. Dark Mode Support

Flux unterstützt automatisch Dark Mode mit dark: Klassen:

<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

11 KiB Raw Blame History