ProgressBar

Storybook

React Aria

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.

Anpassad valueLabel

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

Obestämdhet

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

API

ProgressBar

Namn	Typ	Standard	Beskrivning
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
value	number	0	The current value (controlled).
isIndeterminate	boolean	-	Whether presentation is indeterminate when progress isn't known.
minValue	number	0	The smallest value allowed for the input.
maxValue	number	100	The largest value allowed for the input.
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.