Skip to main content

Tray
New

Tray component is used to reveal additional information on a small viewport, that would normally be shown in the sticky sidebar of the Layout component.

While many of the below examples show Tray on desktop viewports, this component is primarily meant to be used on mobile viewports where the main navigation bar isn’t visible. For more usage examples in real context, please see Stepper template.

Examples

Open in new window
<duet-header session='{ "label": "Kirjaudu sisään", "href": "#" }'></duet-header>
<duet-tray responsive="false" active>
<duet-grid alignment="center">
<duet-grid-item margin="none" fill>
<duet-paragraph size="small" margin="none">Hinta yhteensä</duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<span class="duet-font-size-m duet-font-weight-semi-bold">189,90 €</span>
</duet-grid-item>
</duet-grid>
</duet-tray>

<!-- The below code is just an example -->
<br/><br/><br/>
<duet-toggle checked label="Toggle visibility"></duet-toggle>

<script>
// Select the elements we want to use
var toggle = document.querySelector("duet-toggle")
var info = document.querySelector("duet-tray")

// Listen for toggle change events to show and hide panel
toggle.addEventListener("duetChange", function(e) {
if (e.detail.checked) {
info.active = true
} else {
info.active = false
}
})
</script>
Open in new window
<duet-header session='{ "label": "Kirjaudu sisään", "href": "#" }'></duet-header>
<duet-tray active>
<duet-grid alignment="center">
<duet-grid-item margin="none" fill>
<duet-paragraph size="small" margin="none">Hinta yhteensä</duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<span class="duet-font-size-m duet-font-weight-semi-bold">189,90 €</span>
</duet-grid-item>
</duet-grid>
</duet-tray>
Open in new window
<duet-header session='{ "label": "Kirjaudu sisään", "href": "#" }'></duet-header>
<duet-tray
style
="cursor:pointer;"

auto-hide="false"
responsive="false"
active>

<duet-grid alignment="center">
<duet-grid-item margin="none" fill>
<duet-paragraph size="small" margin="none">
Check out this info panel! You can dismiss it by clicking anywhere.
</duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon margin="none" name="navigation-close" size="x-small" color="currentColor"></duet-icon>
</duet-grid-item>
</duet-grid>
</duet-tray>

<script>
// Select the above info panel
var info = document.querySelector("duet-tray")

// Close the panel on click
info.addEventListener("click", function() {
info.active = false
})

// Additionally close on enter or space press
info.addEventListener("keyup", function(e) {
if (e.key === "Space" || e.keyCode === 32 || e.key === "Enter" || e.keyCode === 13) {
info.active = false
}
})
</script>
Open in new window
<style>
.link-list a {
border-bottom: 1px solid var(--color-gray-light);
font-weight: var(--font-weight-semi-bold);
padding: var(--space-x-small) 0;
justify-content: space-between;
text-decoration: none;
align-items: center;
display: flex;
width: 100%;
}
.link-list a:last-of-type {
border: 0;
}
</style>

<duet-header session='{ "label": "Kirjaudu sisään", "href": "#" }'></duet-header>
<duet-tray active responsive="false" auto-hide="false">
<duet-grid alignment="center">
<duet-grid-item margin="none" fill>
<duet-paragraph size="small" margin="none">Vuosimaksu</duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<span class="duet-font-size-m duet-font-weight-semi-bold">189,90 €</span>
</duet-grid-item>
</duet-grid>
<div slot="additional">
<div class="link-list">
<a href="#" target="_blank">
<span class="duet-mr-xx-small">Liikennevakuutuksen tiedot</span>
<duet-icon name="action-new-window-small" size="xx-small" margin="none"></duet-icon>
<duet-visually-hidden>Aukeaa uuteen ikkunaan</duet-visually-hidden>
</a>
<a href="#" target="_blank">
<span class="duet-mr-xx-small">Kaskovakuutuksen tiedot</span>
<duet-icon name="action-new-window-small" size="xx-small" margin="none"></duet-icon>
<duet-visually-hidden>Aukeaa uuteen ikkunaan</duet-visually-hidden>
</a>
<a href="#" target="_blank">
<span class="duet-mr-xx-small">Liikennevakuutusehdot</span>
<duet-icon name="action-new-window-small" size="xx-small" margin="none"></duet-icon>
<duet-visually-hidden>Aukeaa uuteen ikkunaan</duet-visually-hidden>
</a>
<a href="#" target="_blank">
<span class="duet-mr-xx-small">Kaskovakuutuksehdot</span>
<duet-icon name="action-new-window-small" size="xx-small" margin="none"></duet-icon>
<duet-visually-hidden>Aukeaa uuteen ikkunaan</duet-visually-hidden>
</a>
<a href="#" target="_blank">
<span class="duet-mr-xx-small">Tuoteseloste</span>
<duet-icon name="action-new-window-small" size="xx-small" margin="none"></duet-icon>
<duet-visually-hidden>Aukeaa uuteen ikkunaan</duet-visually-hidden>
</a>
</div>
</div>
</duet-tray>
Open in new window
<duet-header session='{ "label": "Kirjaudu sisään", "href": "#" }'></duet-header>
<duet-tray responsive="false" active auto-hide="false">
<duet-grid alignment="center">
<duet-grid-item margin="none" fill>
<duet-paragraph size="small" margin="none"> Total price </duet-paragraph>
</duet-grid-item>
<duet-grid-item margin="none">
<span class="duet-font-size-m duet-font-weight-semi-bold">
189,90 €
</span>
</duet-grid-item>
</duet-grid>
</duet-tray>

<duet-layout center>
<div slot="main">
<duet-paragraph>
Click on the tray to scroll to a target element
</duet-paragraph>
<!-- this is purely to create some space to demonstrate scrolling -->
<div style="height: 200vh"></div>
<duet-paragraph id="scroll-target">
Clicking on the tray should scroll to this element
</duet-paragraph>
</div>
</duet-layout>

<script>
var tray = document.querySelector("duet-tray")
var target = document.querySelector("#scroll-target")

tray.addEventListener("click", function(e) {
target.scrollIntoView({
behavior: "smooth",
block: "center"
})
})
</script>

Properties #

Property Attribute Description Type Default
accessibleCloseLabel accessible-close-label Accessible label that is shown for screen reader users in the expandable close toggle. Not visible for normal users. string "Sulje"
accessibleOpenLabel accessible-open-label Accessible label that is shown for screen reader users in the expandable open toggle. Not visible for normal users. string "Avaa"
active active Toggle whether the info panel is visible or not. You can use this property e.g. when pricing information is revealed to the user. boolean false
autoHide auto-hide Hide the info panel when user scrolls back to the top of the viewport. boolean true
responsive responsive Enable or disable the automatic responsive behaviour which makes the info panel hide on larger viewports. Settings this to "false" means that the header panel is visible on all device sizes. boolean true
theme theme Theme of the info panel. "" | "default" | "turva" ""

Slots #

Slot Description
"additional" Additional content. Anything inserted into this slot is displayed in an expandable section.
"unnamed default slot" The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.

Usage #

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

When to use #

  • To reveal additional information on a small viewport, that would normally be shown in the sticky sidebar.

When not to use #

  • Avoid usage on desktop viewports, as this component is primarily meant to be used on mobile.

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.


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.