Recommended | Not Recommended |
---|---|
Short Forms: Quick actions like logins or email subscriptions. | Non-Essential Information: Anything not directly related to the task at hand. |
Confirmations: For irreversible actions like deletions. | Long Content: Articles, long forms, or extensive information. |
Quick Previews: Enlarged images, videos or short descriptions. | Avoid Complex UI in Dialogs: Steer clear of nesting modals, carousels, or similar elements within dialogs. |
{# Render a trigger button #}
{% include '@bolt-elements-button/button.twig' with {
content: 'Open dialog',
attributes: {
type: 'button',
'data-bolt-dialog-target': '#dialog-1',
}
} only %}
{# Render the related dialog #}
{% set dialog_content %}
{% include '@bolt-components-dialog/dialog-header.twig' with {
content: header_content,
} only %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: body_content,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: footer_content,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
attributes: {
id: 'dialog-1'
},
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
content
|
Renders the dialog content. The dialog-header.twig, dialog-body.twig, and dialog-footer.twig components are expected here. |
any
| — |
|
width
|
Controls the width of the dialog. |
string
|
optimal
|
|
spacing
|
Controls the inset spacing of the dialog header, body, and footer. |
string
|
medium
|
|
persistent
|
Enables the dialog to be persistent. This will eliminate ways to close the dialog and it is up to the author to provide a custom link to close the dialog or redirect to another page within the dialog content. |
boolean
|
false
|
|
transparent
|
Renders a transparent background for the dialog. Only use this when building an image or video only modal without any text. Do not pass header and footer as text will not be legible with a transparent background. |
boolean
|
false
|
|
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the parent element. |
object
| — |
|
content
|
Main content of the dialog header. |
any
| — |
|
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the parent element. |
object
| — |
|
content
|
Main content of the dialog body. |
any
| — |
|
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal attributes object. Applies extra HTML attributes to the parent element. |
object
| — |
|
content
|
Main content of the dialog footer. |
any
| — |
|
npm install @bolt/components-dialog
{# Render a trigger button #}
{% include '@bolt-elements-button/button.twig' with {
content: 'Open dialog',
attributes: {
type: 'button',
'data-bolt-dialog-target': '#dialog-1',
}
} only %}
{# Render the related dialog #}
{% set dialog_content %}
{% include '@bolt-components-dialog/dialog-header.twig' with {
content: header_content,
} only %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: body_content,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: footer_content,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
attributes: {
id: 'dialog-1'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
width: 'full',
attributes: {
id: 'dialog-width-1'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
spacing: 'large',
attributes: {
id: 'dialog-spacing-1'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
persistent: true,
attributes: {
id: 'dialog-persistent-1'
},
} only %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Transparent dialog',
attributes: {
type: 'button',
'data-bolt-dialog-target': '#dialog-transparent',
}
} only %}
{% set dialog_content %}
{# Manually set the color theme (text + background color) #}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?',
attributes: {
class: 't-bolt-yellow',
},
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
transparent: true,
attributes: {
id: 'dialog-transparent'
},
} only %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: content,
attributes: {
class: 't-bolt-navy',
id: 'dialog-theme-1',
},
} only %}
{# Image only dialog #}
{% set image_dialog_content %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/16x9.jpg',
alt: 'Alt text.',
loading: 'lazy',
width: 640,
height: 480,
}
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: image,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: image_dialog_content,
spacing: 'none',
width: 'auto',
transparent: true,
attributes: {
id: 'dialog-image'
},
} only %}
{# Image + caption dialog #}
{% set caption_dialog_content %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/16x9.jpg',
alt: 'Alt text.',
loading: 'lazy',
width: 640,
height: 480,
}
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: image,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: 'This is the image caption.',
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: caption_dialog_content,
spacing: 'small',
width: 'auto',
attributes: {
id: 'dialog-caption'
},
} only %}
{# Video only dialog #}
{% set image_dialog_content %}
{% set video %}
{% set brightcove %}
<video-js
data-delayed-account="1900410236"
data-delayed-player="O3FkeBiaDz"
data-delayed-video-id="4892122320001"
data-video-delayed
data-embed="default"
controls
data-media-title
data-media-duration
class="c-base-video"></video-js>
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: brightcove,
ratio: 'wide'
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: video,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: image_dialog_content,
spacing: 'none',
transparent: true,
attributes: {
id: 'dialog-video'
},
} only %}
{# Video + description dialog #}
{% set caption_dialog_content %}
{% set video %}
{% set brightcove %}
<video-js
data-delayed-account="1900410236"
data-delayed-player="O3FkeBiaDz"
data-delayed-video-id="4892122320001"
data-video-delayed
data-embed="default"
controls
data-media-title
data-media-duration
class="c-base-video"></video-js>
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: brightcove,
ratio: 'wide'
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: video,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: 'This is the video description.',
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: caption_dialog_content,
spacing: 'small',
attributes: {
id: 'dialog-description'
},
} only %}
{% set header_content %}
{% include '@bolt-components-headline/headline.twig' with {
text: 'Get the Report',
size: 'xlarge'
} only %}
{% include '@bolt-components-headline/text.twig' with {
text: '(all fields are required)',
size: 'small'
} only %}
{% endset %}
{% set body_content %}
<form id="form-uuid-123">
{# form elements #}
</form>
{% endset %}
{% set footer_content %}
{% set icon_download %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'download',
} only %}
{% endset %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Download Now',
icon_before: icon_download,
display: 'block',
attributes: {
type: 'submit',
form: 'form-uuid-123',
},
} only %}
{% endset %}
{% set dialog_content %}
{% include '@bolt-components-dialog/dialog-header.twig' with {
content: header_content,
} only %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: body_content,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: footer_content,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
attributes: {
id: 'dialog-form'
},
} only %}
{% set layout %}
{% include '@bolt-layouts-layout/layout.twig' with {
content: 'Complex layout goes here',
padding_top: 'medium',
padding_bottom: 'none',
} only %}
{% endset %}
{% set footer_content %}
{% include '@bolt-elements-button/button.twig' with {
content: 'View full profile',
display: 'block',
attributes: {
href: 'https://pega.com',
},
} only %}
{% endset %}
{% set dialog_content %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: layout,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: footer_content,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: dialog_content,
attributes: {
id: 'dialog-layout'
},
} only %}