ProgressBar

Storybook

React Aria

<ProgressBar
  label='Laddar...'
  showValueLabel
  value={30}
/>

Laddar...30%

Progress bar med fördefinerad stil, använder role="progressbar" under huven

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { ProgressBar } from '@midas-ds/components'

Varianter

Utan etiketter

Utelämna label och showValueLabel för att dölja komponentens etiketter. Kom ihåg att ersätta label med aria-label.

<ProgressBar
  aria-label='Laddar...'
  value={30}
/>

Anpassad valueLabel

Egenskapen valueLabel och showValueLabel kan användas för att ändra den högerställda etiketten.

<ProgressBar
  aria-label='Dina framsteg'
  value={2}
  maxValue={3}
  valueLabel='Steg 2 av 3'
  showValueLabel
/>

Steg 2 av 3

Obestämdhet

Egenskapen isIndeterminate kan användas för att indikera att ett förlopp är obestämt.

<ProgressBar
  label='Väntar...'
  isIndeterminate
/>

Väntar...

API

ProgressBar

Name	Type	Default	Description
label	string	-	A visual label
labelProps	LabelProps	-	Props for the visual label and/or the value label
showValueLabel	boolean	false	Show the value label
id	string	-	The element's unique identifier. See MDN.
value	number	0	The current value (controlled).
minValue	number	0	The smallest value allowed for the input.
maxValue	number	100	The largest value allowed for the input.
isIndeterminate	boolean	-	Whether presentation is indeterminate when progress isn't known.
formatOptions	NumberFormatOptions	{style: 'percent'}	The display format of the value label.
valueLabel	ReactNode	-	The content to display as the value's label (e.g. 1 of 4).
children	ReactNode | ((values: ProgressBarRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
className	string | ((values: ProgressBarRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: ProgressBarRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.