@maggioli-design-system/mds-push-notification
v5.2.3
Published
mds-push-notification is a web-component from Magma Design System, 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.
Keywords
Readme
mds-push-notification
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| behavior | behavior | Specifies if the component is visible or not. behavior = manual should hide when click outside should hide when all notifications are removed should show when change visible from component or call show method behavior = auto should hide when all notifications are removed should show when one or more notifications are added | "auto" \| "manual" \| undefined | 'auto' |
| visible | visible | Specifies if the component is visible or not. | boolean \| undefined | undefined |
Events
| Event | Description | Type |
| --------------------------- | ------------------------------------------- | --------------------------------------------- |
| mdsPushNotificationChange | Emits when the component visibility changes | CustomEvent<MdsPushNotificationEventDetail> |
| mdsPushNotificationHide | Emits when the component is hidden | CustomEvent<void> |
| mdsPushNotificationShow | Emits when the component is shown | CustomEvent<void> |
Methods
hide() => Promise<void>
Returns
Type: Promise<void>
removeNotification(notification: HTMLMdsPushNotificationItemElement | HTMLMdsPushNotificationItemElement[]) => Promise<void>
Parameters
| Name | Type | Description |
| -------------- | ---------------------------------------------------------------------------- | ----------- |
| notification | HTMLMdsPushNotificationItemElement \| HTMLMdsPushNotificationItemElement[] | |
Returns
Type: Promise<void>
show() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
| ----------- | -------------------------------------------------------------------------------------------------- |
| "bottom" | Add HTML elements or components, it is recommended to use mds-button element. |
| "default" | Add HTML elements or components, it is recommended to use mds-push-notification element. |
| "top" | Add HTML elements or components, it is recommended to use mds-button element. |
Shadow Parts
| Part | Description |
| ----------------- | ------------------------------------------- |
| "notifications" | The container wrapper of the notifications. |
Dependencies
Depends on
Graph
graph TD;
mds-push-notification --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
style mds-push-notification fill:#f9f,stroke:#333,stroke-width:4pxBuilt with love @ Gruppo Maggioli from R&D Department
