Eingabefelder: Progress Bar

1. Übersicht und Zweck

Status: [Live] — widgets::progressBar() plus JS-API wkProgressBar.setValue(). Herkunft und ARIA-Vertrag der Zeile „ProgressBar„ im Basis-Widget-Katalog (role=„progressbar“/aria-valuenow, Zustände active/done/infinite/discrete). Referenz: DevExpress ASPxProgressBar (Position/Minimum/Maximum/DisplayMode/IndicatorStyle).

2. Voraussetzungen

Gemeinsamer Feld-Kontrakt bereits verstanden.

3. Konzepte

No-JS-Basis: natives <progress>. Ohne JavaScript rendert ein natives <progress value="…" max="…">. Ist der Fortschritt zum Renderzeitpunkt unbekannt ($opts['indeterminate'] => true), entfällt value — der Browser zeigt native „läuft“-Animation. Live-Aktualisierung (Prozentzahl steigt, ohne die Seite neu zu laden) ist keine Basisfunktion dieses Feldes — das ist Sache des Aufrufers (Polling, SSE, WebSocket) über die wkProgressBar.setValue(el, n)-API; das Feld selbst liefert nur das initiale Markup.

4. Erste Schritte

echo $widgets->progressBar([
    'name'  => 'import',
    'label' => 'Import läuft',
    'value' => 42,
    'min'   => 0,
    'max'   => 100,
]);

5. Verwendung

Bedarf	Muster
Bekannter Fortschritt	`value`/`min`/`max` setzen
Unbekannte Dauer	`indeterminate ⇒ true` (kein `value`)

6. API-Referenz

Methode progressBar(array $opts): string in helper_plugin_wkfluentui_widgets.

7. Parameter, Optionen und Zustände

Schlüssel	Typ	Bedeutung	DevExpress-Analog
`min`/`max`	int	native `<progress>`-Grenzen, Default 0/100	`Minimum`/`Maximum`
`value`	int	aktueller Stand	`Position`
`indeterminate`	bool	s. Abschnitt 3	—
`showValue`	bool	Prozent-/Zahlentext neben dem Balken	`ShowPosition`
`displayFormat`	string	`sprintf`-Muster für `showValue`, Default `"%d%%"`	`DisplayFormatString`

8. Vollständige Beispiele

echo $widgets->progressBar([
    'name'          => 'export',
    'label'         => 'Export läuft',
    'indeterminate' => true,
]);

9. Einschränkungen und Randfälle

Umgesetzt. Keine eingebaute Live- Aktualisierung (Abschnitt 3).

10. Accessibility und Kompatibilität

Vollständiger Überblick: Accessibility.

11. Troubleshooting

Entfällt.

12. Verwandte Themen

Demo-Übersicht — alle Kategorien
FluentUI: Basis-Widget-Katalog — Tier-2-CSS-/ARIA-Vorstufe