Skip to main content

Notification Drawer
New

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>

<script>
// Select the header element
var header = document.querySelector("duet-header")

// Listen for change events inside the header.
header.addEventListener("duetChange", function(e) {
var event = e.detail.originalEvent
var data = e.detail.data

// Set document language correctly when changing language
if (data.country) {
event.preventDefault()
document.documentElement.setAttribute("lang", data.country)
}
})
</script>
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
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" "fi"
theme theme Theme of the notification drawer. "" | "default" | "turva" ""

Methods #

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

Close the menu

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

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.



Tutorials

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

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

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