DÁP Szolgáltatások

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

Property	Type	Default	Description
`placement`	`'left'`, `'right'` , `'top'` , `'bottom'`	`'bottom'`	The placement of the tray.
`footer`	`string`	`'false'`	Whether the tray should have a footer. Default is false.
`header`	`string`	`'false'`	Whether the tray should have a header. Default is false.
`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.
`closeButton`	`string`		Whether the tray should have a close button. Default is true.
`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.
`size`	`'sm'`, `'lg'`		The size of the tray. Default is 'sm'.

Slots

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

Events

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

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.

CSS Custom Properties

Property Name	Description
`--dds-modal-max-block-size`	Maximum height of the modal. Default: 80vh.
`--dds-modal-max-inline-size`	Maximum width of the modal. Default: 600px.
`--dds-modal-padding-sm`	Padding inside the modal. Default: var(--dds-spacing-600).
`--dds-modal-padding-lg`	Padding inside the modal. Default: var(--dds-spacing-1200).
`--dds-modal-transform-amount`	Amount to transform for entrance animation. Default: 2rem.
`--dds-modal-transition-speed`	Speed of transition animations. Default: var(--dds-transition-fast).
`--dds-modal-transition-timing`	Timing function for transitions. Default: var(--dds-easing-ease-in-out).
`--dds-modal-border-width`	Border width of the modal. Default: var(--dds-border-width-base).
`--dds-modal-border-color`	Border color of the modal. Default: var(--dds-border-neutral-divider).
`--dds-modal-border-radius`	Border radius of the modal. Default: var(--dds-radius-large, 16px).
`--dds-modal-background`	Background color of the modal. Default: var(--dds-background-neutral-subtle).
`--dds-modal-header-margin-sm`	Margin below the header. Default: var(--dds-spacing-400).
`--dds-modal-header-margin-lg`	Margin below the header. Default: var(--dds-spacing-600).
`--dds-modal-footer-margin-sm`	Margin above the footer. Default: var(--dds-spacing-400).
`--dds-modal-footer-margin-lg`	Margin above the footer. Default: var(--dds-spacing-600).
`--dds-modal-footer-gap`	Gap between footer elements. Default: var(--dds-spacing-400).
`--dds-modal-close-margin`	Margin for the close button. Default: var(--dds-spacing-300).
`--dds-tray-width-side`	Width of the side (left/right) trays. Default: 250px.
`--dds-tray-min-width-horizontal`	Minimum width of the horizontal (top/bottom) trays. Default: 400px.
`--dds-tray-min-height-horizontal`	Minimum height of the horizontal (top/bottom) trays. Default: 300px.
`--dds-tray-min-height-vertical`	Minimum height of the vertical (left/right) trays. Default: 100%.
`--dds-tray-transform-duration`	Duration of the transform animation. Default: 0.3s.
`--dds-tray-transform-timing`	Timing function for the transform animation. Default: ease-in-out.

<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"> Tray content </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"> Tray content </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"> Tray content </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"> Tray content </dap-ds-tray> </dap-ds-stack>

Property

Type

Default

Description

placement

'left', 'right' , 'top' , 'bottom'

'bottom'

The placement of the tray.

footer

string

'false'

Whether the tray should have a footer. Default is false.

header

string

'false'

Whether the tray should have a header. Default is false.

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.

closeButton

string

Whether the tray should have a close button. Default is true.

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.

size

'sm', 'lg'

The size of the tray. Default is 'sm'.

Name

Description

(default)

The content of the tray.

header

The header of the tray.

footer

The footer of the tray.

Event Name

Description

Type

dds-before-open

Fires before the tray opens.

{void }

dds-opened

Fires after the tray opens.

{void }

dds-before-close

Fires before the tray closes.

{void }

dds-closed

Fires after the tray closed.

{void }

dds-close

Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.

{void }

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.

Property Name

Description

--dds-modal-max-block-size

Maximum height of the modal. Default: 80vh.

--dds-modal-max-inline-size

Maximum width of the modal. Default: 600px.

--dds-modal-padding-sm

Padding inside the modal. Default: var(--dds-spacing-600).

--dds-modal-padding-lg

Padding inside the modal. Default: var(--dds-spacing-1200).

--dds-modal-transform-amount

Amount to transform for entrance animation. Default: 2rem.

--dds-modal-transition-speed

Speed of transition animations. Default: var(--dds-transition-fast).

--dds-modal-transition-timing

Timing function for transitions. Default: var(--dds-easing-ease-in-out).

--dds-modal-border-width

Border width of the modal. Default: var(--dds-border-width-base).

--dds-modal-border-color

Border color of the modal. Default: var(--dds-border-neutral-divider).

--dds-modal-border-radius

Border radius of the modal. Default: var(--dds-radius-large, 16px).

--dds-modal-background

Background color of the modal. Default: var(--dds-background-neutral-subtle).

--dds-modal-header-margin-sm

Margin below the header. Default: var(--dds-spacing-400).

--dds-modal-header-margin-lg

Margin below the header. Default: var(--dds-spacing-600).

--dds-modal-footer-margin-sm

Margin above the footer. Default: var(--dds-spacing-400).

--dds-modal-footer-margin-lg

Margin above the footer. Default: var(--dds-spacing-600).

--dds-modal-footer-gap

Gap between footer elements. Default: var(--dds-spacing-400).

--dds-modal-close-margin

Margin for the close button. Default: var(--dds-spacing-300).

--dds-tray-width-side

Width of the side (left/right) trays. Default: 250px.

--dds-tray-min-width-horizontal

Minimum width of the horizontal (top/bottom) trays. Default: 400px.

--dds-tray-min-height-horizontal

Minimum height of the horizontal (top/bottom) trays. Default: 300px.

--dds-tray-min-height-vertical

Minimum height of the vertical (left/right) trays. Default: 100%.

--dds-tray-transform-duration

Duration of the transform animation. Default: 0.3s.

--dds-tray-transform-timing

Timing function for the transform animation. Default: ease-in-out.