mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

cleanup

pull/411/head
Cory LaViska 2021-03-30 08:34:44 -04:00
rodzic d059017153
commit 3bd3bdd086
2 zmienionych plików z 82 dodań i 110 usunięć
docs/components

72
docs/components/dialog.md
Wyświetl plik

@ -13,14 +13,12 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
<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"]');
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());
})();
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>
```
@ -45,14 +43,12 @@ Use the `--width` custom property to set the dialog's width.
<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"]');
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());
})();
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>
```
@ -71,14 +67,12 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
<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"]');
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());
})();
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>
```
@ -95,16 +89,14 @@ By default, dialogs are closed when the user clicks or taps on the overlay. To p
<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"]');
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());
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
dialog.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
})();
dialog.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
</script>
```
@ -121,20 +113,18 @@ By default, the dialog's panel will gain focus when opened. To set focus on a di
<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"]');
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());
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
dialog.addEventListener('sl-initial-focus', event => {
event.preventDefault();
input.setFocus({ preventScroll: true });
});
})();
dialog.addEventListener('sl-initial-focus', event => {
event.preventDefault();
input.setFocus({ preventScroll: true });
});
</script>
```

120
docs/components/drawer.md
Wyświetl plik

@ -13,14 +13,12 @@ Drawers slide in from a container to expose additional options and information.
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -39,14 +37,12 @@ To make the drawer slide in from the left, set the `placement` attribute to `lef
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-placement-left');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-placement-left');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -63,14 +59,12 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -87,14 +81,12 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -117,14 +109,12 @@ By default, the drawer slides out of its [containing block](https://developer.mo
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-contained');
const openButton = drawer.parentElement.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-contained');
const openButton = drawer.parentElement.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -141,14 +131,12 @@ Use the `--size` custom property to set the drawer's size. This will be applied
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-custom-size');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-custom-size');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -167,14 +155,12 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-scrolling');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-scrolling');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
</script>
```
@ -191,16 +177,14 @@ By default, drawers are closed when the user clicks or taps on the overlay. To p
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-no-overlay-dismiss');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-no-overlay-dismiss');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
})();
drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
</script>
```
@ -217,20 +201,18 @@ By default, the drawer's panel will gain focus when opened. To set focus on a di
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-focus');
const input = drawer.querySelector('sl-input');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
const drawer = document.querySelector('.drawer-focus');
const input = drawer.querySelector('sl-input');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
drawer.addEventListener('sl-initial-focus', event => {
event.preventDefault();
input.setFocus({ preventScroll: true });
});
})();
drawer.addEventListener('sl-initial-focus', event => {
event.preventDefault();
input.setFocus({ preventScroll: true });
});
</script>
```