@maggioli-design-system/mds-push-notification

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

• mds-avatar
• mds-img
• mds-text
• mds-button

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