Varianter
En progressbar (fremdriftsindikator) er en visuell indikator som representerer fremgang i en pÄgÄende prosess.
Progressbar-komponenten kan brukes pÄ to mÄter - den kommer som default med aria-rollen progressbar som brukes nÄr man vil vise fremgangen i en prosess (som hvor langt man har kommet i et spÞrreskjema), eller sÄ kan man velge Ä sende inn aria-rollen meter som visualiserer en verdi innenfor et gitt numerisk spenn (for eksempel batterikapasitet).
Standard
Som standard kommer progressbar med rollen progressbar, valueMin = 0, valueMax = 100, valgfri venstrestilt etikett over baren og en mÞrkeblÄ farge for Ä vise fremdrift. valueCurrent er pÄkrevd og mÄ sendes inn for Ä vise fremgangen.
<div
class="pkt-progressbar__container"
style="--pkt-progress-label-width: 0px; --pkt-progress-width: 35%"
>
<p id="unik-id-1-title" class="pkt-progressbar__title">Fremgang</p>
<div
role="progressbar"
class="pkt-progressbar__bar-wrapper"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="35"
aria-labelledby="unik-id-1-title"
>
<div class="pkt-progressbar__bar pkt-progressbar__bar--dark-blue"></div>
</div>
</div><PktProgressbar :title="'Fremgang'" :valueCurrent="35" /><PktProgressbar title="Fremgang" valueCurrent={35} />Status med prosent
For Ä vise en prosentverdi under progressbaren kan man bruke statusType = "percentage". Denne kan plasseres enten til venstre, midtstilt eller fÞlge lengden pÄ progressbaren. Se liste over props for Ä se hvordan dette gjÞres.
<div
class="pkt-progressbar__container"
style="--pkt-progress-label-width: 24.953125px; --pkt-progress-width: 19%"
>
<p
id="unik-id-2-title"
class="pkt-progressbar__title pkt-progressbar__title-center"
>
Progresjon
</p>
<div
role="progressbar"
class="pkt-progressbar__bar-wrapper"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="19"
aria-labelledby="unik-id-2-title"
>
<div class="pkt-progressbar__bar pkt-progressbar__bar--light-blue"></div>
</div>
<div class="pkt-progressbar__status pkt-progressbar__status--center">
<span class="pkt-progressbar__status-placement--center">19%</span>
</div>
</div><PktProgressbar
:title="'Progresjon'"
titlePosition="center"
:valueCurrent="19"
statusType="percentage"
statusPlacement="center"
skin="light-blue"
/><PktProgressbar
title="Progresjon"
titlePosition="center"
valueCurrent={19}
statusType="percentage"
statusPlacement="left"
skin="light-blue"
/>Status med stegvis fremgang
Vil man bruke progressbar med en status som oppgir hvor man er i en stegvis prosess (â17 av 20â) kan man bruke statusType = fraction og sende inn valueMax=20 (for en prosess med 20 steg). valueCurrent vil sĂ„ benyttes til Ă„ regne ut hvor langt bruker er i prosessen.
<div
class="pkt-progressbar__container"
style="--pkt-progress-label-width: 49.6015625px; --pkt-progress-width: 85%"
>
<p id="unik-id-3-title" class="pkt-progressbar__title">SpĂžrreskjema</p>
<div
role="progressbar"
class="pkt-progressbar__bar-wrapper"
aria-valuemin="0"
aria-valuemax="20"
aria-valuenow="17"
aria-labelledby="unik-id-3-title"
>
<div class="pkt-progressbar__bar pkt-progressbar__bar--green"></div>
</div>
<div class="pkt-progressbar__status">
<span class="pkt-progressbar__status-placement--following">17 av 20</span>
</div>
</div>
<PktProgressbar
:title="'SpĂžrreskjema'"
titlePosition="left"
:valueCurrent="17"
valueMax="20"
statusType="fraction"
statusPlacement="following"
skin="green"
/><PktProgressbar
title="SpĂžrreskjema"
titlePosition="left"
valueCurrent={17}
valueMax={20}
statusType="fraction"
statusPlacement="following"
skin="green"
/>Meter
Bruk role = meter hvis visualiseringen ikke representerer fremgang i en pÄgÄende prosess
<div
class="pkt-progressbar__container"
style="--pkt-progress-label-width: 24.953125px; --pkt-progress-width: 70%"
>
<p id="unik-id-4-title" class="pkt-progressbar__title">Batterikapasitet</p>
<div
role="meter"
class="pkt-progressbar__bar-wrapper"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="70"
aria-labelledby="unik-id-4-title"
>
<div class="pkt-progressbar__bar pkt-progressbar__bar--red"></div>
</div>
<div class="pkt-progressbar__status">
<span class="pkt-progressbar__status-placement--following">70%</span>
</div>
</div><PktProgressbar
:title="'Batterikapasitet'"
role="meter"
:valueCurrent="70"
statusType="percentage"
statusPlacement="following"
skin="red"
/><PktProgressbar
title="Batterikapasitet"
role="meter"
valueCurrent={70}
statusType="percentage"
statusPlacement="following"
skin="red"
/>CSS oversikt
Block:
- .pkt-progressbar__container
Elements:
- .pkt-progressbar__bar
- .pkt-progressbar__title
- .pkt-progressbar__status
Modifiers:
- .pkt-progressbar__barâdark-blue (default)
- .pkt-progressbar__barâlight-blue
- .pkt-progressbar__barâred
- .pkt-progressbar__barâgreen
- .pkt-progressbar__status-placementâfollowing
- .pkt-progressbar__status-placementâcenter
- .pkt-progressbar__status-placementâleft
- .pkt-progressbar__title-center
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| valueCurrent | number | pÄkrevd | NÄvÊrende verdi | |
| valueMin | number | 0 | Settes hvis ikke startverdi for progressbar er 0 | |
| valueMax | number | 100 | Settes hvis ikke sluttverdi for progressbar er 100 | |
| ariaValueText | string | 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 | dark-blue, light-blue, green, red | dark-blue | ||
| title | string | 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 | left, center | left | title vil som default stÄ til venstre, men kan ogsÄ sentreres ved Ä bruke center for titlePosition | |
| statusType | none, percentage, fraction | none | 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 | center, left, following | following | Indikerer hvor nÄvÊrende verdi under progressbar skal vises - med following fÞlger den lengden pÄ progressbaren | |
| ariaLabel | string | ariaLabel mÄ oppgis hvis verken ariaLabelledby eller title er sendt inn som prop - ariaLabelledby settes automatisk hvis title er sendt inn | ||
| ariaLabelledby | string | ariaLabelledby mÄ sendes inn hvis etikett/tittel er satt utenfor komponenten | ||
| role | progressbar, meter | progressbar | aria-role kan enten vĂŠre progressbar eller meter. Er baren en visualisering av fremgang i en prosess brukes progressbar, ellers brukes meter | |
| className | string | Stylingklasse | ||
| id | string | Autogenrert, unik id | Brukes til Ä sette id pÄ det ytterste elementet i progressbar-komponenten |