Linear Progress
4.0.1
Linear Progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
| Namn | Typ | Beskrivning |
|---|---|---|
accessibleText * | string | Alternative text for screen readers for the loader. Make it concrete and informative, e.g. "Loading departures, please wait...". Mandatory for WCAG 2.1. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
size | "default" |
"thin" | Size of the progress bar. Default is "default", but can be set to "thin" for a slimmer version. |
value | number | The value of the progress indicator for the determinate variant. Value between 0 and 100. |
npm install @sj-ab/component-library.ui.linear-progressKomponenten har stöd för två varianter:
variant="determinate" – Visar ett specifikt förloppsvärde mellan 0 och 100.variant="indeterminate" – Visar en animerad laddningsindikator utan angivet värde (används när förloppet inte kan mätas).För att komponenten ska vara tillgänglig för alla användare, inklusive de som använder skärmläsare, används följande WAI-ARIA-attribut:
role="progressbar" – Indikerar att elementet är en förloppsindikator.aria-valuemin – Anger minsta värde (implicit satt till 0).aria-valuemax – Anger högsta värde (implicit satt till 100).aria-valuenow – Anger aktuellt värde vid determinate-variant. Utesluts helt vid indeterminate-variantför att visa att värdet är okänt.Komponenten måste ha en tillgänglig etikett för att beskriva syftet eller statusen på indikatorn:
helperText – Synlig text under progressbaren. Används automatiskt som etikett via aria-labelledby.aria-label – En dold etikett för skärmläsare. Används om du inte visar någon synlig helperText.