@maggioli-design-system/mds-stepper-bar-item
v5.6.5
Published
mds-stepper-bar-item 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
864
Readme
mds-stepper-bar-item
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 |
| -------------------- | -------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| badge
| badge
| Specifies if the badge status is displayed | boolean
| undefined
|
| current
| current
| Specifies if the component is the current or not | boolean
| false
|
| done
| done
| Specifies if the component is checked or not | boolean
| false
|
| icon
(required) | icon
| Specifies the icon displayed of the component when is not checked or the current item | string
| undefined
|
| iconChecked
| icon-checked
| Specifies the icon displayed of the component when is checked | string \| undefined
| this.icon
|
| label
(required) | label
| Specifies a short description of the component | string
| undefined
|
| step
| step
| Specifies if the step is displayed | boolean
| undefined
|
| typography
| typography
| Specifies the typography of the element | "action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip" \| undefined
| 'h6'
|
| value
| value
| Specifies the value the component will return mdsStepperBarItemSelect event | string \| undefined
| undefined
|
Events
| Event | Description | Type |
| ----------------------- | ------------------------------------ | ------------------------------------------- |
| mdsStepperBarItemDone
| Emits when the accordion is selected | CustomEvent<MdsStepperBarItemEventDetail>
|
CSS Custom Properties
| Name | Description |
| ------------------------------------------------ | ------------------------------------------------------------------- |
| --mds-stepper-bar-item-color
| Sets the color of the text |
| --mds-stepper-bar-item-duaration
| Sets the duration of the animation |
| --mds-stepper-bar-item-icon-background
| Sets the background-color of the icon |
| --mds-stepper-bar-item-icon-background-current
| Sets the background-color of the icon when the component is current |
| --mds-stepper-bar-item-icon-background-done
| Sets the background-color of the icon when the component is done |
| --mds-stepper-bar-item-icon-color
| Sets the color of the icon |
| --mds-stepper-bar-item-icon-color-current
| Sets the color of the icon when the component is current |
| --mds-stepper-bar-item-icon-color-done
| Sets the color of the icon when the component is done |
| --mds-stepper-bar-item-icon-ring-size
| Sets the size of the icon circle when the component is current |
| --mds-stepper-bar-item-min-width
| Sets the minimum width of the component |
| --mds-stepper-bar-item-progress-background
| Sets the background color of the progress bar |
| --mds-stepper-bar-item-progress-color
| Sets the color of the progress bar |
| --mds-stepper-bar-item-progress-thickness
| Sets the thickness of the progress bar |
Dependencies
Depends on
Graph
graph TD;
mds-stepper-bar-item --> mds-badge
mds-stepper-bar-item --> mds-icon
mds-stepper-bar-item --> mds-progress
mds-stepper-bar-item --> mds-text
mds-badge --> mds-text
style mds-stepper-bar-item fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department