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

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