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

Simplify selectors in demos

Browse Source
This commit is contained in:
Cory LaViska
2020-06-18 17:36:27 -04:00
parent 30c6575587
commit 97de7c3cc3
3 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/components/dialog.md
View File

@@ -7,18 +7,18 @@ Dialogs...
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```html preview
<sl-dialog label="Dialog" id="dialog-overview">
<sl-dialog label="Dialog" class="dialog-overview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary" id="dialog-overview-close">Close</sl-button>
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-dialog>
<sl-button id="dialog-overview-open">Open Dialog</sl-button>
<sl-button>Open Dialog</sl-button>
<script>
(() => {
const dialog = document.querySelector('#dialog-overview');
const openButton = document.querySelector('#dialog-overview-open');
const closeButton = document.querySelector('#dialog-overview-close');
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());
@@ -33,7 +33,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
### Scrolling
```html preview
<sl-dialog label="Dialog" id="dialog-scrolling">
<sl-dialog label="Dialog" class="dialog-scrolling">
<div style="height: 150vh; border: dashed 1px var(--sl-color-gray-80); padding: 0 1rem;">
<p>
By design, the dialog's height will never exceed that of the viewport. As such, the dialog won't scroll with the
@@ -41,16 +41,16 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
</p>
<p>Give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary" id="dialog-scrolling-close">Close</sl-button>
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-dialog>
<sl-button id="dialog-scrolling-open">Open Dialog</sl-button>
<sl-button>Open Dialog</sl-button>
<script>
(() => {
const dialog = document.querySelector('#dialog-scrolling');
const openButton = document.querySelector('#dialog-scrolling-open');
const closeButton = document.querySelector('#dialog-scrolling-close');
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());

5
docs/components/range.md
View File

@@ -17,10 +17,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
### Custom Formatter
```html preview
<sl-range id="range-with-custom-formatter" min="0" max="100" step="1"></sl-range>
<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
<script>
document.querySelector('#range-with-custom-formatter').tooltipFormatter = value => `Total - ${value}%`;
const range = document.querySelector('.range-with-custom-formatter');
range.tooltipFormatter = value => `Total - ${value}%`;
</script>
```

4
docs/components/tooltip.md
View File

@@ -120,13 +120,13 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
```html preview
<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
<sl-tooltip content="This is an avatar" trigger="manual">
<sl-tooltip content="This is an avatar" class="manual-tooltip">
<sl-avatar></sl-avatar>
</sl-tooltip>
<script>
const tooltip = document.querySelector('sl-tooltip[trigger="manual"]');
const tooltip = document.querySelector('.manual-tooltip');
const toggle = tooltip.previousElementSibling;
toggle.addEventListener('click', () => tooltip.open = !tooltip.open);