Komponenten
Progress Bars
Fortschrittsbalken zeigen den Prozentsatz einer Aufgabe und motivieren, einen Vorgang abzuschließen.
Verwendung
Ein Progress Bar zeigt, wie viel einer Aufgabe bereits erledigt ist. Mit value und optional max wird der Prozentsatz berechnet.
<gedisa:progress value="40" aria-label="Upload" />Beschriftung
label blendet den Prozentwert ein: rechts neben dem Balken, darunter oder schwebend über bzw. unter dem Füllstand.
<gedisa:progress value="40" label="right" aria-label="Upload" />
<gedisa:progress value="40" label="bottom" aria-label="Upload" /><gedisa:progress value="40" label="top-floating" aria-label="Upload" />
<gedisa:progress value="40" label="bottom-floating" aria-label="Upload" />Eigenes Maximum
Mit max lassen sich absolute Werte übergeben, zum Beispiel erledigte Schritte eines Onboardings.
<gedisa:progress value="3" max="8" label="right" aria-label="Onboarding" />Livewire
Der Balken animiert Änderungen des Werts. Das Beispiel simuliert einen Upload per wire:poll und lässt sich schrittweise anpassen.
<gedisa:progress :value="$progress" label="top-floating" aria-label="Upload" />Referenz
Diese Übersicht umfasst die gezeigten Attribute. Das Element setzt role="progressbar" und die passenden ARIA-Werte automatisch.
gedisa:progress
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| value | Aktueller Wert | |
| max | Maximalwert für die Prozentberechnung |
100
|
| label |
right, bottom, top-floating, bottom-floating
|
|
| aria-label | Zugänglicher Name des Fortschritts |