Get help Color blind mode Low vision mode

Notification Drawer Ready

Notification Drawer informs users about recent notification messages. Notification Drawer can be used to display up to 20 notification messages.

Notification Drawer is most commonly used inside the Header component. Notification Drawer consists of a toggle button and dropdown list of notifications. Please see the Notification component for additional info.

Examples #

Open in new window 
<duet-notification-drawer direction="right" label="Ilmoitukset (1)" icon="messaging-notification" badge>
  <duet-notification highlight url="https://www.duetds.com" date="23.11.2020">
    <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
    <duet-paragraph size="small" margin="none">
      Uuden kotivakuutuksesi tiedot ja asiakirjat löydät klikkaamalla tästä.
    </duet-paragraph>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="12.10.2020">
    <duet-heading level="h2" visual-level="h6"> Vakuutuskausi vaihtuu </duet-heading>
    <duet-paragraph size="small" margin="none">
      Kotivakuutuksesi uuden vakuutuskauden asiakirjat löydät täältä.
    </duet-paragraph>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="8.10.2020">
    <duet-heading level="h2" visual-level="h6"> Muutosvahvistus </duet-heading>
    <duet-paragraph size="small" margin="none">
      Olet tehnyt muutoksia kotivakuutukseesi. Tarkista täältä että kaikki tiedot ovat oikein.
    </duet-paragraph>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="6.6.2020">
    <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
    <duet-paragraph size="small" margin="none">
      Uuden kotivakuutuksesi tiedot ja asiakirjat löydät täältä.
    </duet-paragraph>
  </duet-notification>
</duet-notification-drawer>
Open in new window 
<duet-header
  language="fi"
  region="Pääkaupunkiseutu"
  contact="Ota yhteyttä"
  skip-to-id="#content"
  current-href="/"
  items='[
    { "label": "Etusivu","href": "/" },
    { "label": "Vakuutukset", "href": "#" },
    { "label": "Vahinkoasiat", "href": "#" },
    { "label": "Säästöt ja sijoitukset", "href": "#" },
    { "label": "Laskut", "href": "#" },
    { "label": "Viestit", "href": "#" }
  ]'
  language-items='[
    { "label": "Suomeksi", "country": "fi", "href": "/?lang=fi" },
    { "label": "På Svenska", "country": "sv", "href": "/?lang=sv" },
    { "label": "In English", "country": "en", "href": "/?lang=en" }
  ]'
  contact-items='[
    { "label": "Lähetä viesti", "href": "/viestit/laheta" },
    { "label": "Avaa chat", "href": "/chat/" },
    { "label": "Yhteystiedot", "href": "/yhteystiedot/" }
  ]'
  session='{
    "label": "Kirjaudu ulos",
    "href": "/?logout",
    "type": "logout"
  }'
  user='{
    "label": "Elina",
    "href": "/?userId=elina"
  }'
  >
  <div slot="utility">
    <duet-notification-drawer label="Ilmoitukset (1)" icon="messaging-notification" badge>
      <duet-notification highlight url="https://www.duetds.com" date="23.11.2020">
        <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
        <duet-paragraph size="small" margin="none">
          Uuden kotivakuutuksesi tiedot ja asiakirjat löydät klikkaamalla tästä.
        </duet-paragraph>
      </duet-notification>
      <duet-notification url="https://www.duetds.com" date="12.10.2020">
        <duet-heading level="h2" visual-level="h6"> Vakuutuskausi vaihtuu </duet-heading>
        <duet-paragraph size="small" margin="none">
          Kotivakuutuksesi uuden vakuutuskauden asiakirjat löydät täältä.
        </duet-paragraph>
      </duet-notification>
      <duet-notification url="https://www.duetds.com" date="8.10.2020">
        <duet-heading level="h2" visual-level="h6"> Muutosvahvistus </duet-heading>
        <duet-paragraph size="small" margin="none">
          Olet tehnyt muutoksia kotivakuutukseesi. Tarkista täältä että kaikki tiedot ovat oikein.
        </duet-paragraph>
      </duet-notification>
      <duet-notification url="https://www.duetds.com" date="6.6.2020">
        <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
        <duet-paragraph size="small" margin="none">
          Uuden kotivakuutuksesi tiedot ja asiakirjat löydät täältä.
        </duet-paragraph>
      </duet-notification>
    </duet-notification-drawer>
  </div>
</duet-header>
Open in new window 
<duet-notification-drawer direction="right" label="Ilmoitukset (1)" icon="messaging-notification" badge>
  <duet-notification highlight url="https://www.duetds.com" date="23.11.2020">
    <duet-heading margin="none" level="h2" visual-level="h6"> Lataa uusi sovellus puhelimeesi </duet-heading>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="12.10.2020">
    <duet-heading margin="none" level="h2" visual-level="h6"> Vakuutuskausi vaihtuu </duet-heading>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="8.10.2020">
    <duet-heading margin="none" level="h2" visual-level="h6"> Korkohyvitys vuodelle 2019 </duet-heading>
  </duet-notification>
  <duet-notification url="https://www.duetds.com" date="6.6.2020">
    <duet-heading margin="none" level="h2" visual-level="h6"> Tietoa muutoksista verkkopalvelussa </duet-heading>
  </duet-notification>
</duet-notification-drawer>
Open in new window 
<duet-notification-drawer direction="right" label="Ilmoitukset" icon="messaging-notification">
</duet-notification-drawer>

Properties #

Property Attribute Description Type Default
accessibleLabelNotifications accessible-label-notifications Adds accessible label for tooltip that is shown for notifications string getLocaleString(this.accessibleLabelNotificationsDefaults)
accessibleLabelNotificationsDefaults accessible-label-notification-default Defaults for accessibleLabelNotifications DuetLangObject | string { en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer", }
badge badge Show a badge that indicates something has changed. boolean false
direction direction Which direction should the drawer open in? "left" | "right" "left"
icon icon Icon to display to the left of the drawer button. string ""
label label Label for the drawer button. string "Label"
language language The currently active language. Used to determine the message displayed when there are no notifications. "en" | "fi" | "sv" getLanguage()
theme theme Theme of the notification drawer. "" | "default" | "turva" ""

Methods #

close(moveFocusToButton?: boolean) => Promise<void> #

Close the menu

Parameters #

Name Type Description
moveFocusToButton boolean should focus be moved to the menu's button on close?

Returns #

Type: Promise<void>

open() => Promise<void> #

Open the menu

Returns #

Type: Promise<void>

setFocus(options?: FocusOptions) => Promise<void> #

Move focus to the menu's button. Use instead of the native focus() method

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When you need to be able to send notifications to the user.
  • When you need “push” messaging.
  • When you want to display a maximum of 20 notifications.
  • When showing 80 or less characters in the notification heading.
  • When showing 120 or less characters in the notification paragraph.

When not to use #

  • To create a dropdown menu for a form. Use select component instead.
  • As a generic dropdown component. Use select component instead.
  • For showing more than 20 notifications.
  • When you have more than 80 characters in the heading. Please enable text truncation in your app.
  • When you have more than 120 characters in the paragraph. Please enable text truncation in your app.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.