@maggioli-design-system/mds-progress
v2.10.3
Published
mds-progress is a web-component from Magma Design System, 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.
Downloads
539
Readme
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