@maggioli-design-system/mds-banner

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 JavaScript framework you are using.

Properties

Property	Attribute	Description	Type	Default
cockade	cockade	Shows a decoration around the banner icon	boolean | undefined	true
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	"ai" | "dark" | "error" | "info" | "light" | "primary" | "success" | "warning" | undefined	'light'

Events

Event	Description	Type
mdsBannerClose	Emits when the url view is closed	CustomEvent<void>

Methods

updateLang() => Promise<void>

Returns

Type: Promise<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-cockade-background	When cockade attribute is set, the icon will be wrapper with a colored area, this is it's background
--mds-banner-cockade-distance	When cockade attribute is set, the icon will be wrapper with a colored area, this is it's icon color
--mds-banner-color	Sets the text color of the component
--mds-banner-gap	Sets gap between banner elements
--mds-banner-headline-color	The text color of the headline
--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

Used by

• mds-policy-ai

Depends on

• mds-icon
• mds-text
• mds-button

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
  mds-policy-ai --> mds-banner
  style mds-banner fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department