Add custom panel example

oddbird · Jan 4, 2024 · 5f74602 · 5f74602
1 parent 5958c3a
commit 5f74602
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/custom-panel.html b/custom-panel.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" style="color-scheme: light dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Demo of slide-deck Web Component" />
+    <title>Slide-Deck Web Component Demo</title>
+    <link rel="stylesheet" href="slide-deck.css">
+    <style>body { margin: 0; }</style>
+    <script type="module" src="slide-deck.js"></script>
+  </head>
+  <body>
+    <slide-deck id="my-slides" key-control>
+      <dialog slot="control-panel">
+        <div>
+          <button set-view>grid</button>
+          <button set-view>list</button>
+          <form method="dialog"><button>close</button></form>
+        </div>
+      </dialog>
+      <header>
+        <h1>Slide-Deck Web Component</h1>
+        <p>
+          <a href="https://github.com/oddbird/slide-deck/">github.com/oddbird/slide-deck/</a>
+        </p>
+      </header>
+      <div>
+        <h2>Custom Control Panel</h2>
+        <p><strong>command-k</strong> to open</p>
+      </div>
+      <div>
+        <a href="./index.html">Back to demo</a>
+      </div>
+    </slide-deck>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -93,6 +93,10 @@ <h2><code>&lt;button set-view&gt;list&lt;button&gt;</code></h2>
           <button set-view>grid</button>
         </div>
       </div>
+      <div>
+        <h2>Custom Control Panel</h2>
+        <a href="./custom-panel.html">Example</a>
+      </div>
       <div><h2>Speaker View</h2></div>
       <div>
         <h2>Open Source</h2>