2020-07-15 21:30:37 +00:00
# Dialog
[component-header:sl-dialog]
2020-10-13 13:12:31 +00:00
Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
2020-07-15 21:30:37 +00:00
```html preview
< sl-dialog label = "Dialog" class = "dialog-overview" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
< sl-button slot = "footer" type = "primary" > Close< / sl-button >
< / sl-dialog >
< sl-button > Open Dialog< / sl-button >
< script >
(() => {
const dialog = document.querySelector('.dialog-overview');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
})();
< / script >
```
## UX Tips
- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
- Always provide an obvious way for the user to dismiss the dialog.
- Don't nest dialogs. It almost always leads to a poor experience for the user.
## Examples
### Custom Width
Use the `--width` custom property to set the dialog's width.
```html preview
< sl-dialog label = "Dialog" class = "dialog-width" style = "--width: 50vw;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
< sl-button slot = "footer" type = "primary" > Close< / sl-button >
< / sl-dialog >
< sl-button > Open Dialog< / sl-button >
< script >
(() => {
const dialog = document.querySelector('.dialog-width');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
})();
< / script >
```
### Scrolling
By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
```html preview
< sl-dialog label = "Dialog" class = "dialog-scrolling" >
2020-12-22 14:40:11 +00:00
< div style = "height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;" >
2020-07-15 21:30:37 +00:00
< p > Scroll down and give it a try! 👇< / p >
< / div >
< sl-button slot = "footer" type = "primary" > Close< / sl-button >
< / sl-dialog >
< sl-button > Open Dialog< / sl-button >
< script >
(() => {
const dialog = document.querySelector('.dialog-scrolling');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
})();
< / script >
```
### Ignoring Clicks on the Overlay
2020-10-15 18:33:30 +00:00
By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `sl-overlay-dismiss` event.
2020-07-15 21:30:37 +00:00
```html preview
< sl-dialog label = "Dialog" class = "dialog-no-overlay-dismiss" >
This dialog will not be closed when you click outside of it.
< sl-button slot = "footer" type = "primary" > Close< / sl-button >
< / sl-dialog >
< sl-button > Open Dialog< / sl-button >
< script >
(() => {
const dialog = document.querySelector('.dialog-no-overlay-dismiss');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
2020-10-09 21:45:16 +00:00
dialog.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
2020-07-15 21:30:37 +00:00
})();
< / script >
```
2021-01-07 15:17:08 +00:00
### Customizing Initial Focus
By default, the dialog's panel will gain focus when opened. To set focus on a different element, listen for the `sl-initial-focus` event.
```html preview
< sl-dialog label = "Dialog" class = "dialog-focus" >
< sl-input placeholder = "I will have focus when the dialog is opened" > < / sl-input >
< sl-button slot = "footer" type = "primary" > Close< / sl-button >
< / sl-dialog >
< sl-button > Open Dialog< / sl-button >
< script >
(() => {
const dialog = document.querySelector('.dialog-focus');
const input = dialog.querySelector('sl-input');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
dialog.addEventListener('sl-initial-focus', event => {
event.preventDefault();
2021-01-08 15:25:29 +00:00
input.setFocus({ preventScroll: true });
2021-01-07 15:17:08 +00:00
});
})();
< / script >
```
2020-07-15 21:30:37 +00:00
[component-metadata:sl-dialog]