Dialog
The dialog uses the popover API.
The <dialog id="{id}"> can be opened or closed by adding popovertarget="{id}" to a <button>.
Information
- Folder
src/components/elements/dialog
Files
Schema
Mocks
Template
// src/components/elements/dialog/dialog.twig
{% set dialog_id = id ~ "-dialog" %}
<cd-dialog id="{{ id }}">
{% if open_label %}
<button popovertarget="{{ dialog_id }}">{{ open_label }}</button>
{% endif %}
<dialog
class="Dialog"
aria-labelledby="{{ id }}-title"
popover
id="{{ dialog_id }}"
{% if is_modal|default(true) %}data-modal="true"{% endif %}
>
<header class="Dialog-header">
<h2 class="Dialog-heading" id="{{ id }}-title">{{ title }}</h2>
<button class="Dialog-close" type="button" popovertarget="{{ dialog_id }}" aria-label="{{ close_label }}">
{% include "@elements/icon/icon.twig" with {
name: "close",
} only %}
</button>
</header>
<div class="Dialog-content">
{{ content }}
</div>
</dialog>
</cd-dialog>