The dialog component is used to display content in a overlay that appears on top of the current view. It is used to display information that requires the user's attention or interaction.
Example
dialog
dialog Content
code
<bp-button popovertarget="dialog-example">open dialog</bp-button>
<bp-dialog id="dialog-example" modal closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Small
small dialog
dialog Content
code
<bp-button popovertarget="dialog-small">open dialog</bp-button>
<bp-dialog id="dialog-small" size="sm" modal closable>
<h2 slot="header" bp-text="section">small dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Large
large dialog
dialog Content
code
<bp-button popovertarget="dialog-large">open dialog</bp-button>
<bp-dialog id="dialog-large" size="lg" modal closable>
<h2 slot="header" bp-text="section">large dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Footer
dialog
dialog Content
code
<bp-button popovertarget="dialog-example">open dialog</bp-button>
<bp-dialog id="dialog-example" modal closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
<bp-button slot="footer" action="flat" popovertarget="dialog-example">close</bp-button>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Non Modal
dialog
dialog Content
code
<bp-button popovertarget="dialog-modal">open dialog</bp-button>
<bp-dialog id="dialog-modal" closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Install
NPM
// npm package
import '@blueprintui/components/include/dialog.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/dialog.js/+esm';
</script>Accessibility
- Provide clear and visible labels for all interactive elements, such as buttons and form fields.
- Ensure that the dialog can be navigated and operated with the keyboard, such as using the tab key to move between elements and the enter or space key to activate buttons.
- Ensure that the dialog is not the only way to access the content or functionality it provides, and that it can be closed easily by the user.
bp-dialog
Events
| Name | Types | Description |
|---|---|---|
open | dispatched when the dialog is opened | |
close | dispatched when the dialog is closed |
Properties
| Name | Types | Description |
|---|---|---|
size | 'sm' | 'md' | 'lg' | determine the visual size state |
position | Position | determine the position relative to the viewport |
closable | boolean | determine user closable state |
trigger | HTMLElement | string | the triggering element that opens the popover |
modal | boolean | determine if dialog is modal with a backdrop layer |
open | boolean | default popover to open on intialization |
i18n | set default aria/i18n strings |
Attributes
| Name | Types | Description |
|---|---|---|
size | 'sm' | 'md' | 'lg' | determine the visual size state |
position | Position | determine the position relative to the viewport |
closable | boolean | determine user closable state |
trigger | HTMLElement | string | the triggering element that opens the popover |
modal | boolean | determine if dialog is modal with a backdrop layer |
open | boolean | default popover to open on intialization |
i18n | set default aria/i18n strings |
CSS Properties
| Name | Types | Description |
|---|---|---|
--padding | ||
--filter | ||
--background | ||
--color | ||
--width | ||
--height | ||
--min-width | ||
--min-height | ||
--font-size | ||
--internal-offset-margin | ||
--animation-duration |
Slots
| Name | Types | Description |
|---|---|---|
default | slot for dialog content | |
header | slot for dialog header | |
footer | slot for dialog footer |