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>
  </>

Importing

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

Importing React

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

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.

Attributes

Property	Type	Description
`open`	`boolean`	The open state of the modal.
`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.

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.