second panel example

Author: kerrishotts

ui-kitchen-sink/index.html

@@ -1158,5 +1158,8 @@ <h6>Heading 6</h6>
       </div>
     </div>
   </div>
+  <div class="panel" id="secondPanel">
+    <sp-body>This is the second panel. See index.js, index.html, styles.css, and manifest.json for how this works.</sp-body>
+  </div>
 </body>
 </html>

ui-kitchen-sink/index.js

@@ -69,6 +69,13 @@ entrypoints.setup({
           case "showDialog": openProgrammaticDialog(); break;
         }
       }
+    },
+    secondPanel: {
+      show({node} = {}) {
+        const secondPanel = document.querySelector("#secondPanel");
+        node.appendChild(secondPanel);
+        secondPanel.classList.add("visible");
+      }
     }
   }
 });

ui-kitchen-sink/manifest.json

@@ -43,6 +43,27 @@
                     "theme": [ "lightest", "light" ]
                 }
             ]
+        },
+        {
+            "type": "panel",
+            "id": "secondPanel",
+            "minimumSize": {"width": 230, "height": 200},
+            "maximumSize": {"width": 2000, "height": 2000},
+            "preferredDockedSize": {"width": 230, "height": 300},
+            "preferredFloatingSize": {"width": 230, "height": 300},
+            "label": {"default": "Second Panel Demo"},
+            "icons": [
+                {
+                    "width": 23, "height": 23, "path": "icons/dark.png",
+                    "scale": [ 1, 2 ],
+                    "theme": [ "darkest", "dark", "medium" ]
+                },
+                {
+                    "width": 23, "height": 23, "path": "icons/light.png",
+                    "scale": [ 1, 2 ],
+                    "theme": [ "lightest", "light" ]
+                }
+            ]
         }
     ],
     "icons": [

ui-kitchen-sink/styles.css

@@ -1,3 +1,10 @@
+/* support for secondary panel -- keep it hidden until requested */
+.panel {
+  display: none;
+}
+.panel.visible {
+  display: initial;
+}
 
   @media (prefers-color-scheme: dark), (prefers-color-scheme: darkest) {
     label {