mds-notification

Install

Install the component via npm by running the following command

npm install @maggioli-design-system/mds-notification

This package works also with yarn:

yarn add @maggioli-design-system/mds-notification

Import

Import the components in your project via TypeScript as follows:

import { defineCustomElements as dceMdsNotification } from '@maggioli-design-system/mds-notification/loader'

dceMdsNotification()

MdsNotification depends on MdsText, so you will have to import it as well:

import { defineCustomElements as dceMdsText } from '@maggioli-design-system/mds-text/loader'

dceMdsText()

You will have to import also the css style from @maggioli-design-system as follows:

@import '~@maggioli-design-system/styles/dist/css/colors-rgb.css`

If you need to support older browsers (i.e. IE or early version of Edge), you can wrap the defineCustomElements in another utility awailable in the same package:

import { applyPolyfills as apMdsNotification, defineCustomElements as dceMdsNotification } from '@maggioli-design-system/mds-notification/loader'

apMdsNotification().then(dceMdsNotification())

Use alias for defineCustomElements method to initialize multiple web components in the same place:

import { defineCustomElements as dceMdsComponentOne } from '@maggioli-design-system/mds-component-one/loader'
import { defineCustomElements as dceMdsComponentTwo } from '@maggioli-design-system/mds-component-two/loader'

dceMdsComponentOne()
dceMdsComponentTwo()

You can check how browser support works at this page.

Integration

How to use it in HTML

MdsNotification is meant to be used to support another HTML component (like an icon or a button) to notify the user of pending notifications.

The component accepts the following attributes:

• target: (mandatory) specifies the id of the element to which is attached
• value: specifies the number of notification to display (if set to the element will be hidden)
• visible: specifies if the notification should be visible or not

<mds-notification target='my-button' value=22 visible=true></mds-notification>
<button id='my-button'>Click here!</button>

You can try it out on the component's Storybook website!

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 | | ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------- | | max | max | Specifies the maximum number that can be seen, assuming that the number is for example 9 and that this is exceeded with 15, the component shows +9 | number \| undefined | undefined | | strategy | strategy | Specifies the position strategy of the notification | "absolute" \| "disabled" \| "fixed" | 'fixed' | | target | target | Specifies the selector of the target element, this attribute is used with querySelector method. | string | undefined | | value | value | Specifies number of notifications to display, if it set to 0, the element will be hidden | number | 0 | | visible | visible | Specifies if the notification is visible | boolean | true |

CSS Custom Properties

| Name | Description | | --------------------------------------- | ----------------------------------------------------- | | --mds-notification-color | Sets the text color of the component | | --mds-notification-dot-background | Sets the background-color of the component | | --mds-notification-dot-padding | Sets the size of the component | | --mds-notification-ring-color | Sets the border color of ring around the notification | | --mds-notification-ring-size | Sets the border size of ring around the notification | | --mds-notification-size | Sets the size of the component | | --mds-notification-translate-offset-x | Sets offset x positioning of the notification | | --mds-notification-translate-offset-y | Sets offset y positioning of the notification |

Dependencies

Depends on

• mds-text

Graph

graph TD;
  mds-notification --> mds-text
  style mds-notification fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department