Komponentbygger
Her kan du teste ut alle egenskapene til PktProgressbar, og få ferdig kode for React og HTML. For Vue-bruk kan du i de fleste tilfeller bruke samme kode som React, men vær oppmerksom på at Vue har enkelte forskjeller i hvordan props sendes inn og hvordan hendelser håndteres.
Detaljert beskrivelse av props
| Props | Beskrivelse |
|---|---|
| valueCurrent | Nåværende verdi |
| valueMin | Settes hvis ikke startverdi for progressbar er 0 |
| valueMax | Settes hvis ikke sluttverdi for progressbar er 100 |
| ariaValueText | Skjermleser vil lese opp valueCurrent som en prosentverdi. Hvis ikke dette gir nok info til bruker kan ariaValueText sendes inn i tillegg med en mer beskrivende tekst som leses opp av skjermleser. Hvis man bruker progressbar med propsen fraction for statustype vil valueCurrent regnes om og leses opp som en prosentverdi av skjermleser, selv om man som status under baren ser 2 av 20, så her kan ariaValueText eventuelt vurderes. |
| skin | |
| title | title brukes som etikett for progressbar. Etiketten vil automatisk knyttes sammen med progressbar via en id som håndteres i komponenten. Hvis man lager en etikett selv utenfor komponenten, må man det sendes inn en id via id |
| titlePosition | title vil som default stå til venstre, men kan også sentreres ved å bruke center for titlePosition |
| statusType | Hva nåværende verdi til progressbar er kan vises under selve baren - enten som prosentverdi eller som eksempelvis ‘1 av 10’. none er default, percentage vil vise prosent og fraction vil vise hvilket steg (eksempelvis 1 av 3) man er på basert på hva man har sendt inn som valueCurrent og valueMax |
| statusPlacement | Indikerer hvor nåværende verdi under progressbar skal vises - med following følger den lengden på progressbaren |
| ariaLabel | ariaLabel må oppgis hvis verken ariaLabelledby eller title er sendt inn som prop - ariaLabelledby settes automatisk hvis title er sendt inn |
| ariaLabelledby | ariaLabelledby må sendes inn hvis etikett/tittel er satt utenfor komponenten |
| role | aria-role kan enten være progressbar eller meter. Er baren en visualisering av fremgang i en prosess brukes progressbar, ellers brukes meter |
| id | Brukes til å sette id på det ytterste elementet i progressbar-komponenten |