@maggioli-design-system/mds-banner NPM

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

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

@maggioli-design-system/mds-button @maggioli-design-system/mds-icon @maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag @maggioli-design-system/mds-policy-ai

11 months ago

8 months ago

11 months ago

5 months ago