1.7.0 • Published 10 months ago
Last release10 months ago
mds-push-notification
Properties
| Property | Attribute | Description | Type | Default |
|---|
dateFormat | date-format | Specifies if the notification date format shows time passed or displays date as a static string | string | 'timeago' |
datetime | -- | Specifies the notification date based on standard ISO 8601. | string & { __isISO8601DateFormat: "ISO8601Date"; } \| undefined | undefined |
deletable | deletable | Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component mds-push-notifications | boolean | true |
icon | icon | Specifies the icon to be displayed | string \| undefined | undefined |
initials | initials | The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others | string \| undefined | undefined |
message | message | Specifies the message of the component | string | 'Nessun messaggio disponibile' |
preview | preview | Specifies if the src attribute is used to show a the image as avatar or full image | "avatar" \| "image" \| undefined | 'image' |
src | src | Specifies the path to the image | string \| undefined | undefined |
subject | subject | Specifies the subject of the component | string \| undefined | undefined |
tone | tone | Specifies the color tone of the component | "strong" \| "weak" \| undefined | 'weak' |
variant | variant | Specifies the color variant of the component | "amaranth" \| "aqua" \| "blue" \| "error" \| "green" \| "info" \| "lime" \| "orange" \| "orchid" \| "primary" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow" \| undefined | undefined |
Events
| Event | Description | Type |
|---|
mdsPushNotificationClose | Emits when the component is closed | CustomEvent<MdsPushNotificationEventDetail> |
Slots
| Slot | Description |
|---|
"actions" | Add HTML elements or components, it is recommended to use mds-button element. |
"badge" | Add HTML elements or components, it is recommended to use mds-badge element. |
Shadow Parts
| Part | Description |
|---|
"actions" | The actions wrapper |
"avatar" | |
"content" | The content wrapper of the message |
"icon" | The icon set by icon attribute |
"picture" | The picture image added by src attribute |
Dependencies
Depends on
Graph
graph TD;
mds-push-notification --> mds-avatar
mds-push-notification --> mds-img
mds-push-notification --> mds-text
mds-push-notification --> mds-button
mds-avatar --> mds-img
mds-avatar --> mds-icon
mds-img --> mds-icon
mds-img --> mds-text
mds-img --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
style mds-push-notification fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department