Get help Color blind mode Low vision mode

Tray Ready

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&nbsp;€</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) {
    info.active = e.detail.checked
  })
</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&nbsp;€</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-button
        variation="plain"
        icon-only
        margin="none"
        padding="none"
        color="secondary"
        icon="navigation-close"
      ></duet-button>
    </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 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-x-small) 0;
    border-bottom: 1px solid var(--color-gray-light);
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-small);
    text-decoration: none;
  }
  .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&nbsp;€</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&nbsp;€ </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 getLocaleString( this.accessibleCloseLabelDefaults, this.language )
accessibleCloseLabelDefaults accessible-close-label-default Defaults for accessibleCloseLabel DuetLangObject | string { fi: "Sulje", en: "Close", sv: "Stäng", }
accessibleOpenLabel accessible-open-label Accessible label that is shown for screen reader users in the expandable open toggle. Not visible for normal users. string getLocaleString( this.accessibleOpenLabelDefaults, this.language )
accessibleOpenLabelDefaults accessible-open-label-default Defaults for accessibleOpenLabel DuetLangObject | string { fi: "Avaa", en: "Open", sv: "Öppna", }
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
language language [DEPRECATED] this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing

The currently active language. This setting changes the accessible labels to match the chosen language.		 "en" | "fi" | "sv" getLanguage()
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.

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.