@maggioli-design-system/mds-breadcrumb NPM

mds-breadcrumb

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
`back`	`back`	Choose to display or not the back arrow button	`boolean \\| undefined`	`true`

Events

Event	Description	Type
`mdsBreadcrumbChange`	Emits when the breadcrumb is changed	`CustomEvent<MdsBreadcrumbEventDetail>`

Methods

`updateLang() => Promise<void>`

Returns

Type: Promise<void>

Slots

Slot	Description
`"default"`	Add `mds-breadcrumb-item` element/s.

CSS Custom Properties

Name	Description
`--mds-breadcrumb-arrow-depth-color`	Sets the color of the arrow icon that separates buttons
`--mds-breadcrumb-button-background`	Sets the background color of the button
`--mds-breadcrumb-button-background-current`	Sets the background color of the button when it's active
`--mds-breadcrumb-button-background-disabled`	Sets the background color of the button when it's disabled, is used for arrow button
`--mds-breadcrumb-button-background-hover`	Sets the background color of the button when the mouse is over it
`--mds-breadcrumb-button-color`	Sets the text color of the button
`--mds-breadcrumb-button-color-current`	Sets the text color of the button when it's active
`--mds-breadcrumb-button-color-disabled`	Sets the text color of the button when it's disabled, is used for arrow button
`--mds-breadcrumb-button-color-hover`	Sets the text color of the button when the mouse is over it
`--mds-breadcrumb-current-button-color`	Sets the text color of the current depth button

Dependencies

Depends on

mds-button

Graph

graph TD;
  mds-breadcrumb --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/mds-button @maggioli-design-system/mds-breadcrumb-item @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570

1 year ago

1 year ago

1 year ago

1 year ago