@swivel/ui/elements/popup

Popup

The ui-popup element creates a fully accessible popup with a configurable trigger and overlay element. Both the trigger and overlay have to be added as child elements to the ui-popup element and marked using the data-part="trigger"/data-part="overlay" attribute respectively. This is similar to using the slot attribute, however without depending on shadow DOM:

    <ui-popup>
      <button type="button" data-part="trigger">Open Popup</button>
      <div data-part="overlay">
        <p>This is some arbitrary popup content.</p>
        <button class="primary">Ok</button>
      </div>
    </ui-popup>
    

The ui-popup element will create and manage the required behaviors for the popup functionality:

• FocusBehavior for managing the popup overlay focus
• PositionBehavior for managing the popup overlay position
• OverlayBehavior and OverlayTriggerBehavior for managing the interaction between the overlay and trigger

The ui-popup element has the following properties / configuration options:

• overlayClasses: an array of custom class names to be added to the overlay
• triggerClasses: an array of custom class names to be added to the trigger
• config: an object which allows to override the configurations of the popup's behavior instances

The ui-popup element does NOT trap the focus in the overlay by default. This is in line with the expected focus behavior of menu popups, listbox popups and similar ui elements, which capture the focus (set the focus to an initial element inside the popup) but allow a user to tab out of the popup and move on to the next element in the tab sequence. However, this behavior can be customized through the config property.

Plain HTML Example

This example shows a popup using plain HTML and no data-binding or templating.

Component Example