@maggioli-design-system/mds-stepper-bar-item

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 JavaScript 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

• mds-badge
• mds-icon
• mds-progress
• mds-text

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