DÁP Design System - Tray webcomponent

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'

Slots

Name	Description
`(default)`	The content of the tray.
`header`	The header of the tray.
`footer`	The footer of the tray.

Attributes

Property	Type	Default	Description
`open`	`boolean`		The open state of the tray.
`closeOnEsc`	`boolean`		Whether the tray should close on pressing the escape key. Default is true.
`closeOnOverlayClick`	`boolean`		Whether the tray should close on clicking the overlay. Default is true.
`noCloseButton`	`boolean`		Whether the tray should have a close button. Default is false.
`title`	`string`		The title of the tray.
`description`	`string`		The description of the tray.
`okButtonLabel`	`string`		The label of the OK button.
`cancelButtonLabel`	`string`		The label of the Cancel button.
`noFooter`	`boolean`		Whether the tray should have a footer. Default is false.
`noHeader`	`boolean`		Whether the tray should have a header. Default is false.
`placement`	`'left' 'right' 'top' 'bottom'`	`'bottom'`	The placement of the tray. Default is `bottom`. Can be `left`, `right`, `top`, or `bottom`.

Events

Event Name	Description
`dds-before-open`	Fires before the tray opens.
`dds-opened`	Fires after the tray opens.
`dds-before-close`	Fires before the tray closes.
`dds-closed`	Fires after the tray closed.
`dds-close`	Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.

CSS Parts

Part Name	Description
`base`	The main tray container.
`panel`	The panel of the tray.
`header`	The header of the tray.
`footer`	The footer of the tray.
`body`	The body of the tray.