Tray

Tray component is a popup component which can slide in from any side of the screen. It can be used to display additional information or actions.

Design system docs Examples Default tray

The dap-ds-tray component is basically a dap-ds-modal component with some specific styling, so all the attributes and events of the dap-ds-modal component are available for the dap-ds-tray component as well. Default tray is using the open attribute to open or close the tray. Default placement is bottom.

<div>
<dap-ds-button id="open-tray" onClick={() => 
  document.querySelector('dap-ds-tray').open = true
}>
  Open tray
</dap-ds-button>

<dap-ds-tray>
  <p>Tray content</p>
</dap-ds-tray>

</div>
Placement

You can set the placement attribute to top, right, bottom or left to change the direction of the tray.

<dap-ds-stack direction="row">
<dap-ds-button id="open-tray" onClick={() => 
  document.querySelector('#bottom').open = true
}>
  Open bottom
</dap-ds-button>

<dap-ds-tray id="bottom" placement="bottom">
  <p>Tray content</p>
</dap-ds-tray>

<dap-ds-button id="open-tray" onClick={() => 
  document.querySelector('#left').open = true
}>
  Open left
</dap-ds-button>

<dap-ds-tray id="left"  placement="left">
  <p>Tray content</p>
</dap-ds-tray>

<dap-ds-button id="open-tray" onClick={() => 
  document.querySelector('#right').open = true
}>
  Open right
</dap-ds-button>

<dap-ds-tray id="right" placement="right">
  <p>Tray content</p>
</dap-ds-tray>

<dap-ds-button id="open-tray" onClick={() => 
  document.querySelector('#top').open = true
}>
  Open top
</dap-ds-button>

<dap-ds-tray id="top"  placement="top">
  <p>Tray content</p>
</dap-ds-tray>
</dap-ds-stack>
Importing 
import { DapDSTray } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSTrayReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
placement'left', 'right' , 'top' , 'bottom''bottom'The placement of the tray.
footerstring'false'Whether the tray should have a footer. Default is false.
headerstring'false'Whether the tray should have a header. Default is false.
openbooleanThe open state of the tray.
closeOnEscbooleanWhether the tray should close on pressing the escape key. Default is true.
closeOnOverlayClickbooleanWhether the tray should close on clicking the overlay. Default is true.
closeButtonstringWhether the tray should have a close button. Default is true.
titlestringThe title of the tray.
descriptionstringThe description of the tray.
okButtonLabelstringThe label of the OK button.
cancelButtonLabelstringThe label of the Cancel button.
Slots
NameDescription
(default)The content of the tray.
headerThe header of the tray.
footerThe footer of the tray.
Events
Event NameDescriptionType
dds-before-openFires before the tray opens.{void }
dds-openedFires after the tray opens.{void }
dds-before-closeFires before the tray closes.{void }
dds-closedFires after the tray closed.{void }
dds-closeFires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.{void }
CSS Parts
Part NameDescription
baseThe main tray container.
panelThe panel of the tray.
headerThe header of the tray.
footerThe footer of the tray.
bodyThe body of the tray.
CSS Custom Properties
Property NameDescription
--dds-modal-max-block-sizeMaximum height of the modal. Default: 80vh.
--dds-modal-max-inline-sizeMaximum width of the modal. Default: 600px.
--dds-modal-paddingPadding inside the modal. Default: var(--dds-spacing-800).
--dds-modal-transform-amountAmount to transform for entrance animation. Default: 2rem.
--dds-modal-transition-speedSpeed of transition animations. Default: var(--dds-transition-fast).
--dds-modal-transition-timingTiming function for transitions. Default: var(--dds-easing-ease-in-out).
--dds-modal-border-widthBorder width of the modal. Default: var(--dds-border-width-base).
--dds-modal-border-colorBorder color of the modal. Default: var(--dds-border-neutral-divider).
--dds-modal-border-radiusBorder radius of the modal. Default: var(--dds-radius-large, 16px).
--dds-modal-backgroundBackground color of the modal. Default: var(--dds-background-neutral-subtle).
--dds-modal-header-marginMargin below the header. Default: var(--dds-spacing-800).
--dds-modal-footer-marginMargin above the footer. Default: var(--dds-spacing-400).
--dds-modal-footer-gapGap between footer elements. Default: var(--dds-spacing-400).
--dds-modal-close-marginMargin for the close button. Default: var(--dds-spacing-300).
--dds-tray-width-sideWidth of the side (left/right) trays. Default: 250px.
--dds-tray-min-width-horizontalMinimum width of the horizontal (top/bottom) trays. Default: 400px.
--dds-tray-min-height-horizontalMinimum height of the horizontal (top/bottom) trays. Default: 300px.
--dds-tray-min-height-verticalMinimum height of the vertical (left/right) trays. Default: 100%.
--dds-tray-transform-durationDuration of the transform animation. Default: 0.3s.
--dds-tray-transform-timingTiming function for the transform animation. Default: ease-in-out.