Komponenten
Selects
Auswahlfelder mit Suche, Mehrfachauswahl und Inhalten wie Avatar oder Status.
Verwendung
Ein Select übernimmt Label, Hinweis und Fehler aus demselben Feld-Aufbau wie die Inputs. Die Optionen stehen als gedisa:select.option im Slot.
Das ist ein Hinweistext.
<gedisa:select label="Team member" placeholder="Select team member" description="Das ist ein Hinweistext." class="max-w-xs">
<gedisa:select.option value="olivia">Olivia Rhye</gedisa:select.option>
<gedisa:select.option value="phoenix">Phoenix Baker</gedisa:select.option>
</gedisa:select>Größen
Wie beim Input gibt es sm mit 40px und md mit 44px Höhe. Der Standard ist sm.
<gedisa:select size="sm" label="Small" placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia">Olivia Rhye</gedisa:select.option>
</gedisa:select>
<gedisa:select size="md" label="Medium" placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia">Olivia Rhye</gedisa:select.option>
</gedisa:select>Führende Inhalte
icon oder dot setzen ein führendes Element in den Trigger. Optionen tragen icon, avatar, dot und mit subtitle einen zweiten Text.
<gedisa:select label="Icon" icon="user" placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia" icon="user" subtitle="@olivia">Olivia Rhye</gedisa:select.option>
<gedisa:select.option value="phoenix" icon="user" subtitle="@phoenix">Phoenix Baker</gedisa:select.option>
</gedisa:select>
<gedisa:select label="Avatar" placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia" avatar="https://i.pravatar.cc/64?img=47" subtitle="@olivia">Olivia Rhye</gedisa:select.option>
<gedisa:select.option value="phoenix" avatar="https://i.pravatar.cc/64?img=12" subtitle="@phoenix">Phoenix Baker</gedisa:select.option>
</gedisa:select>
<gedisa:select label="Dot" dot placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia" dot subtitle="@olivia">Olivia Rhye</gedisa:select.option>
<gedisa:select.option value="phoenix" dot subtitle="@phoenix">Phoenix Baker</gedisa:select.option>
</gedisa:select>Suche und Mehrfachauswahl
searchable blendet ein Suchfeld im Menü ein, multiple erlaubt mehrere Werte, die als Tags im Trigger erscheinen. clearable ergänzt einen Button zum Leeren.
0 ausgewählt
<gedisa:select label="Search" searchable clearable placeholder="Search">
<gedisa:select.option value="olivia" avatar="…" subtitle="@olivia">Olivia Rhye</gedisa:select.option>
</gedisa:select>
<gedisa:select wire:model.live="members" label="Team" multiple searchable placeholder="Search" />Zustände
disabled sperrt das Feld, error setzt eine Fehlermeldung. Mit wire:model kommt der Fehler automatisch aus der Livewire-Validierung.
Bitte ein Teammitglied auswählen.
Live-Validierung.
<gedisa:select label="Deaktiviert" disabled placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia">Olivia Rhye</gedisa:select.option>
</gedisa:select>
<gedisa:select label="Fehler" error="Bitte ein Teammitglied auswählen." placeholder="Select team member" class="max-w-xs">
<gedisa:select.option value="olivia">Olivia Rhye</gedisa:select.option>
</gedisa:select>
<gedisa:select wire:model.live="member" label="Team member" required placeholder="Select team member" description="Live-Validierung." class="max-w-xs">
@foreach ($people as $person)
<gedisa:select.option :value="$person['value']" :avatar="$person['avatar']" :subtitle="$person['handle']">{{ $person['name'] }}</gedisa:select.option>
@endforeach
</gedisa:select>Referenz
Diese Übersicht umfasst die gezeigten Attribute. Auswahl, Suche und Tastaturbedienung stammen aus flux:select in der Listbox-Variante.
gedisa:select
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| size |
sm, md
|
sm
|
| label, required, tooltip, description, error, invalid |
wie beim Input, aus gedisa:field
|
|
| placeholder | Text ohne Auswahl |
Auswählen
|
| icon | Führendes Icon im Trigger | |
| dot | Führender Status-Dot im Trigger | |
| searchable | Suchfeld im Menü | |
| multiple | Mehrfachauswahl als Tags | |
| clearable | Button zum Leeren der Auswahl | |
| wire:model | Bindung des Wertes oder Arrays |
gedisa:select.option
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| value | Wert der Option | |
| icon | Name eines führenden Icons | |
| avatar | Bild-URL für einen runden Avatar | |
| dot | Führender Status-Dot | |
| subtitle | Zusatztext neben dem Label |