5.6.5 • Published 21 days ago
@maggioli-design-system/mds-stepper-bar-item v5.6.5
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
5.6.5
21 days ago
5.6.4
3 months ago
5.6.3
3 months ago
5.6.2
3 months ago
5.6.1
3 months ago
5.6.0
3 months ago
5.4.0
3 months ago
5.3.5
4 months ago
5.3.3
4 months ago
5.3.4
4 months ago
5.3.2
5 months ago
5.3.1
6 months ago
5.3.0
6 months ago
5.1.2
7 months ago
5.2.0
6 months ago
5.1.1
7 months ago
5.1.0
8 months ago
5.0.0
10 months ago
3.1.0
1 year ago
3.0.0
1 year ago
2.2.0
1 year ago
4.0.0
1 year ago
2.1.1
1 year ago
2.0.2
1 year ago
2.1.0
1 year ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago