ProgressBar
Postęp zadania ku końcowi, taki jak wysyłanie albo import. Pomiń value, gdy długość jest nieznana.
- ProgressBar
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
Noc, podgląd: ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
Wysoki kontrast, podgląd: ProgressBar
Uploading report.pdf2 MB of 4.4 MB
Preparing the export
ImportDone
BackupFailedThe disk was full at 62%.
UżycieLink do sekcji Użycie
import { ProgressBar } from '@skribly/ui/feedback'<ProgressBar label="Uploading report.pdf" value={45} description="2 MB of 4.4 MB" />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Rola progressbar nazwana przez label; description jest powiązany jako jego opis.
- Bez value jest nieokreślony i nie ma aria-valuenow.
- Stan zakończony albo nieudany dostaje słowo statusu z ikoną.
- Pulsowanie nieokreślonego postępu zatrzymuje się przy ograniczonym ruchu.
- Zakończenie długiego zadania ogłoś przez toast.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.