Merge branch 'main' of https://github.com/posit-dev/py-shiny-site

components/_partials/components.css

@@ -1,6 +1,6 @@
 /*
 
-The /components/ section is made up of a list page and artcle pages.  
+The /components/ section is made up of a list page and artcle pages.
 
 The components list page (/components/index.qmd) gets styling from /components/_partials/components-list.css.
 
@@ -17,8 +17,6 @@ The article pages (/components/_____/index.qmd) get styling from here.
   }
 }
 
-
-
 /* Add rule and spacing between sections */
 
 section.level2:not(:first-child) h2 {
@@ -37,15 +35,12 @@ section.level2:not(:first-child) > :last-child {
   white-space: normal;
 }
 
-
 /*remove extra space under header*/
 
 #title-block-header {
   margin-block-end: 0px;
 }
 
-
-
 .component-hr:last-of-type {
   display: none;
 }
@@ -77,4 +72,11 @@ main a.nav-link:hover {
 .iframe-border {
   border: 1px solid #e9ecef;
   border-radius: 10px;
-}
+}
+
+.scale-iframe iframe {
+  transform: scale(var(--scale-factor));
+  width: calc(1 / var(--scale-factor) * 100%);
+  height: calc(1 / var(--scale-factor) * 100%);
+  transform-origin: top left;
+}

components/_partials/shiny-example-panel.ejs

@@ -4,7 +4,7 @@
 <% if (previews.length) { %>
 <%   const previewApp = previews[0] %>
 
-:::{.app-preview}
+:::{.app-preview <%= previewApp.attrs || "" %>}
 ```{shinylive-python}
 #| standalone: true
 #| components: [<%= previewApp.components ? previewApp.components.join(', ') : 'viewer' %>]
@@ -21,7 +21,7 @@
 <% for (const app of codeApps) { %>
 ### <%= app.title %>
 
-```{.python .code-overflow-scroll <%=app.shinylive ? `shinylive="${app.shinylive}"` : '' %>}
+```{.python .code-overflow-scroll <% app.attrs || "" %> <%=app.shinylive ? `shinylive="${app.shinylive}"` : '' %>}
 <%= Deno.readTextFileSync((appDir || '') + app.file) %>
 ```
 

components/inputs/dark-mode/app-core.py

@@ -0,0 +1,10 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+    ui.input_dark_mode() # <<
+)
+
+def server(input, output, session):
+    pass
+
+app = App(app_ui, server)

components/inputs/dark-mode/app-detail-preview.py

@@ -0,0 +1,9 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(ui.input_dark_mode()).add_class("h-100 w-100 align-content-center text-center")
+
+def server(input, output, session):
+    pass
+
+app = App(app_ui, server)

components/inputs/dark-mode/app-express.py

@@ -0,0 +1,5 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_dark_mode() # << 

components/inputs/dark-mode/app-preview.py

@@ -0,0 +1,13 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+  ui.input_dark_mode().add_class("mb-0"),
+  {
+    "class": "vh-100 d-flex flex-column justify-content-center align-items-center px-4"
+  },
+)
+
+def server(input, output, session):
+    pass
+
+app = App(app_ui, server)

components/inputs/dark-mode/app-variation-dark-mode-navbar-core.py

@@ -0,0 +1,12 @@
+from shiny import App, ui
+
+app_ui = ui.page_navbar(
+    ui.nav_spacer(), # <<
+    ui.nav_control(ui.input_dark_mode()), # <<
+    title="Dark mode switch in navbar"
+)
+
+def server(input, output, session):
+    pass
+
+app = App(app_ui, server)

components/inputs/dark-mode/app-variation-dark-mode-navbar-express.py

@@ -0,0 +1,7 @@
+from shiny.express import ui
+
+ui.page_opts(title="Dark mode switch in navbar", fillable=True, id="page")
+
+ui.nav_spacer()  # <<
+with ui.nav_control():  # <<
+    ui.input_dark_mode()  # <<

components/inputs/dark-mode/index.qmd

