4.9.6 • Published 21 days ago
@maggioli-design-system/mds-banner v4.9.6
mds-banner
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 |
---|---|---|---|---|
closeLabel | close-label | Sets the cross icon accessibility label to perform close action on element | "Annulla" \| undefined | 'Annulla' |
deletable | deletable | Shows the cross icon to perform cancel/delete action on element | boolean \| undefined | undefined |
headline | headline | The title on the top of the banner | string \| undefined | undefined |
icon | icon | An icon displayed at the top left of the banner | string \| undefined | undefined |
tone | tone | Sets the tone of the color variant | "quiet" \| "strong" \| "weak" \| undefined | 'weak' |
variant | variant | Sets the theme variant colors | "dark" \| "error" \| "info" \| "light" \| "primary" \| "success" \| "warning" \| undefined | 'light' |
Events
Event | Description | Type |
---|---|---|
mdsBannerClose | Emits when the url view is closed | CustomEvent<void> |
Slots
Slot | Description |
---|---|
"action" | Add HTML elements or components , it is recommended to use mds-button element. |
"default" | Add text string , HTML elements or components to this slot. |
CSS Custom Properties
Name | Description |
---|---|
--mds-banner-background | Sets the background-color of the component |
--mds-banner-close-icon-hover-background | Sets the background color of the close icon when the mouse is over it |
--mds-banner-color | Sets the text color of the component |
--mds-banner-icon-color | Sets the close icon fill color of the component |
--mds-banner-radius | Sets the border-radius of the component |
--mds-banner-shadow | Sets the box-shadow of the component |
Dependencies
Depends on
Graph
graph TD;
mds-banner --> mds-icon
mds-banner --> mds-text
mds-banner --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
style mds-banner fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
4.9.6
21 days ago
4.9.5
3 months ago
4.9.4
3 months ago
4.9.3
3 months ago
4.9.2
3 months ago
4.9.1
3 months ago
4.9.0
3 months ago
4.7.0
3 months ago
4.6.0
3 months ago
4.5.4
4 months ago
4.5.3
4 months ago
4.5.2
5 months ago
4.5.0
6 months ago
4.4.0
6 months ago
4.2.2
7 months ago
4.5.1
6 months ago
4.2.0
8 months ago
3.4.0
1 year ago
4.1.0
1 year ago
4.0.0
1 year ago
3.3.0
1 year ago
3.2.0
1 year ago
3.1.1
1 year ago
3.0.2
2 years ago
3.0.1
2 years ago
3.0.0
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.5.4
2 years ago
1.5.6
2 years ago
1.5.3
2 years ago
1.5.2
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.0.4
2 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago