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;"

role="button"
auto-hide="false"
tabindex="0"
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>

Properties #

Property Attribute Description Type Default
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
target -- An HTML element where the browser should scroll to when info panel is tapped or clicked. If this property isn’t used then nothing will happen by default when clicking the component. HTMLElement undefined
theme theme Theme of the info panel. "" | "default" | "turva" ""

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.