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