js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Essential Dialog docs

Browse Source 
Essentials page for dialog
This commit is contained in:
Lea Verou
2024-12-18 08:05:35 -05:00
parent 5a058a8808
commit 3734f9cea5
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/docs/components/dialog.md
View File

@@ -2,12 +2,13 @@
title: Dialog
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
tags: component
essentials: dialog
---
<!-- cspell:dictionaries lorem-ipsum -->
```html {.example}
<wa-dialog label="Dialog" with-header with-footer class="dialog-overview">
<wa-dialog label="Dialog" with-header with-footer id="dialog-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>
@@ -15,7 +16,7 @@ tags: component
<wa-button>Open Dialog</wa-button>
<script>
const dialog = document.querySelector('.dialog-overview');
const dialog = document.querySelector('#dialog-overview');
const openButton = dialog.nextElementSibling;
openButton.addEventListener('click', () => dialog.open = true);
@@ -85,10 +86,10 @@ You can add the special `data-dialog="close"` attribute to a button inside the d
### Custom Width
Use the `--width` custom property to set the dialog's width.
Just use the CSS `width` property to set the dialog's width.
```html {.example}
<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="--width: 50vw;">
<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="width: 50vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
</wa-dialog>

36
docs/docs/essentials/dialog.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Dialog
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
tags: essentials
layout: element
elements:
"<dialog>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
component: dialog
---
```html {.example}
<dialog id="dialog-overview">
<header>
<h2>Dialog</h2>
<button data-dialog="close" class="wa-text">✖️</button>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer>
<button class="wa-brand" data-dialog="close">Close</button>
</footer>
</dialog>
<button>Open Dialog</button>
<script>
const dialog = document.querySelector('#dialog-overview');
const openButton = dialog.nextElementSibling;
openButton.addEventListener('click', () => dialog.showModal());
dialog.addEventListener('click', event => {
if (event.target.closest('[data-dialog="close"]')) {
dialog.close();
}
});
</script>
```