kopia lustrzana https://github.com/shoelace-style/shoelace
112 wiersze
3.4 KiB
Markdown
112 wiersze
3.4 KiB
Markdown
# Dialog
|
|
|
|
[component-header:sl-dialog]
|
|
|
|
Dialogs appear above the page and require the user's immediate attention.
|
|
|
|
```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">
|
|
<div style="height: 150vh; border: dashed 2px var(--sl-color-gray-80); padding: 0 1rem;">
|
|
<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
|
|
|
|
By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event.
|
|
|
|
```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());
|
|
|
|
dialog.addEventListener('slOverlayDismiss', event => event.preventDefault());
|
|
})();
|
|
</script>
|
|
```
|
|
|
|
[component-metadata:sl-dialog]
|