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.
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.
You can set the placement attribute to top, right, bottom or left to change the direction of the tray.
import { DapDSTray } from 'dap-design-system'
import { DapDSTrayReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSTray } from 'dap-design-system/components'
| 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. |
content | The content of the tray. |
body | The body of the tray. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-tray::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-tray::part(base),
.my-custom-dap-ds-tray::part(panel) {
/* Shared styles */
}
Example usage:
<dap-ds-tray class="my-custom-dap-ds-tray">
Tray
</dap-ds-tray>
.my-custom-dap-ds-tray::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| 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. |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-tray
style="--dds-modal-max-block-size: value; --dds-modal-max-inline-size: value;">
Tray
</dap-ds-tray>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-tray {
--dds-modal-max-block-size: value;
--dds-modal-max-inline-size: value;
--dds-modal-padding-sm: value;
}
<dap-ds-tray class="my-custom-dap-ds-tray">
Tray
</dap-ds-tray>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-tray {
--dds-modal-max-block-size: value;
--dds-modal-max-inline-size: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
