@maggioli-design-system/mds-progress NPM

mds-progress

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Properties

Property	Attribute	Description	Type	Default
`direction`	`direction`	Specifies the direction of the progress bar, if horizonatl or vertical	`"horizontal" \\| "vertical" \\| undefined`	`'horizontal'`
`progress`	`progress`	A value between 0 and 1 that rapresents the status progress	`number`	`0`
`steps`	`steps`	Sets the steps that can be pronounced by accessibility technologies	`string`	`'Inizio,Un quarto,Metà,Tre quarti,Fine'`
`variant`	`variant`	Sets the theme variant colors	`"dark" \\| "error" \\| "info" \\| "light" \\| "primary" \\| "success" \\| "warning"`	`'primary'`

CSS Custom Properties

Name	Description
`--mds-progress-background`	Sets the background-color of the component
`--mds-progress-color`	Sets the background-color of the progress
`--mds-progress-duration`	Sets the duration of the progress bar animation
`--mds-progress-radius`	Sets the border-radius of the component
`--mds-progress-thickness`	Sets the thickness of the progress bar

Dependencies

Used by

Graph

graph TD;
  mds-accordion-timer-item --> mds-progress
  mds-benchmark-bar --> mds-progress
  mds-input-upload --> mds-progress
  mds-stepper-bar-item --> mds-progress
  style mds-progress fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @maggioli-design-system/mds-input-upload @maggioli-design-system/mds-accordion-timer-item @maggioli-design-system/mds-benchmark-bar @maggioli-design-system/mds-stepper-bar @zalastax/nolb-_mag

21 days ago

3 months ago

3 months ago

4 months ago