mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2026-01-05 06:10:15 +00:00
57 lines
2.5 KiB
Markdown
57 lines
2.5 KiB
Markdown
# Livewire Flux Component Guidelines
|
|
## Usage Pattern
|
|
Components use the format: `<flux:name />`
|
|
## Component Reference
|
|
### Layout & Structure
|
|
- **flux:card** - Basic container with default slot
|
|
- **flux:field** - Form field wrapper with label/description support
|
|
- **flux:brand** - Logo/company name display with href navigation
|
|
|
|
### Navigation
|
|
- **flux:breadcrumbs** - Navigation breadcrumbs
|
|
- **flux:breadcrumbs.item** - Individual breadcrumb with href/icon
|
|
|
|
- **flux:accordion** - Collapsible content sections
|
|
- **flux:accordion.item** - Individual accordion item with heading/content
|
|
- **flux:accordion.heading** - Accordion header
|
|
- **flux:accordion.content** - Accordion body
|
|
|
|
### Form Controls
|
|
- **flux:input** - Text input with wire:model, validation, icons, masks
|
|
- **flux:select** - Select input
|
|
- **flux:select.option** - Select options
|
|
- **flux:autocomplete** - Searchable input with dropdown items
|
|
- **flux:checkbox** - Single checkbox or grouped checkboxes
|
|
- **flux:date-picker** - Date selection with calendar, ranges, presets
|
|
- **flux:editor** - Rich text editor with toolbar
|
|
|
|
### Interactive Elements
|
|
- **flux:button** - Button with variants (primary, outline, danger), icons, loading states
|
|
- **flux:dropdown** - Dropdown menu with positioning options
|
|
- **flux:menu** - Complex menu with items, submenus, separators, checkboxes, radio buttons
|
|
- **flux:command** - Command palette with searchable items
|
|
- **flux:context** - Right-click context menu wrapper
|
|
|
|
### Display Components
|
|
- **flux:avatar** - User avatar with initials, images, badges, grouping
|
|
- **flux:badge** - Status/label badges with colors and variants
|
|
- **flux:callout** - Highlighted information blocks with icons and actions
|
|
- **flux:calendar** - Calendar display with date selection modes
|
|
- **flux:chart** - Data visualization with lines, areas, axes, tooltips
|
|
|
|
### Key Props
|
|
- **wire:model** - Livewire property binding
|
|
- **variant** - Visual style options (outline, primary, filled, etc.)
|
|
- **size** - Component sizing (xs, sm, base, lg, xl, 2xl)
|
|
- **disabled/invalid** - State management
|
|
- **icon/icon:trailing** - Icon placement with variants
|
|
- **label/description** - Form field labeling
|
|
- **color** - Color theming options
|
|
|
|
### Common Patterns
|
|
- Most form components support wire:model binding
|
|
- Many components have label/description props for field wrapping
|
|
- Icon components accept variant options (outline, solid, mini, micro)
|
|
- Size props typically offer xs, sm, base, lg, xl, 2xl options
|
|
- Variant props provide visual style alternatives
|