Polja obrazca: Progress Bar

1. Pregled in namen

Stanje: [Live] — widgets::progressBar() plus API JS wkProgressBar.setValue(). Izvor in pogodba ARIA: vrstica „ProgressBar„ v osnovnem katalogu gradnikov (role=„progressbar“/aria-valuenow, stanja active/done/infinite/discrete). Referenca: DevExpress-ov ASPxProgressBar (Position/Minimum/Maximum/DisplayMode/IndicatorStyle).

2. Predpogoji

skupna pogodba polj že razumljena.

3. Pojmi

Osnova brez JS: nativen <progress>. Brez JavaScripta se izriše nativen <progress value="…" max="…">. Če je napredek ob izrisu neznan ($opts['indeterminate'] => true), se value izpusti — brskalnik prikaže svojo nativno animacijo „poteka“. Sprotne posodobitve (odstotek narašča brez ponovnega nalaganja strani) niso osnovna zmožnost tega polja — to je stvar klicatelja (poizvedovanje, SSE, WebSocket) prek API wkProgressBar.setValue(el, n); polje samo priskrbi le začetni izris.

4. Prvi koraki

echo $widgets->progressBar([
    'name'  => 'uvoz',
    'label' => 'Uvoz poteka',
    'value' => 42,
    'min'   => 0,
    'max'   => 100,
]);

5. Uporaba

Potreba	Vzorec
Znan napredek	nastaviti `value`/`min`/`max`
Neznano trajanje	`indeterminate ⇒ true` (brez `value`)

6. API referenca

Metoda progressBar(array $opts): string v helper_plugin_wkfluentui_widgets.

7. Parametri, možnosti in stanja

Ključ	Tip	Pomen	Ustreznik DevExpress
`min`/`max`	int	nativni meji `<progress>`, privzeto 0/100	`Minimum`/`Maximum`
`value`	int	trenutna raven	`Position`
`indeterminate`	bool	glej odsek 3	—
`showValue`	bool	besedilo odstotka/števila ob traku	`ShowPosition`
`displayFormat`	string	vzorec `sprintf` za `showValue`, privzeto `"%d%%"`	`DisplayFormatString`

8. Popolni primeri

echo $widgets->progressBar([
    'name'          => 'izvoz',
    'label'         => 'Izvoz poteka',
    'indeterminate' => true,
]);

9. Omejitve in robni primeri

Izvedeno. Brez vgrajene sprotne posodobitve (odsek 3).

10. Dostopnost in združljivost

Celoten pregled: Accessibility.

11. Odpravljanje težav

Se ne uporablja.

12. Sorodne teme

predstavitveni pregled — vsaka kategorija
FluentUI: osnovni katalog gradnikov — predstopnja CSS/ARIA ravni 2