ProgressBar

Progressindikator, progresstatus

Storybook

React Aria

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

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

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

Laddar...30%

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
className	ClassNameOrFunction<ProgressBarRenderProps>	'react-aria-ProgressBar'	The CSS className for the element. A function may be provided to compute the class based on component state.
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	ChildrenOrFunction<ProgressBarRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<ProgressBarRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", ProgressBarRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	string | null	-	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.