• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Linear Progress

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.

Demo
Props
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

accessibleText *

stringAlternative 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

numberThe value of the progress indicator for the determinate variant. Value between 0 and 100.

Installation

Kodexempel
npm install @sj-ab/component-library.ui.linear-progress

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Tillgänglighet

Varianter

Komponenten 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).

Tillgänglighetsattribut

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.

Läs mer om ARIA-rollen 'progressbar' på MDN Web Docs

Etikettering

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.

Change log

  • Fix aria-label and aria-labelledby logic in LinearProgress

    4.0.1
  • Refactor and redesign LinearProgress

    4.0.0

    Breaking

  • Updated design token colors

    3.2.0
  • Upgrade to React 19

    3.1.0

Statistik