DÁP Design System - Popup webcomponent

Popup

Popup component is a web component that displays a popup on top of the content. It can be used for notifications, alerts, or any other type of information that needs to be displayed on top of the content.

Examples

Default Popup

Popup component is the base component for all popups. It can be used to create custom popups. You have to handle the opening and closing of the popup yourself.

<dap-ds-popup id="default">
  <dap-ds-button slot="trigger" onClick={() => {
    const popup = document.querySelector('#default')
    popup.opened = !popup.opened 
  }}>
    open
  </dap-ds-button>
  content
</dap-ds-popup>

Placements

The placement of the popup. Can be 'top', 'right', 'bottom', or 'left'. Default is 'bottom'. Each of these base placements has an alignment in the form -start and -end. For example, right-start, or bottom-end. These allow you to align the tooltip to the edges of the button, rather than centering it.

<div style={{ display: 'flex', minHeight: 200, justifyContent: 'center', alignItems: 'center' }}>
    <dap-ds-stack direction="row">
      <dap-ds-popup id="top" placement="top">
        <dap-ds-button slot="trigger" onClick={() => {
          const popup = document.querySelector('#top')
          popup.opened = !popup.opened 
        }}>
          Top
        </dap-ds-button>
        Tooltip content
      </dap-ds-popup>
      <dap-ds-popup id="right" placement="right">
        <dap-ds-button slot="trigger" onClick={() => {
          const popup = document.querySelector('#right')
          popup.opened = !popup.opened 
        }}>
          Right
        </dap-ds-button>
        Tooltip content
      </dap-ds-popup>
      <dap-ds-popup id="bottom" placement="bottom">
        <dap-ds-button slot="trigger" onClick={() => {
          const popup = document.querySelector('#bottom')
          popup.opened = !popup.opened 
        }}>
          Bottom
        </dap-ds-button>
        Tooltip content
      </dap-ds-popup>
      <dap-ds-popup id="left" placement="left">
        <dap-ds-button slot="trigger"onClick={() => {
          const popup = document.querySelector('#left')
          popup.opened = !popup.opened 
        }}>
          Left
        </dap-ds-button>
        Tooltip content
      </dap-ds-popup>
      <dap-ds-popup id="rightstart" placement="right-start">
        <dap-ds-button slot="trigger"onClick={() => {
          const popup = document.querySelector('#rightstart')
          popup.opened = !popup.opened 
        }}>
          Right-Start
        </dap-ds-button>
        Tooltip content
      </dap-ds-popup>
    </dap-ds-stack>
  </div>

Arrow

Popup component has abuilt in arrow styling. You can enable it by setting the hasArrow attribute to true.

<dap-ds-popup id="arr" hasarrow>
  <dap-ds-button slot="trigger" onClick={() => {
    const popup = document.querySelector('#arr')
    popup.opened = !popup.opened 
  }}>
    open
  </dap-ds-button>
  This popup has an arrow.
</dap-ds-popup>

Custom Offset

Popup component can have a custom offset. You can set the offset by setting the offset attribute. Offset is the distance between the popup and the trigger.

<dap-ds-popup offset="20" id="offset" hasarrow>
  <dap-ds-button slot="trigger" onClick={() => 
    {
      const popup = document.querySelector('#offset')
      popup.opened = !popup.opened
    }}>
    Offset Popup
  </dap-ds-button>
  <div>
    This popup has a custom offset of 20 pixels.
  </div>
</dap-ds-popup>

Synced Popup

Popup component size can be synced with its trigger. You can enable this by setting the sync attribute to true.

<dap-ds-popup sync id="sync">
    <dap-ds-button slot="trigger" onClick={() => 
      {
        const popup = document.querySelector('#sync')
        popup.opened = !popup.opened
      }}>
      Synced Popup
    </dap-ds-button>
    <div>
      This popup's width is synced with its trigger.
    </div>
  </dap-ds-popup>

Importing

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

Importing React

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

Slots

Name	Description
`trigger`	The trigger of the popup.
`(default)`	The content of the popup.

Attributes

Property	Type	Default	Description
`disabled`	`boolean`	`false`	The disabled state of the popup.
`opened`	`boolean`	`false`	The open state of the popup.
`placement`	`PopupPlacement`	`'bottom'`	The placement of the popup. Can be 'top', 'right', 'bottom', or 'left'. Default is 'bottom'.
`floatingStrategy`	`'absolute' 'fixed'`	`'absolute'`	The floating strategy of the popup. Default is `absolute`. Can be `absolute` or `fixed`.
`offset`	`number`	`0`	The offset of the popup.
`sync`	`boolean`		The sync state of the popup.
`hasArrow`	`boolean`		The arrow state of the popup.
`maxHeight`	`number 'auto'`	`250`
`overflow`	`boolean`

Events

No custom events available.

CSS Parts

No CSS parts available.