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