Toggles

Verwendung

Ein Toggle schaltet eine Einstellung sofort um. Verwende einen Button, wenn die Änderung erst durch Absenden wirksam wird.

<gedisa:toggle label="Remember me" />

Größen

Zwei Größen passen den Schalter an die Dichte der Oberfläche an. Der Standard ist md.

<gedisa:toggle size="sm" label="Small" />
<gedisa:toggle size="md" label="Medium" />

Varianten

Die Standardvariante zeigt den Knopf innerhalb der Spur. Mit variant="slim" ist die Spur schmaler und der Knopf liegt darüber.

<gedisa:toggle label="Default" checked />
<gedisa:toggle variant="slim" label="Slim" checked />

Label und Beschreibung

label beschriftet den Schalter, description ergänzt eine Erklärung darunter. Ein Klick auf das Label schaltet den Toggle um.

<gedisa:toggle label="Remember me" description="Save my login details for next time." />
<gedisa:toggle size="sm" variant="slim" label="Remember me" description="Save my login details for next time." checked />

Zustände

checked setzt den Startzustand, disabled sperrt den Schalter in seinem aktuellen Zustand.

<gedisa:toggle label="Aktiv" checked />
<gedisa:toggle label="Deaktiviert" disabled />
<gedisa:toggle label="Gesperrt und aktiv" checked disabled />

Livewire

Mit wire:model.live wirkt die Änderung sofort. Die Beispiele sind an diese Seite gebunden und zeigen ihren Zustand im Text.

<gedisa:toggle wire:model.live="remember" label="Remember me" :description="$remember ? 'Anmeldedaten werden gespeichert.' : 'Anmeldedaten werden nicht gespeichert.'" />
<gedisa:toggle wire:model.live="newsletter" variant="slim" label="Newsletter" :description="$newsletter ? 'Newsletter ist abonniert.' : 'Newsletter ist abbestellt.'" />

Referenz

Diese Übersicht umfasst die gezeigten Attribute. Verhalten und Tastaturbedienung stammen aus flux:switch.

gedisa:toggle