Better than thousands words, look at this demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="shoelace demo">
<link rel="stylesheet" href="./shoelace.css">
<script type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/components/button/button.js"></script>
<script type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/components/drawer/drawer.js"></script>
<title>Document</title>
<style>
body {
opacity: 0.01;
}
body.ready {
opacity: 1;
transition: 0.25s opacity;
}
</style>
</head>
<body>
<sl-button class="greet" variant="primary">HEllo</sl-button>
<sl-drawer label="Drawer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" variant="primary">
Close
</sl-button>
</sl-drawer>
<sl-button class="opener">Open</sl-button>
<script>
let drawer = document.querySelector("sl-drawer")
let greetButton = document.querySelector(".greet")
let openButton = document.querySelector(".opener")
let closeButton = drawer.querySelector("sl-button")
openButton.onclick = () => drawer.show();
closeButton.onclick = () => drawer.hide();
greetButton.onclick = () => alert("Hey")
</script>
<script type="module">
await Promise.allSettled([
customElements.whenDefined('sl-button'),
customElements.whenDefined('sl-drawer'),
]);
document.body.classList.add('ready');
</script>
</body>
</html>
Top comments (0)