DÁP Design System - Modal webcomponent

Modal

Modal is a dialog box or popup window that is displayed on top of the current page.

Design system docs

Examples

Default Modal

<>
  <dap-ds-button onclick="document.querySelector('#basicmodal').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="basicmodal" title="Modal title" description="Description">
    <p>Modal content</p>
  </dap-ds-modal>
</>

Customized Modal

<>
  <dap-ds-button onclick="document.getElementById('tray-bottom').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="tray-bottom">
    <dap-ds-typography variant="h1" slot="title"
      >Like a tray?</dap-ds-typography
    >
    <p>Opened like a tray</p>
    <dap-ds-button slot="footer" onclick="document.getElementById('tray-bottom').open = false">I like tray</dap-ds-button>
    <dap-ds-button danger slot="footer" onclick="document.getElementById('tray-bottom').open = false">I don't ike tray</dap-ds-button>
  </dap-ds-modal>
</>

Events

Modal has many events according to its state. You can listen to these events to trigger some actions. Most important event is the dds-close event, which is triggered when the modal is closed. The events detail properry contains the source of the event. This can be ok-button, cancel-button, close-button, overlay, or esc.

Importing

import { DapDSModal } from 'dap-design-system/dist/dds'

Importing React

import { DapDSModalReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Description
`open`	`boolean`	The open state of the modal.
`fullScreen`	`boolean`	The full screen version of the modal.
`wideFooter`	`boolean`	Wide layout mode for footer.
`bottomFooter`	`boolean`	Pushes the footer to bottom.
`closeOnEsc`	`boolean`	Whether the modal should close on pressing the escape key. Default is true.
`closeOnOverlayClick`	`boolean`	Whether the modal should close on clicking the overlay. Default is true.
`closeButton`	`string`	Whether the modal should have a close button. Default is true.
`title`	`string`	The title of the modal.
`description`	`string`	The description of the modal.
`okButtonLabel`	`string`	The label of the OK button.
`cancelButtonLabel`	`string`	The label of the Cancel button.
`footer`	`string`	Whether the modal should have a footer. Default is true.
`header`	`string`	Whether the modal should have a header. Default is true.

Slots

Name	Description
`(default)`	The content of the modal.
`title`	The title of the modal.
`description`	The description of the modal.
`footer`	The footer of the modal.

Events

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

CSS Parts

Part Name	Description
`base`	The main modal container.
`panel`	The panel of the modal.
`header`	The header of the modal.
`title`	The title of the modal.
`description`	The description of the modal.
`footer`	The footer of the modal.
`content`	The body of the modal.
`closebutton`	The close button of the modal.