@@ -0,0 +1,77 @@
+---
+title: "Dark Mode Switch"
+sidebar: components
+appPreview:
+  file: components/inputs/dark-mode/app-preview.py
+listing:
+- id: example
+  template: ../../_partials/components-detail-example.ejs
+  template-params:
+    dir: components/inputs/dark-mode/
+  contents:
+  - title: Preview
+    file: app-detail-preview.py
+    height: 200
+  - title: Express
+    file: app-express.py
+    shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6lACZw6AHQj1GrTtwxwAHqlEsWvfoOFdUAVzJ4mBjjIsQzGfUYD6YqHQDWdmMQkAKAJRMmlmTAAXwBdIA
+  - title: Core
+    file: app-core.py
+    shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlN0qHQDWmmMVkbAEomVSDVVVkaVjkANzkbFzcJYjdXMgkWOBYWDlIgxHtHVCgciOh0PSYlVBsNbXEYuni6cIgwAF8AXSA
+- id: relevant-functions
+  template: ../../_partials/components-detail-relevant-functions.ejs
+  contents:
+  - title: ui.input_dark_mode
+    href: https://shiny.posit.co/py/api/ui.input_dark_mode.html
+    signature: ui.input_dark_mode(id=None, mode=None, **kwargs)
+- id: variations
+  template: ../../_partials/components-variations.ejs
+  template-params:
+    dir: components/inputs/dark-mode/
+  contents:
+  - title: Dark mode switch in a navbar
+    description: >
+      To add a dark mode switch to a navbar, use `ui.page_navbar()` to
+      create a page with a navbar, and `ui.nav_spacer()` to push the dark mode switch
+      to the right. Place the `ui.input_dark_mode()` element within a
+      `ui.nav_control()` element, to add the control to the navbar without creating a
+      corresponding panel.
+    apps:
+    - title: Preview
+      file: app-variation-dark-mode-navbar-core.py
+      attrs: >
+        .scale-iframe style="--scale-factor: 0.8;"
+    - title: Express
+      file: app-variation-dark-mode-navbar-express.py
+      shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbDOAD1R04LFkw4xUxOmSYBXDgB0IS+VigBzOAH1iqMiwAUZDmQA2cALwKwAESh0A1kwCyxACZwmAZQDuJwmxiEEwAclAAbgBG9tZ4TDQcpqZQkeYWACp0snBxHG5WYKgacNYAlEoqHBjQ4VosRYRwdAblyhB+ZIGqNVpFEHCmBqpcqLJkWm72Dlow7nAtpYhKTCtMRSJKYAC+ALpAA
+    - title: Core
+      file: app-variation-dark-mode-navbar-core.py
+      shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziboANwBGUOgApVTJwYyXNLVFEJy7ASjyOzmKuUBaaJOQMADZ2wVyoImSa0rYA1powxLJ2HNK6ymCZsgW+-oFOZBxkUXD5YAAiaUxFcKwA7lWEbLwQTJY2dAWqvqqqsjSschY+8YkSxIkJZBIscCwsHKS+iOVMnuuj0Oh6TEqodhra4pN003S+YAC+ALpAA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A dark mode switch input toggles the app between dark and light modes.
+
+To add a dark mode switch to your app:
+
+  1. Add `ui.input_dark_mode()` to the UI of your app to create a dark mode switch. Where you call this function will determine where the dark mode switch will appear within the app's layout.
+
+  2. Optionally, specify the `id` parameter of `ui.input_dark_mode()` to define the identifier of the switch. When `id` is specified, you can use it to access the current color mode.
+
+  3. By default, the user’s system settings for the preferred color scheme will be used for the initial mode of the app. To force the initial mode, set the `mode` parameter to `"light"` or `"dark"`.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a dark mode switch:
+
+  1. Use `input.<dark_mode_switch_id>()` (e.g., `input.mode()`) to access the value of the dark mode switch. The server value of a dark mode switch is a string: either `"light"` or `"dark"`.
+
+## Variations
+
+:::{#variations}
+:::