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