diff --git a/.gitignore b/.gitignore
index c6fc6e08..9bc58fe9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,9 +7,12 @@
.DS_Store
/.luarc.json
-/__pycache__/
+__pycache__/
.Rproj.user
.Rhistory
/_inv/
/objects.json
+
+.venv/
+__pycache__/
diff --git a/Makefile b/Makefile
index ac8e37a4..e0fc2f91 100644
--- a/Makefile
+++ b/Makefile
@@ -76,7 +76,8 @@ quartodoc:
rsync -av --exclude="index.qmd" py-shiny/docs/api/ ./api
cp -R py-shiny/docs/_inv py-shiny/docs/objects.json ./
# Copy over index.qmd, but rename it to _api_index.qmd
- cp py-shiny/docs/api/index.qmd ./api/_api_index.qmd
+ cp py-shiny/docs/api/express/index.qmd ./api/express/_api_index.qmd
+ cp py-shiny/docs/api/core/index.qmd ./api/core/_api_index.qmd
## Build website
site:
diff --git a/_extensions/shafayetShafee/line-highlight/line-highlight.lua b/_extensions/shafayetShafee/line-highlight/line-highlight.lua
index 67a0cf44..935a91b9 100644
--- a/_extensions/shafayetShafee/line-highlight/line-highlight.lua
+++ b/_extensions/shafayetShafee/line-highlight/line-highlight.lua
@@ -1,4 +1,4 @@
-local PATTERN = "#<<$"
+local PATTERN = "# ?<<$"
local function ensureHtmlDeps()
quarto.doc.add_html_dependency({
diff --git a/_quarto.yml b/_quarto.yml
index 4bea0be7..3fc1a956 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -13,13 +13,14 @@ project:
- display-messages
- layouts
- docs
- - in-depth
- development
- gallery
- - api
+ - api/express
+ - api/core
resources:
- /pypi/**
- /robots.txt
+ - /_redirects
- objects.json
- "*.png"
- "*.gif"
@@ -29,7 +30,8 @@ project:
- scripts/post-render.py
metadata-files:
- - api/_sidebar.yml
+ - api/express/_sidebar.yml
+ - api/core/_sidebar.yml
filters:
- shinylive
@@ -64,35 +66,39 @@ website:
logo-alt: The logo for Shiny for Python
search: true
left:
- - text: "Learn"
+ - text: "Learn Shiny"
file: docs/overview.qmd
- - text: "Install"
- href: docs/install.qmd
+ - text: "Components"
+ menu:
+ - text: "Components"
+ file: components/index.qmd
+ icon: sliders
+ - text: "Layouts"
+ file: layouts/index.qmd
+ icon: layout-text-window-reverse
- text: "Deploy"
menu:
- docs/deploy-cloud.qmd
- docs/deploy-on-prem.qmd
- docs/shinylive.qmd
- - text: "Components"
- file: components/index.qmd
- - text: "Layouts"
- file: layouts/index.qmd
- text: "Gallery"
file: gallery/index.qmd
- - text: "Examples"
+ - text: "Playground"
href: https://shinylive.io/py/examples/
target: _blank
- text: "Reference"
- href: api/index.qmd
- - text: "Help"
- href: docs/help.qmd
+ menu:
+ - text: "Shiny Express"
+ href: api/express/index.qmd
+ - text: "Shiny Core"
+ href: api/core/index.qmd
tools:
- icon: discord
href: https://discord.gg/yMGCamUMnS
- text: Shiny Discord
+ aria-label: Shiny Discord
- icon: github
href: https://github.com/posit-dev/py-shiny/
- text: Shiny for Python Github
+ aria-label: Shiny for Python Github
page-footer:
left: 'Proudly supported by
-<% } %>
-
-## Code
-
-```{.python filename="app.py" }
-<%= item.code %>
-```
-<% if (item.shinylive) { %>
-
-<% } %>
-:::
-
-:::{.mt-5}
-:::
-
-## Relevant Functions
-
-
-
-:::{.border-bottom .blue .mt-6 .mb-4}
-:::
-
-<% } %>
diff --git a/components/_partials/components-list.ejs b/components/_partials/components-list.ejs
index fc7e8fa3..c478319e 100644
--- a/components/_partials/components-list.ejs
+++ b/components/_partials/components-list.ejs
@@ -22,7 +22,7 @@
-<% if (item.previewapp) { %>
+<% if (item.appPreview) { %>
-<% } %>
+<% } %>
<% } %>
diff --git a/components/_partials/components-variations.ejs b/components/_partials/components-variations.ejs
index b904bfc1..ffa83151 100644
--- a/components/_partials/components-variations.ejs
+++ b/components/_partials/components-variations.ejs
@@ -1,48 +1,15 @@
+::: {.variations}
+
<% for (const item of items) { %>
-<% if (item.variations) { %>
+### <%= item.title %>
-:::{.border-bottom .blue .mt-6 .mb-4}
+::: {.variation-description}
+<%= item.description %>
:::
-:::{.pt-1}
-
-## Variations
-
-<% for (const variation of item.variations) { %>
-
-#### <%= variation.title %> {.mb-0 .mt-5}
-
-<%= variation.description %>
+<%= include('shiny-example-panel.ejs', {apps: item.apps, appDir: templateParams.dir}) %>
-::: {.panel-tabset}
-
-## Preview
-
-
-<% if (variation.shinylive) { %>
-
<% } %>
-## Code
-
-```{.python filename="app.py" }
-<%= variation.code %>
-```
-<% if (variation.shinylive) { %>
-
-<% } %>
:::
-
-<% } %>
-
-:::
-
-<% } %>
-
-<% } %>
diff --git a/components/_partials/components.css b/components/_partials/components.css
index 247278bf..7a7d41cd 100644
--- a/components/_partials/components.css
+++ b/components/_partials/components.css
@@ -156,7 +156,6 @@ a.component-list-header-text:hover ~ div.component-list-icon p a i.component-lin
}
/* detail page styling */
-
.tab-content {
margin-top: 0px;
border: 0px;
@@ -165,27 +164,6 @@ a.component-list-header-text:hover ~ div.component-list-icon p a i.component-lin
margin-bottom: 1em;
}
-code.sourceCode,
-pre.console code {
- padding: 0.25rem 1rem 0.25rem 0.25rem;
-}
-
-.code-with-filename div.sourceCode,
-.reveal .code-with-filename div.sourceCode {
- margin-top: 0;
- border-top-left-radius: 0%;
- border-top-right-radius: 0%;
-}
-
-.tab-pane div.sourceCode {
- margin-top: 0px;
-}
-
-.tab-content div.sourceCode,
-.tab-content pre.console {
- margin-bottom: 0px;
-}
-
.component-hr:last-of-type {
display: none;
}
@@ -208,10 +186,10 @@ pre.console code {
/* Tab styling */
.panel-tabset .nav-tabs {
- display: flex !important;
- align-items: flex-end !important;
- justify-content: flex-end !important;
- border-bottom: 1px solid #E9ECEF;
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ border-bottom: 1px solid #ffffff;
border-top: none;
border-left: none;
border-right: none;
@@ -237,11 +215,10 @@ main a.nav-link:hover {
color: #202020;
background-color: #fff;
border-bottom: 3px solid #202020 !important;
- margin-bottom: -2px;
- border-left: 1px solid rgba(0, 0, 0, 0);
- border-right: 1px solid rgba(0, 0, 0, 0);
- border-top: 1px solid rgba(0, 0, 0, 0);
- border-radius: 0px;
+ margin-bottom: 0px;
+ border-left: 0px solid rgba(0, 0, 0, 0);
+ border-right: 0px solid rgba(0, 0, 0, 0);
+ border-top: 0px solid rgba(0, 0, 0, 0);
}
.panel-tabset .nav-tabs .nav-link:hover,
@@ -254,8 +231,8 @@ main a.nav-link:hover {
}
.panel-tabset .nav-tabs .nav-link {
- padding: 0.35rem 1.25rem;
- margin-bottom: 0px;
+ padding: 0.45rem 1.25rem;
+ margin-bottom: 2px;
}
.iframe-border {
diff --git a/components/_partials/componentsjs.html b/components/_partials/componentsjs.html
index 6643ad16..3881fa48 100644
--- a/components/_partials/componentsjs.html
+++ b/components/_partials/componentsjs.html
@@ -1,6 +1,6 @@
\ No newline at end of file
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
diff --git a/components/_partials/shiny-example-panel.ejs b/components/_partials/shiny-example-panel.ejs
new file mode 100644
index 00000000..c285f841
--- /dev/null
+++ b/components/_partials/shiny-example-panel.ejs
@@ -0,0 +1,30 @@
+<% const previews = apps.filter(app => app.title === "Preview") %>
+<% const codeApps = apps.filter(app => app.title !== "Preview") %>
+
+<% if (previews.length) { %>
+<% const previewApp = previews[0] %>
+
+:::{.app-preview}
+```{shinylive-python}
+#| standalone: true
+#| components: [<%= previewApp.components ? previewApp.components.join(', ') : 'viewer' %>]
+#| viewerHeight: <%= previewApp.height ? previewApp.height : '300' %>
+
+<%= Deno.readTextFileSync((appDir || '') + previewApp.file) %>
+```
+:::
+
+<% } %>
+
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
+
+<% for (const app of codeApps) { %>
+### <%= app.title %>
+
+```{.python .code-overflow-scroll <%=app.shinylive ? `shinylive="${app.shinylive}"` : '' %>}
+<%= Deno.readTextFileSync((appDir || '') + app.file) %>
+```
+
+<% } %>
+
+:::
diff --git a/components/_qmd.py b/components/_qmd.py
new file mode 100644
index 00000000..184af4f0
--- /dev/null
+++ b/components/_qmd.py
@@ -0,0 +1,72 @@
+import os
+
+import yaml as yml
+
+
+def find_qmds(dir, exclude):
+ qmd_list = [p for p in os.listdir(dir) if p.endswith(".qmd")]
+ qmd_list = [os.path.join(dir, p) for p in qmd_list if p not in exclude]
+ return qmd_list
+
+
+def slug_from_path(path):
+ return os.path.splitext(os.path.basename(path))[0]
+
+
+def get_qmd_split(path):
+ with open(path, "r") as f:
+ lines = f.readlines()
+
+ yaml = []
+ body = []
+
+ in_yaml = False
+ found_yaml = False
+
+ for i, line in enumerate(lines):
+ # if the line starts with ---, we're in the yaml
+ if line.startswith("---"):
+ if found_yaml:
+ body.append(line)
+ continue
+
+ if not in_yaml:
+ in_yaml = True
+ continue
+
+ found_yaml = True
+ in_yaml = False
+ continue
+
+ if in_yaml:
+ yaml.append(line)
+ else:
+ body.append(line)
+
+ meta = yml.safe_load("".join(yaml))
+ if os.path.basename(path) == "index.qmd":
+ meta["_slug"] = slug_from_path(os.path.dirname(path))
+ meta["_dir"] = os.path.dirname(path)
+ else:
+ meta["_slug"] = slug_from_path(path)
+ meta["_dir"] = os.path.join(os.path.dirname(path), meta["_slug"])
+
+ return (meta, "".join(body))
+
+
+def write_qmd(qmd, path):
+ meta, body = qmd
+
+ keys_rm = [key for key in meta.keys() if key.startswith("_")]
+
+ for key in keys_rm:
+ del meta[key]
+
+ with open(path, "w") as f:
+ f.write("---\n")
+ f.write(yml.dump(meta, sort_keys=False, indent=2, default_flow_style=False))
+ f.write("---\n\n")
+ f.write(body.strip())
+ f.write("\n")
+
+ return path
diff --git a/components/display-messages/modal.qmd b/components/display-messages/modal.qmd
deleted file mode 100644
index f779527f..00000000
--- a/components/display-messages/modal.qmd
+++ /dev/null
@@ -1,130 +0,0 @@
----
-title: "Modal"
-sidebar: components
-previewapp: |
- from shiny import App, Inputs, Outputs, Session, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show modal dialog"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input: Inputs, output: Outputs, session: Session):
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- m = ui.modal(
- "This is a somewhat important message.",
- easy_close=True,
- footer=None,
- )
- ui.modal_show(m)
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Modal Message
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZophhiOyhrJjsOTOIzWIBKPA1CjQ07OBpWODpFOgdPbwliby8yCRY4FhYOUkLEZ1cAASk-BTgMAFEaGjhZIZdR6VkJjDhFckaIdoxIqLKIV2yqph0HAcXj1MM3DDSM6ycj69fYgBVOFl5vqFZGOBRNhQYR8ARCKDkVLdFjmSaxEovV7HORkaxwAyJAFAkG8fiCMiQ4TwHpwhFXZFMaQsbA6QjWYhdAzvOjKJQU5E0YjECh0AwmB6ZIIhMKxAAiHBYMElLCKiMph0pAvSQv2Dhghy06FuYlQDm0eg4nVq9UKYAAvgBdIA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show modal dialog"),
- )
-
- def server(input, output, session):
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- m = ui.modal( #<<
- "This is a somewhat important message.", #<<
- title="Somewhat important message", #<<
- easy_close=True #<<
- ) #<<
- ui.modal_show(m) #<<
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: "ui.modal"
- href: https://shiny.posit.co/py/api/ui.modal.html
- signature: ui.modal(*args, title=None, footer=MISSING, size='m', easy_close=False, fade=True, **kwargs)
- - title: "ui.modal_show"
- href: https://shiny.posit.co/py/api/ui.modal_show.html
- signature: ui.modal_show(modal, session=None)
- - title: "ui.modal_remove"
- href: https://shiny.posit.co/py/api/ui.modal_remove.html
- signature: ui.modal_remove(session=None)
- - title: "ui.modal_button"
- href: https://shiny.posit.co/py/api/ui.modal_button.html
- signature: ui.modal_button(label, icon=None, **kwargs)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Modal for authentication
- description: Place inputs inside a modal to collect, and then login with, credentials.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwa2IzLjV8JliAGSiYsABKPA1UjQ07OBpWODpFOgdPbwliby8yCRY4FhYOUlTEZ1cAASk-BTgMAFEaGjhZNpdO6VkejDhFclKIaoxI6IgsiFcmXPydBxbRjaZmIxMYYjsoayd1g5uTMp8KAA8ycOh4WIlYgFU6uje4VppDLXG4bO4Lbw6VBQBoAd0Ejli0LhCI+8TAAAUYSx4XQ7ID0vtQW4PBCfN0AsEyKEIOESBAIMMyGjYgBhUiMkZAomg6QsbA6QiROoGAAqdGUSh5NxoxGIFDoBgAcqQ4NKmGtiSczhcdOxiLCHDBNaD9uNuop+oMmWaupNLTNKC97hh6ZyyCaXFsmDodnsQQdtedrDopKdFLt1QBiJjs3JMUJMN1MpiwjhkNi8MkYf67JhQCB2LOLZE4hGRzTQdCGUToBzaPQcWqFYqpMAAXwAukA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("login", "Login"),
- )
-
- def server(input, output, session):
- @reactive.Effect
- @reactive.event(input.login)
- def _():
- m = ui.modal(
- ui.input_text("name", "Username:"), #<<
- ui.input_password("password", "Password:"), #<<
- ui.input_action_button("connect", "Connect"), #<<
- easy_close=True, #<<
- footer=None #<<
- )
- ui.modal_show(m)
-
- @reactive.Effect #<<
- @reactive.event(input.connect) #<<
- def __(): #<<
- ui.modal_remove() #<<
- # Code to connect with input.name() and input.password() #<<
-
- app = App(app_ui, server)
----
-
-:::{#component}
-:::
-
-## Details
-
-A modal is a dialog box that appears in front of the app. You can use modals to display messages, curate the user experience, or collect user input, like passwords and usernames.
-
-To create a modal, first assemble the components of the modal with [`ui.modal()`](https://shiny.posit.co/py/api/ui.modal.html) and save them to an object. Then call [`ui.modal_show()`](https://shiny.posit.co/py/api/ui.modal_show.html) on the object to display the modal.
-
-Typically, you will want to create a reactive effect to call `ui.modal_show()` whenever a particular event occurs. For example, the reactive effect below will open a modal whenever the value of `input.show()` changes.
-
-```python
-@reactive.Effect
-@reactive.event(input.show)
-def _():
- m = ui.modal( #<<
- "This is a somewhat important message.",
- title="Somewhat important message",
- easy_close=True
- )
- ui.modal_show(m)
-```
-
-## Modal contents
-
-To add elements to a modal, pass them as unnamed arguments to `ui.modal()`. Modals can contain any UI elements recognized by Shiny.
-
-Modals come in four sizes: small (`'s'`), medium (`'m'`) (the default), large (`'l'`), and extra-large (`'xl'`). Set the size of a modal with the `size` argument of `ui.modal()`.
-
-See Also:[Notifications](notifications.qmd) provide a similar, but alternative way to display information to the user.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/display-messages/modal/app-core.py b/components/display-messages/modal/app-core.py
new file mode 100644
index 00000000..fc554bbe
--- /dev/null
+++ b/components/display-messages/modal/app-core.py
@@ -0,0 +1,20 @@
+from shiny import App, reactive, ui
+
+app_ui = ui.page_fixed(
+ ui.input_action_button("show", "Show modal dialog"),
+)
+
+
+def server(input, output, session):
+ @reactive.effect
+ @reactive.event(input.show)
+ def _():
+ m = ui.modal( # <<
+ "This is a somewhat important message.", # <<
+ title="Somewhat important message", # <<
+ easy_close=True, # <<
+ ) # <<
+ ui.modal_show(m) # <<
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/modal/app-detail-preview.py b/components/display-messages/modal/app-detail-preview.py
new file mode 100644
index 00000000..f3fc6157
--- /dev/null
+++ b/components/display-messages/modal/app-detail-preview.py
@@ -0,0 +1,22 @@
+## file: app.py
+from shiny import App, reactive, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("show", "Show modal dialog"),
+)
+
+
+def server(input, output, session):
+ @reactive.effect
+ @reactive.event(input.show)
+ def _():
+ m = ui.modal(
+ "This is a somewhat important message.",
+ title="Somewhat important message",
+ easy_close=True,
+ footer=ui.modal_button("Dismiss"),
+ )
+ ui.modal_show(m)
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/modal/app-express.py b/components/display-messages/modal/app-express.py
new file mode 100644
index 00000000..4dc26571
--- /dev/null
+++ b/components/display-messages/modal/app-express.py
@@ -0,0 +1,15 @@
+from shiny import reactive
+from shiny.express import ui, input
+
+ui.input_action_button("show", "Show modal dialog")
+
+
+@reactive.effect
+@reactive.event(input.show)
+def show_important_message():
+ m = ui.modal( # <<
+ "This is a somewhat important message.", # <<
+ easy_close=True, # <<
+ footer=None, # <<
+ ) # <<
+ ui.modal_show(m)
diff --git a/components/display-messages/modal/app-preview.py b/components/display-messages/modal/app-preview.py
new file mode 100644
index 00000000..36976d2a
--- /dev/null
+++ b/components/display-messages/modal/app-preview.py
@@ -0,0 +1,21 @@
+from shiny import App, Inputs, Outputs, Session, reactive, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("show", "Show modal dialog"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+ @reactive.effect
+ @reactive.event(input.show)
+ def _():
+ m = ui.modal(
+ "This is a somewhat important message.",
+ easy_close=True,
+ footer=None,
+ )
+ ui.modal_show(m)
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/modal/app-variation-modal-core.py b/components/display-messages/modal/app-variation-modal-core.py
new file mode 100644
index 00000000..68cc4121
--- /dev/null
+++ b/components/display-messages/modal/app-variation-modal-core.py
@@ -0,0 +1,27 @@
+from shiny import App, reactive, ui
+
+app_ui = ui.page_fixed(ui.input_action_button("login", "Login to database"))
+
+
+def server(input, output, session):
+ @reactive.effect
+ @reactive.event(input.login)
+ def _():
+ m = ui.modal( # <<
+ ui.input_text("name", "Username:"),
+ ui.input_password("password", "Password:"),
+ ui.input_action_button("connect", "Connect"),
+ title="Database Credentials", # <<
+ easy_close=True, # <<
+ footer=None, # <<
+ ) # <<
+ ui.modal_show(m)
+
+ @reactive.effect # <<
+ @reactive.event(input.connect) # <<
+ def __(): # <<
+ ui.modal_remove() # <<
+ # Code to connect with input.name() and input.password() #<<
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/modal/app-variation-modal-express.py b/components/display-messages/modal/app-variation-modal-express.py
new file mode 100644
index 00000000..1b8d505c
--- /dev/null
+++ b/components/display-messages/modal/app-variation-modal-express.py
@@ -0,0 +1,25 @@
+from shiny import reactive
+from shiny.express import input, ui
+
+ui.input_action_button("login", "Login to database")
+
+
+@reactive.effect
+@reactive.event(input.login)
+def show_login_modal():
+ m = ui.modal( # <<
+ ui.input_text("name", "Username:"),
+ ui.input_password("password", "Password:"),
+ ui.input_action_button("connect", "Connect"),
+ title="Database Credentials", # <<
+ easy_close=True, # <<
+ footer=None, # <<
+ ) # <<
+ ui.modal_show(m)
+
+
+@reactive.effect # <<
+@reactive.event(input.connect) # <<
+def connect_to_databaset(): # <<
+ ui.modal_remove() # <<
+ # Code to connect with input.name() and input.password() #<<
diff --git a/components/display-messages/modal/index.qmd b/components/display-messages/modal/index.qmd
new file mode 100644
index 00000000..0e5ff794
--- /dev/null
+++ b/components/display-messages/modal/index.qmd
@@ -0,0 +1,94 @@
+---
+title: Modal
+sidebar: components
+appPreview:
+ file: components/display-messages/modal/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/display-messages/modal/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 400
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkQFdORbuiMUFCk1nOWA+hKnkHAI0sVyACjlgOpADufkR+AMrsQcgwpAAmUAA2yLGciaQA5n4AlNYQCgACYs4ycOp0dHCSBUWSJeqylN72FFgBgTkQsXB0KkEO-ILCUJQO8LpQ6XDeWYgKyPPRyAC8yLYx8Qne8wDEyAA8e3MLx34AKlx6nHpQbMxwgexQIgOGwyJjrBOlITv7hxDHY7iVi4BzEBKkVhwJanBhGOBEZC7A5HQHIOikUhUBhLABy5ARvxRAIWWSJ-2OaziiQcbW8MA6hFQFFw6AQKDAVA0FDAAF8ALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnCIBXTgB0IGjOgD6q5AF5kqnFADmcHXU4APOABMAFBuSvjnLN3TKKOmXPIdACMfCnJnMA5SAHc1QmQ4gGV2GOQYUnsoABtke05s0jM4gEoCDWKNSoh7ODo2OAZFBkcvHyJSH28KIlY4VlZOcmLEFzcAASl-BTgsWro4WVHXCelZadnFShaILqwo6IqIN1za5B1HYaXjtMN3LHTMrMdXAGJkAB53q+u3OIAVLisPhAqBsZhwaLsKAifiCYRQShpPqscwzOJEZBvT7fH7IOQULJwAxJcGQ6F8ARCCgIkTwfqo9GvD5fI6447SVi4HTELKkXoGP4MZRKJnY1k-YqillskwPbI6faOGCSzHMqpaTC3cToRzaPScHoNJqHeJgCi4dAIFBmuA2ChgAC+AF0gA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.modal
+ href: https://shiny.posit.co/py/api/ui.modal.html
+ signature: ui.modal(*args, title=None, footer=MISSING, size='m', easy_close=False,
+ fade=True, **kwargs)
+ - title: ui.modal_show
+ href: https://shiny.posit.co/py/api/ui.modal_show.html
+ signature: ui.modal_show(modal, session=None)
+ - title: ui.modal_remove
+ href: https://shiny.posit.co/py/api/ui.modal_remove.html
+ signature: ui.modal_remove(session=None)
+ - title: ui.modal_button
+ href: https://shiny.posit.co/py/api/ui.modal_button.html
+ signature: ui.modal_button(label, icon=None, **kwargs)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/display-messages/modal/
+ contents:
+ - title: Modal for authentication
+ description: Place inputs inside a modal to collect, and then login with, database
+ credentials.
+ apps:
+ - title: Preview
+ file: app-variation-modal-core.py
+ height: 500
+ - title: Express
+ file: app-variation-modal-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkd3QBXCkROcFCy1mNmA+hKnkHAIzMVyACjlgANqQA5tx+RH4AMsHcyF7IACZQFFBuUKzyYACU1hAKAAJizjJw6nR0cJL5hZLF6rKU3vYUWIEhENkQ8XB0KqQA7g6t3A4wpIn+3pmICsizyCwAvMi2o+PeswDEyAA82zNzB7ZNDlQaFL6QsBnhYACq6QzQ8NNZBPsHs0cQphQO6GmsPpCeIXf66IEMeJhZB+AAKAIh8RemTeEA+cy+PycNVcHgoXggFzIEAgFQo0L8AGFyKTKq93h8pBR-HAFn4ACJJFJpODISliLqUThQfysaHILa7BkHcSsXAOYiBdILAAqDBMcCIEp2ezR6OQdFIpCoDAWADlyJrNjqGZlrVK9Z9OFhViKHBx+t4YB0cgVxDVZKVypJ7bq-UVA3B6ucmlhibSKHbtQ6uj142STqQHIlkql0ucpqGGSsxm6xKNZJMi47tdSurFSMh0yG+pwKOw+N8zFgnnAq1BOp2fjgEcCqxsHYRUBRcOgECgwKcKGAAL4AXSAA
+ - title: Core
+ file: app-variation-modal-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnCIBXTgB0IGjOgD6q5AF5kqnFADmcHXU4APOABMAFCe7plFHTLnkdAI3cU5I5qYAA2pGbcIUQhADIR3MiByPZQFFC+UKxwIQCUuRqFEPZwdGxwDIoMjq7uRKTubhRE2aysnOS5iBrIvcgAAlJeCnBYpXRwsj19g9KyI2OKlDUQTVjhkRAFEH0ppcg6jl3Tu70sRiYwpKmhjr0AxMgAPE8np7suq+46VDYUwZBYDlCMgQgBVbIMaDwbpgXIEN7vXqfJo6dBZVgAdyEThC6La2IY9mioLAAAUMYT7LD4YikSjvsMfP4KIEIACyBAIJMKCSQgBhcjcqZwhE7JG7OQUUJwAwhAAiaQyWTgyH5UhKlE4UFCrBJyEeLzp72krFwOmI4WyBgAKgxlEoHs9XuKJb06KRSFQGAYAHLkR0G53G5C5J1G12nS7XHU6DikTGOGDbN6zYaKMZ0CaycMu3Zp+YZuBLf61ChYTnCihhoMR3YlMo6Q5dXMh6M3HRSK6KI6tyO7R6CkpJUjISs85CYzgUdh8L7l6FwXtQYpztb4rE43v3CNFbSGMSYRzaPScFoVKrbEFgCi4dAIFA3uB-MAAXwAukA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A modal is a dialog box that appears in front of the app. You can use modals to display messages, curate the user experience, or collect user input, like passwords and usernames.
+
+To create a modal, first assemble the components of the modal with [`ui.modal()`](https://shiny.posit.co/py/api/ui.modal.html) and save them to an object. Then call [`ui.modal_show()`](https://shiny.posit.co/py/api/ui.modal_show.html) on the object to display the modal.
+
+Typically, you will want to create a reactive effect to call `ui.modal_show()` whenever a particular event occurs. For example, the reactive effect below will open a modal whenever the value of `input.show()` changes.
+
+```python
+@reactive.Effect
+@reactive.event(input.show)
+def _():
+ m = ui.modal( #<<
+ "This is a somewhat important message.",
+ title="Somewhat important message",
+ easy_close=True
+ )
+ ui.modal_show(m)
+```
+
+## Modal contents
+
+To add elements to a modal, pass them as unnamed arguments to `ui.modal()`. Modals can contain any UI elements recognized by Shiny.
+
+Modals come in four sizes: small (`'s'`), medium (`'m'`) (the default), large (`'l'`), and extra-large (`'xl'`). Set the size of a modal with the `size` argument of `ui.modal()`.
+
+See Also: [Notifications](../notifications/index.qmd) provide a similar, but alternative way to display information to the user.
+
+## Variations
+
+:::{#variations}
+:::
diff --git a/components/display-messages/notifications.qmd b/components/display-messages/notifications.qmd
deleted file mode 100644
index 2c3a0e49..00000000
--- a/components/display-messages/notifications.qmd
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: "Notifications / Help Text"
-sidebar: components
-previewapp: |
- from shiny import App, reactive, ui
- from pathlib import Path
- appdir = Path(__file__).parent
- app_ui = ui.page_fillable(
- ui.include_css(appdir / "styles.css"),
- ui.input_action_button("show", "Show Notification"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
- )
-
- def server(input, output, session):
- ids: list[str] = []
- n: int = 0
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- nonlocal ids
- nonlocal n
- # Save the ID for removal later
- id = ui.notification_show("Message " + str(n), duration=None)
- ids.append(id)
- n += 1
-
- @reactive.Effect
- @reactive.event(input.remove)
- def _():
- nonlocal ids
- if ids:
- ui.notification_remove(ids.pop())
-
- app = App(app_ui, server)
-
- ## file: styles.css
- #shiny-notification-panel { max-width: 100%; }
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Notifications
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgA5YjkaDkIof00wAEo8DQKNDTs4GlY4OkU6B09vCWJvLzIJFjgWFg5SAsQyiFcmAAEpPwU4DABRGho4WWdXMelZSYw4RXIGiDaMSKjSodcKqp0HfqXhlwgDACYr65MIDI4snLydA6dj6+uaWIAFU4LCYUQ41msTDsHBY2mkdCYUBoFERIAgAF9qiQIHYWBhYhJHn8XHZlHRcr1bppftcjlp0IZROgHNo9BwOjU6gUwBiALpAA
- height: 200px
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show Notification"),
- )
-
- def server(input, output, session):
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- n=2
- ui.notification_show( #<<
- f"This will disappear after {n} seconds.", #<<
- duration=n #<<
- )
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.notification_show
- href: https://shiny.posit.co/py/api/ui.notification_show.html
- signature: ui.notification_show(ui, *, action=None, duration=5, close_button=True, id=None, type='default', session=None)
- - title: ui.notification_remove
- href: https://shiny.posit.co/py/api/ui.notification_remove.html
- signature: ui.notification_remove(id, *, session=None)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Warning notification
- description: Set `type="warning"` to create a warning-colored notification.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgB1KDoILjNYgEo8DVyNDTs4GlY4OkU6B09vCWJvLzIJFjgWFg5SXMRiiFcmAAEpPwU4DABRGho4WWdXYelZMYw4RXJaiGaMSKii-tdS8p0HHvmBlwgDACZzi5MIYjkaDkIofwgdXYcmAGIAHn+dwurhosQAKpwWEwohxrNYmHYOCxtNI6EwoDQKOiQBAAL4VEgQOwsDCxCQAoEHEEDOzKOjvLpXCAFak0lxkbCoOAGWJRDJZCA5MCU4GufZadCGUToBzaPQcVqVaq5MB4gC6QA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show Warning"),
- )
-
- def server(input, output, session):
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- n=2
- ui.notification_show(
- f"This will disappear after {n} seconds.",
- duration=n,
- type="warning" #<<
- )
-
- app = App(app_ui, server)
-
- - title: Error notification
- description: Set `type="error"` to create an error-colored notification.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgBROgY6WIBKPA1sjQ07OBpWODpFOgdPbwliby8yCRY4FhYOUmzEQohXJgABKT8FOAxUmho4WWdXQelZEYw4RXJqiEaMSKiC3tdi0p0HLpm+lwgDACYT05MIYjkaDkIofwgdLadd09OaWIAVTgsJhRDjWaxMOwcFjaaR0JhQGgUOEgCAAXzKJAgdhYGFieS+3z2yjoLw65wg+MJpzI2FQcAMsXKmViTAAxAAednXPo7LToQyidAObR6DjNcqVbJgVEAXSAA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show Error"),
- )
-
- def server(input, output, session):
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- n=2
- ui.notification_show(
- f"This will disappear after {n} seconds.",
- duration=n,
- type="error" #<<
- )
-
- app = App(app_ui, server)
-
- - title: Replace/update a notification
- description: Assign a notification an `id` to replace any existing notification with the same `id`.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgA5YjkaDkIof00wAEo8DQKNDTs4GlY4OkU6B09vCWJvLzIJFjgWFg5SAsQyiFcmAAEpPwU4DABRGho4WWdXMelZSYw4RXIGiDaMSKjSodcKqp0HfqXhlxMIDI4snLydA6dj6+uaWIBNFqZCazZADWcDsTDIbDgTCSKWCZFCQxAjTI+2SUQuAF9wXwuhhYhIrh8Tso6LlehADOkIEpCUTeHYDLF4N1zHBYrTXEctOhDKJ0A5tHoOB0anUCmAMQBdIA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show Notification"),
- )
-
- def server(input, output, session):
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- ui.notification_show(
- f"You clicked the Show button {input.show()} times.",
- duration=None,
- # compare to what happens if you comment out the line below #<<
- id="message" #<<
- )
-
- app = App(app_ui, server)
-
- - title: Track and remove notifications
- description: Track notifications, and use `ui.notification_remove()` to remove notifications one at a time.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgA5YjkaDkIof00wAEo8Z1cTT29fWQ4A4LJQiHCpGGJFWIlYgCU4ZsU0jI4snLzYoo0CjQ07OBpWODpFOgdysgliby8V2ZYWaogCxBKXDjsWRCZrDhYyYCu6AF1DJmA7w6YIM65hIwAGCYhXJgAASkfgUcAwAFEaDQ4LJXsDpFVFBg4IpyEsIBsMJEouN-q4pjMdA59q8ARBSNZiDlrLwTmTXBSIFSaW8GS4AMRMBJQXpkNhwJgASQAIkwaIJJN0WlBadZcnN2XTHiYKZlsrldjoceEALJwbbmQWxJgAalYZEWewkdmUdE1pAM6QgcDxAIBxxYGG0lEcxzd7pc-1NRgAjH8AQjQcioTC4fiXFGkeDUZQyBisU0Wq7XoSmMTSQn3UyWbK6SwlQNywci4GXKr+oMHRAdFnFEsTlhiKgSXitOhHmIe9o9BwJCw5gsCmAAL53IA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show Notification"),
- ui.input_action_button("remove", "Remove Notification"),
- )
-
- def server(input, output, session):
- ids: list[str] = []
- n: int = 0
-
- @reactive.Effect
- @reactive.event(input.show)
- def _():
- nonlocal ids
- nonlocal n
- # Save the ID for removal later
- id = ui.notification_show("Message " + str(n), duration=None)
- ids.append(id)
- n += 1
-
- @reactive.Effect
- @reactive.event(input.remove)
- def _():
- nonlocal ids
- if ids:
- ui.notification_remove(ids.pop()) #<<
-
- app = App(app_ui, server)
-
- - title: Help Text
- description: "[`ui.help_text()`](https://shiny.posit.co/py/api/ui.help_text.html) creates stylized help text which can be added to the user interface to provide additional explanation or context. [Tooltips](tooltips.qmd) provides a similar, but alternative way to display information to the user."
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDUxfGOGLqmVkdMuaR0AI28yUicwdmIAdzV8JliAZTZopgA5YjkaDkIof00wAEo8Z1cTT29fWQ4A4LJQiHCpGGJFWIlYgCU4ZsU0jI4snLzYoo0CjQ07OBpWODpFOgdysgliby8V2ZYWaogCxBKXDjsWRCZrDhYyYCu6AF1DJmA7w6YIM65hIwAGCYhXJgAASkfgUcAwAFEaDQ4LJXsDpFVFBg4IpyEsIBsMJEouN-q4pjMdA59q8ARBSNZiDlrLwTmTXBSIFSaW8GS4AMRMBJQXpkNhwJgASQAIkwaIJJN0WlBadZcnN2XTHiYKZlsrldjoceEALJwbbmQWxJgAalYZEWewkdmUdE1pAM6QgcDxAIBxxYGG0lEcxzd7pc-1NRgAjH8AQjQcioTC4fiXFGkeDUZQyBisU0Wq7XoSmMTSQn3UyWbK6SwlQNywci4GXKr+oMHRAdFnFEsTlhiKgSXitOhHmIe9o9BwJCw5gsCmAAL53IA
- height: 200px
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("show", "Show help text"),
- )
-
- def server(input, output, session):
- # ui.help_text() is only a ui component
- pass
-
- app = App(app_ui, server)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A notification is a message that appears near the bottom corner of the app. Notifications normally disappear after a short period of time, and should multiple notifications appear together, they will stack on top of one another.
-
-To create a notification, call [`ui.notification_show()`](https://shiny.posit.co/py/api/ui.notification_show.html). Typically, you will want to create a reactive effect to call `ui.show_notification()` whenever a particular event occurs. For example, the reactive effect below will create a notification whenever the value of `input.show()` changes.
-
-```{.python}
-@reactive.Effect
-@reactive.event(input.show)
-def _():
- ui.notification_show("You've been notified.")
-```
-
-You can call [`ui.notification_remove()`](https://shiny.posit.co/py/api/ui.notification_remove.html) to remove a notification programatically, but usually app developers will let notifications expire on their own. Also, notifications come by default with a button that the user can click to close the notification prematurely.
-
-## Duration
-
-By default, Shiny notifications will disappear after five seconds. To change how long a notification appears for, set the `duration` argument of `ui.notification_show()` to an integer number of seconds. Set `duration` to `None` to have the notification appear until the user closes it.
-
-## Type
-
-Shiny notifications come in three types: messages, warnings and errors. To set the type of a notification, use the `type` argument of `ui.notification_show()`.
-
-See Also: Modal messages](modal.qmd) provide a similar, but alternative way to display information to the user.
-
-:::{#variations}
-:::
diff --git a/components/display-messages/notifications/app-core.py b/components/display-messages/notifications/app-core.py
new file mode 100644
index 00000000..38523ea5
--- /dev/null
+++ b/components/display-messages/notifications/app-core.py
@@ -0,0 +1,24 @@
+from shiny import App, reactive, ui
+
+types = ["default", "message", "warning", "error"]
+
+app_ui = ui.page_fluid(
+ ui.input_radio_buttons("type", "Notification Type", types, inline=True),
+ ui.input_action_button("show", "Show Notification"),
+)
+
+
+def server(input, output, session):
+ @reactive.effect
+ @reactive.event(input.show)
+ def _():
+ type_txt = "notification" if input.type() == "default" else input.type()
+
+ ui.notification_show(
+ f"This {type_txt} will disappear after 2 seconds.",
+ type=input.type(),
+ duration=2,
+ )
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/notifications/app-express.py b/components/display-messages/notifications/app-express.py
new file mode 100644
index 00000000..6e986dfc
--- /dev/null
+++ b/components/display-messages/notifications/app-express.py
@@ -0,0 +1,18 @@
+from shiny import reactive
+from shiny.express import input, ui
+
+types = ["default", "message", "warning", "error"]
+
+ui.input_radio_buttons("type", "Notification Type", types, inline=True)
+ui.input_action_button("show", "Show Notification")
+
+
+@reactive.effect
+@reactive.event(input.show)
+def show_notification():
+ type_txt = "notification" if input.type() == "default" else input.type()
+ ui.notification_show(
+ f"This {type_txt} will disappear after 2 seconds.",
+ type=input.type(),
+ duration=2,
+ )
diff --git a/components/display-messages/notifications/app-preview.py b/components/display-messages/notifications/app-preview.py
new file mode 100644
index 00000000..94eef7e9
--- /dev/null
+++ b/components/display-messages/notifications/app-preview.py
@@ -0,0 +1,37 @@
+from shiny import App, reactive, ui
+from pathlib import Path
+
+appdir = Path(__file__).parent
+app_ui = ui.page_fillable(
+ ui.include_css(appdir / "styles.css"),
+ ui.input_action_button("show", "Show Notification"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ ids: list[str] = []
+ n: int = 0
+
+ @reactive.Effect
+ @reactive.event(input.show)
+ def _():
+ nonlocal ids
+ nonlocal n
+ # Save the ID for removal later
+ id = ui.notification_show("Message " + str(n), duration=None)
+ ids.append(id)
+ n += 1
+
+ @reactive.Effect
+ @reactive.event(input.remove)
+ def _():
+ nonlocal ids
+ if ids:
+ ui.notification_remove(ids.pop())
+
+
+app = App(app_ui, server)
+
+## file: styles.css
+# shiny-notification-panel { max-width: 100%; }
diff --git a/components/display-messages/notifications/app-variation-replace-update-a-notification-core.py b/components/display-messages/notifications/app-variation-replace-update-a-notification-core.py
new file mode 100644
index 00000000..2093f19f
--- /dev/null
+++ b/components/display-messages/notifications/app-variation-replace-update-a-notification-core.py
@@ -0,0 +1,20 @@
+from shiny import App, reactive, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("show", "Show Notification"),
+)
+
+
+def server(input, output, session):
+ @reactive.Effect
+ @reactive.event(input.show)
+ def show_or_update_notification():
+ ui.notification_show(
+ f"You clicked the Show button {input.show()} times.",
+ duration=None,
+ # compare to what happens if you comment out the line below
+ id="message",
+ )
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/notifications/app-variation-replace-update-a-notification-express.py b/components/display-messages/notifications/app-variation-replace-update-a-notification-express.py
new file mode 100644
index 00000000..06c50c92
--- /dev/null
+++ b/components/display-messages/notifications/app-variation-replace-update-a-notification-express.py
@@ -0,0 +1,15 @@
+from shiny import reactive
+from shiny.express import input, ui
+
+ui.input_action_button("show", "Show Notification")
+
+
+@reactive.effect
+@reactive.event(input.show)
+def show_or_update_notification():
+ ui.notification_show(
+ f"You clicked the Show button {input.show()} times.",
+ duration=None,
+ # compare to what happens if you comment out the line below
+ id="message",
+ )
diff --git a/components/display-messages/notifications/app-variation-track-and-remove-notifications-core.py b/components/display-messages/notifications/app-variation-track-and-remove-notifications-core.py
new file mode 100644
index 00000000..0e5d1b10
--- /dev/null
+++ b/components/display-messages/notifications/app-variation-track-and-remove-notifications-core.py
@@ -0,0 +1,33 @@
+from shiny import App, reactive, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("show", "Show Notification"),
+ ui.input_action_button("remove", "Remove Notification"),
+)
+
+
+def server(input, output, session):
+ ids: list[str] = []
+ n: int = 0
+
+ @reactive.Effect
+ @reactive.event(input.show)
+ def _():
+ nonlocal ids
+ nonlocal n
+ # Save the ID for removal later
+ id = ui.notification_show(
+ f"Notification {n}", duration=None, close_button=False
+ )
+ ids.append(id)
+ n += 1
+
+ @reactive.Effect
+ @reactive.event(input.remove)
+ def _():
+ nonlocal ids
+ if ids:
+ ui.notification_remove(ids.pop())
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/notifications/app-variation-track-and-remove-notifications-express.py b/components/display-messages/notifications/app-variation-track-and-remove-notifications-express.py
new file mode 100644
index 00000000..e1545fe3
--- /dev/null
+++ b/components/display-messages/notifications/app-variation-track-and-remove-notifications-express.py
@@ -0,0 +1,27 @@
+from shiny import reactive
+from shiny.express import input, ui
+
+ui.input_action_button("show", "Show Notification")
+ui.input_action_button("remove", "Remove Notification")
+
+ids: list[str] = []
+n: int = 0
+
+
+@reactive.Effect
+@reactive.event(input.show)
+def _():
+ global ids
+ global n
+ # Save the ID for removal later
+ id = ui.notification_show("Message " + str(n), duration=None)
+ ids.append(id)
+ n += 1
+
+
+@reactive.Effect
+@reactive.event(input.remove)
+def _():
+ global ids
+ if ids:
+ ui.notification_remove(ids.pop())
diff --git a/components/display-messages/notifications/index.qmd b/components/display-messages/notifications/index.qmd
new file mode 100644
index 00000000..c106232b
--- /dev/null
+++ b/components/display-messages/notifications/index.qmd
@@ -0,0 +1,100 @@
+---
+title: Notifications
+sidebar: components
+appPreview:
+ file: components/display-messages/notifications/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/display-messages/notifications/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkd3QBXCkROcFCirnRw9AXmTA5YACZw6UEwBsKbkRu8LpQAObyhMhuAO5QDBDcYYHRYHAMTAxuALrWEJZYxmYA+gxQ7pykxQBGZhTkrAAUbrb2KW4AcqRSdJzEUFLkyAAqdpFErQ5E3L7ccI7DDCZwAJQKBUUUxRKDEDV15M1gHKQx7WAAyuynyF09fQOVEG5rz28AAmI7MnDqdHRwSQKT7iSQ-dSySiNTZYE4xV6eOgqU7FCDdTi9fq7RorRAKZAE5CTYoUDQiZxuNH3LFPNx8JEwyY45COCkeLw+fx0uC+VhwPgQUwULBM16E5AFKkYh67Ypw5oQcXiuhuYZcPQgYmkigAX2QMU4vl8yAqrAw9niyCgdCoDGQACY2IDyO5WFhAvilQTJo5GWMcQRPV73CYyrtHPbA4rCa8omBJrR45oKGAddkgA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnCIBXTgB0IGirnRxWyALzJgasABM4dKMoA2FU0VPxWrKAHM4D5KYDuUBhDcbl6mcAxMDKYAuhoaGOgA+qqGyKo47nAJdDaqZgAUGshFqZxY3OjKFAkMUGacpAkARpUU5KwFYNq6IWAAcqRydJzEUHLkyAAqOp6EyF16RNw23HAGEwzKcACUBIXFaeWVCTJjEE0t5B0cpD49AMrsN8j9g8Oj9ZpgOxpbsZoQFjobDCigYeUOFCIpEqFUhwJcHy2iD2RQAAlITgo4FhLHQ4LIUch0dJZFicYpKOCILCsNcfL8IMVkIDkAk8kjCUz5gkKAAPERGUwQAacIYjU6mPhAiFYebswyC8yWax2SVwGysOB8amVWXTdl-JlMtLC17ij4JOkFRlG210UwTLj6EDcvkUAC+yB8nBsNmZnFcmGkDGQUDoVBDACZgWQAawsA5Oba5tMDDK5d8bcnimZlDVTgZI7ss0aGX94ilxOg8vEkpwiJqGKCGbNOtNaJ04PywO6okA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ template-params:
+ dir: components/display-messages/notifications/
+ contents:
+ - title: ui.notification_show
+ href: https://shiny.posit.co/py/api/ui.notification_show.html
+ signature: ui.notification_show(ui, *, action=None, duration=5, close_button=True,
+ id=None, type='default', session=None)
+ - title: ui.notification_remove
+ href: https://shiny.posit.co/py/api/ui.notification_remove.html
+ signature: ui.notification_remove(id, *, session=None)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/display-messages/notifications/
+ contents:
+ - title: Replace/update a notification
+ description: 'Assign a notification an `id` to replace any existing notification
+ with the same `id`. In the example below, a persistant notification is created
+ with `duration=None` and updated each time you click the notification button.
+
+ '
+ apps:
+ - title: Preview
+ file: app-variation-replace-update-a-notification-core.py
+ - title: Express
+ file: app-variation-replace-update-a-notification-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkd3QBXCkROcFCy1mNmA+hKnkHAIzMVyACjlgOpADufkR+AMrsQcgAcqRSdJzEUC4QfgCU1qkQAAJizjJw6nR0cJIKueKSBeqylN72FFgBgRkQACZwdCpBDkIOJuhtyXAOEHGcCUkp3mmICsgLyLZj8YnJnK7NvhCLu8h0fgCapCbIxAA2iQDWcG3IFOxwyBFRHhReOyANTZGBMwC+934cFYWBC8z2CzaJgY63IAF5YhA4AQIZCAMRnZjoKBie6kZCBdjJZDEzDUPQTZC4E5YmDwSjIE4iB5PS7I5BuODnIJovacNrwvzwXRQADm8kIfNahFQFFw6AQKDAVA0FDA-wAukA
+ - title: Core
+ file: app-variation-replace-update-a-notification-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnCIBXTgB0IGjOgD6q5AF5kqnFADmcHXQA2qgCYAKDchfHOWbumUUdMueR0AI28KcicwDlIAdzVCZFiAZXZo5AA5Ujk6TmIof00wAEoCDQKNMog7ODo2OAZFBgdPbyJSby8KIlY4VlZOcgLEZ1cAASk-BTgsAFE6OjhZIZdR6VkJrDhFSkaIdqxIqNKIV2RK6v2dIT10O1zLCAzOLJy8hwHF47cse8zs3L6IHT7JxHD6guixACarWQxGs2QA1nA7MgKOw4MgkilghRQkcQE0KHtklFXgBfFH8bpYWLFEGg452ZQMP7kAzpCBKd705AAYhhzHQUCkKNIyCi7FyyAlmGorD41Vw0LIMHglGQrREqPRcI5yECcGs0S59M4dgMsXgPXMcBpxpch3K2kMYkwDm0ek4nVq9UOcTAFFw6AQKH9cAAHhQwKSALpAA
+ - title: Track and remove notifications
+ description: Track notifications, and use `ui.notification_remove()` to remove
+ notifications one at a time.
+ apps:
+ - title: Preview
+ file: app-variation-track-and-remove-notifications-core.py
+ height: 225
+ - title: Express
+ file: app-variation-track-and-remove-notifications-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkd3QBXCkROcFCy1mNmA+hKnkHAIzMVyACjlgOpADufkR+AMrsQcgAcqRSdJzEUC4QfgCUNpx2EKYUTpKcrh4UXhC+YGIwpLIhyH4ASnBVsjFxnAlJKenWEJwAJqwoADacrBTAYwwAusgAvMjAUwoQKNwi8wAMPQoAAmLOMnBYAKJ0dHCSu-sFsuqylN72FFgBgRkQfXB0yA7eaYgKZBA5AAcyGpDcUCGfAGgOBYIhUOQqQgwOQAGJkGEoC0KOw4MgAJIAEWQdCEoia1SRQ2ScAYcKB-TmyFsEDaHWShQgDle5QAsnBdFAQQS-MgANRsCgMbwQNJEPomBhc8izWIQODvNH9VhYDDoah9R59bXA1ES+YARm2ED24huR1O50uduuUlucHuFEeOTMWEq1S1Ck+31+-0ZoPBkOhusj7Rhg0jaLZHMSqp5gdkJr1gnQf3ehFQFFwhtoYCoGgoYAAvlMgA
+ - title: Core
+ file: app-variation-track-and-remove-notifications-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnCIBXTgB0IGjOgD6q5AF5kqnFADmcHXQA2qgCYAKDchfHOWbumUUdMueR0AI28KcicwDlIAdzVCZFiAZXZo5AA5Ujk6TmIof00wAEoCZ1cTT29fWU4A4IpQiHCpGFJFWKJYgCU4ZsU0jM4snLzYoo0CjQmIOzg6NjgGRQYHcooiUm8vVbnWVmqIAsQSl047VhRrTlYKYCuGAF1DZGA7o+QIFG4RIwAGSddkAACUj8CjgWAAonQ6HBZK8gdIqoosHBFJRlhBNlhIlFxhB-tNZjoHAdXv8IORrKQctY+KdSa5yRBKdS3vSXABiZAJKC9CjsODIACSABFkHQhMgmi0oDTrLl5mzaY8TOTMtlcnsdNinHj-nqXHRYuk1UM9sgQBAAL5tZB2ZQMDXkAzpCBKZDESmsSy1eoGABiMq9itx+uOpyw2mojhOIdDeIA1EYAIx-VzwkFIyHQ2G6lzpxFglHUCjozFSxSxlwE5BEkm5vWM5ky2msRUDFuHeuhtxYVUDdV5HTluDLcOCdDE3GTbSPcQT7R6ThEL0Lea4uJgCi4dAIFCbuAADwoYEtdyAA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A notification is a message that appears near the bottom corner of the app. Notifications normally disappear after a short period of time, and should multiple notifications appear together, they will stack on top of one another.
+
+To create a notification, call [`ui.notification_show()`](https://shiny.posit.co/py/api/ui.notification_show.html). Typically, you will want to create a reactive effect to call `ui.show_notification()` whenever a particular event occurs. For example, the reactive effect below will create a notification whenever the value of `input.show()` changes.
+
+```{.python}
+@reactive.Effect
+@reactive.event(input.show)
+def _():
+ ui.notification_show("You've been notified.")
+```
+
+You can call [`ui.notification_remove()`](https://shiny.posit.co/py/api/ui.notification_remove.html) to remove a notification programatically, but usually app developers will let notifications expire on their own. Also, notifications come by default with a button that the user can click to close the notification prematurely.
+
+## Duration
+
+By default, Shiny notifications will disappear after five seconds. To change how long a notification appears for, set the `duration` argument of `ui.notification_show()` to an integer number of seconds. Set `duration` to `None` to have the notification appear until the user closes it.
+
+## Type
+
+Shiny notifications come in four types: default, messages, warnings and errors. To set the type of a notification, use the `type` argument of `ui.notification_show()`.
+
+See Also: [Modal messages](../modal/index.qmd) provide a similar, but alternative way to display information to the user.
+
+:::{#variations}
+:::
diff --git a/components/display-messages/progress-bar.qmd b/components/display-messages/progress-bar.qmd
deleted file mode 100644
index 38c0feef..00000000
--- a/components/display-messages/progress-bar.qmd
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: "Progress Bar"
-sidebar: components
-previewapp: |
- import asyncio
-
- from shiny import App, reactive, render, ui
- from pathlib import Path
- appdir = Path(__file__).parent
- app_ui = ui.page_fillable(
- ui.include_css(appdir / "styles.css"),
- ui.input_action_button("button", "Compute"),
- ui.output_text("compute"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @output
- @render.text
- @reactive.event(input.button)
- async def compute():
- with ui.Progress(min=1, max=15) as p:
- p.set(message="Calculation in progress", detail="This may take a while...")
-
- for i in range(1, 15):
- p.set(i, message="Computing")
- await asyncio.sleep(0.1)
-
- return "Done computing!"
-
- app = App(app_ui, server)
-
- ## file: styles.css
- #shiny-notification-panel { max-width: 100%; }
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Progress Bar
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMASxlWICcyACKAZ2wkJuIB0IAgGaNiMFuwAWNCNhZ0GzFgEF0eFozhRCZGgDc46zRAAmcRuoCuNAQLSoA+tZYBeFtaxQA5nAdCANtYmABQCLOHuNBgyqJZkDtq6pA4ARnFkpKFgaWQZgvgsfGAAwmKxFEUAlHhhER7EceUOFAAeZFkk9HFwVTUQlbamcEIS5gaMwTFx6g1k5erscOzsvP2IteEAArPlGyybxmaMGK1kewdaOvpwGHAG5JMQ5Rg5eQMQEWyc3CxmI53lODBSrrD6fCIAdxoZEkkQwAAVRF5NMtgjAZC4AIzqGBQFpYgCslS+LFQoPBFNJGEW7Xgy28cBcRWKUH8hEs-igSQ+MlJSJR7CK6jMZCgNH8TLAABVpOwWLi5KKANZwNgsCHSfw3DAYKqDSngoRMeTyD6MKAQHzBbEsTFE8kGymYGmTHFLdgMyWlLq6S16sGO8FQCFi1gcLg8YjUrVwVDBAAMGEx7z2n00ZEsjA+RQAIqRVQC4jIvABCIqDeyuFToYL2Jw0BZjcyVMAAXwAukA
- height: 200px
- code: |
- import asyncio
-
- from shiny import App, reactive, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("button", "Compute"),
- ui.output_text("compute"),
- )
-
- def server(input, output, session):
- @output
- @render.text
- @reactive.event(input.button)
- async def compute():
- with ui.Progress(min=1, max=15) as p:
- p.set(message="Calculation in progress", detail="This may take a while...")
-
- for i in range(1, 15):
- p.set(i, message="Computing")
- await asyncio.sleep(0.1)
-
- return "Done computing!"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: "ui.Progress"
- href: https://shiny.posit.co/py/api/ui.Progress.html
- signature: ui.Progress(self, min=0, max=1, session=None)
- - title: "ui.Progress.close"
- href: https://shiny.posit.co/py/api/ui.Progress.html
- signature: ui.Progress.close(self)
- - title: "ui.Progress.inc"
- href: https://shiny.posit.co/py/api/ui.Progress.html
- signature: ui.Progress.inc(self, amount=0.1, message=None, detail=None)
- - title: "ui.Progress.set"
- href: https://shiny.posit.co/py/api/ui.Progress.html
- signature: ui.Progress.set(self, value=None, message=None, detail=None)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-With Shiny, you can display a progress bar while a computation runs by running the computation bar within a special computation manager. Here's how:
-
-1. Use [`ui.Progress()`](https://shiny.posit.co/py/api/ui.Progress.html) to create a computation manager, and use `with` to run the computation within the manager. For example, you might set up a progress bar like this:
-
-```{.python}
-def compute():
- with ui.Progress(min=1, max=15) as p:
- # computation
-```
-
-`ui.Progress()` creates a progress bar object that you can use to update the progress bar that is displayed during the computation.
-
-2. Set the minimum and maximum values of the progress bar when you call `ui.Progress()`. These provide the outer bounds for the progress to display. For example, in the code above, when the bar is at 1, it would appear empty. When it is at 8, it would appear half full. When it is at 15, it would appear complete.
-
-3. Update the progress bar object as the computation runs. Updating the object is simple: you can call its `set()` method to change the location of the progress bar, as well as the message it displays. For example the code below would update the progress bar above to half finished, and change the message that accompanies the bar to "Almost there!".
-
-```{.python}
-p.set(8, message="Almost there")
-```
-
-Finding opportunities to update the bar while the computation runs is more tricky. To have a responsive bar, you will need to interlace `set()` calls with the computation that runs. If the computation is a function from an external package, you may only be able to alert the user when the computation begins and when it finishes, which is unlikely to be satisfying:
-
-```{.python}
-async def compute():
-with ui.Progress(min=1, max=15) as p:
- p.set(1, message="Here we go")
- # computation()
- p.set(15, message="Finished!")
-```
-
-If the computation involves separate functions run in sequence, you can update the progress bar after each function:
-
-```{.python}
-async def compute():
-with ui.Progress(min=1, max=15) as p:
- p.set(1, message="Here we go")
- # computation1()
- p.set(5, message="Working hard")
- # computation2()
- p.set(10, message="Almost there")
- # computation3()
- p.set(15, message="Finished!")
-```
-
-If the computation is a function that you have written, you can write the function to accept a progress bar object to update as it runs.
\ No newline at end of file
diff --git a/components/display-messages/progress-bar/app-core.py b/components/display-messages/progress-bar/app-core.py
new file mode 100644
index 00000000..312a45a7
--- /dev/null
+++ b/components/display-messages/progress-bar/app-core.py
@@ -0,0 +1,26 @@
+import asyncio
+
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("button", "Compute"),
+ ui.output_ui("compute"),
+)
+
+
+def server(input, output, session):
+ @output
+ @render.ui
+ @reactive.event(input.button)
+ async def compute():
+ with ui.Progress(min=1, max=15) as p:
+ p.set(message="Calculation in progress", detail="This may take a while...")
+
+ for i in range(1, 15):
+ p.set(i, message="Computing")
+ await asyncio.sleep(0.1)
+
+ return "Done computing!"
+
+
+app = App(app_ui, server)
diff --git a/components/display-messages/progress-bar/app-express.py b/components/display-messages/progress-bar/app-express.py
new file mode 100644
index 00000000..09daca2a
--- /dev/null
+++ b/components/display-messages/progress-bar/app-express.py
@@ -0,0 +1,19 @@
+import asyncio
+
+from shiny import reactive, render
+from shiny.express import input, ui
+
+ui.input_action_button("do_compute", "Compute")
+
+
+@render.ui
+@reactive.event(input.do_compute)
+async def compute():
+ with ui.Progress(min=1, max=15) as p:
+ p.set(message="Calculation in progress", detail="This may take a while...")
+
+ for i in range(1, 15):
+ p.set(i, message="Computing")
+ await asyncio.sleep(0.1)
+
+ return "Done computing!"
diff --git a/components/display-messages/progress-bar/app-preview.py b/components/display-messages/progress-bar/app-preview.py
new file mode 100644
index 00000000..bc7a9e6d
--- /dev/null
+++ b/components/display-messages/progress-bar/app-preview.py
@@ -0,0 +1,34 @@
+## file: app.py
+import asyncio
+from pathlib import Path
+
+from shiny import App, reactive, render, ui
+
+appdir = Path(__file__).parent
+app_ui = ui.page_fillable(
+ ui.include_css(appdir / "styles.css"),
+ ui.input_action_button("button", "Compute"),
+ ui.output_text("compute"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ @reactive.event(input.button)
+ async def compute():
+ with ui.Progress(min=1, max=15) as p:
+ p.set(message="Calculation in progress", detail="This may take a while...")
+
+ for i in range(1, 15):
+ p.set(i, message="Computing")
+ await asyncio.sleep(0.1)
+
+ return "Done computing!"
+
+
+app = App(app_ui, server)
+
+## file: styles.css
+# shiny-notification-panel { max-width: 100%; }
diff --git a/components/display-messages/progress-bar/index.qmd b/components/display-messages/progress-bar/index.qmd
new file mode 100644
index 00000000..22fd4773
--- /dev/null
+++ b/components/display-messages/progress-bar/index.qmd
@@ -0,0 +1,92 @@
+---
+title: Progress Bar
+sidebar: components
+appPreview:
+ file: components/display-messages/progress-bar/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/display-messages/progress-bar/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQEsZ1SAnC5KAZ1wmLtIB0IggGbNSMZBwAWdCLmQMmrZMzhRiFOgDc4RVRAAmcZiLETps3FjgAPdKo4cFjFm1noArhSIe6gwb5Y7l4A+uqa5CEARl4U5AAU-GAGpCFkjF5wSURJAMLinlRJAJT+QhAAAvpGzFi+glVqGtpw1jqU8cEUWClpBZml0Fw8yEbCyOmFcPHFiILIC8gA7nQUUsiBAApiAOYOHPEwsgC8AIxEMFA2ZwCsxexO6HMQi6-I2BxwFIdwjlA7cGOeSgABtiB4QVAIi9ZO9dvtsqMvlA6CCgWAACoyJyXeQUKAAazg7GWMhBrSwWBKZTei2ELAUChezCgEAB8XOyFOd2etNpHy+nQuvw4-0BeX6mjZ1JefNeUCWKLYnG4vFIWA45Lg6HiAAYsKdBvNFqoKB5mC8kgARcjEyZeWQ7ACESUEhFQFFw6AQKDAVBsFDAAF8ALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQEsZ1SAnC5KAZ1wmLtIB0IggGbNSMZBwAWdCLmQMmrZAEFMRZnCjEKdAG5wN1ACZxmRAK51BgjOgD6V5AF5kVnFADmce8IA2VsYAFILIYW50WLLoFhT22rrk9gBGsRTkIWCpFOlChMj8YADC4jFUhQCUBKHh7qSxZY50mWSMsXCV1RAVNkIQpsKSZgbMQdGxRPUUZUQccBwcfN2INWEAAlNlq8hrmv1mWFbbu1o6+nBYcAaUYxBlWNm5PRDh7Fw8yAPIrWVwQRUrF6vcIAdzoFCkESwAAUxJ5NAsgjBZM4AIxEGBQAAeaIArBU3sh0IDgaSiVg5hQkfMOF44M5CkUoH5iBY-FBEi9ZES4QiOIUiKYKFA6H4GWAACoyDjITHyYUAazg7GQIJkfguWCwlV6ZOBwhYCgUL2YUAg3iC6OQqPxJL1ZOwlLGGJpdPFJTaunNOqB9uBUBBIrYnG4vFIFI1cHQQQADFhUc9tq9NBQLMwXoUACLkZU-WKyTwAQkKvVsmBcqkwQTsTVmwzMz3yYAouHQCBQzbgWIoYAAvgBdIA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ template-params:
+ dir: components/display-messages/progress-bar/
+ contents:
+ - title: ui.Progress
+ href: https://shiny.posit.co/py/api/ui.Progress.html
+ signature: ui.Progress(self, min=0, max=1, session=None)
+ - title: ui.Progress.close
+ href: https://shiny.posit.co/py/api/ui.Progress.html
+ signature: ui.Progress.close(self)
+ - title: ui.Progress.inc
+ href: https://shiny.posit.co/py/api/ui.Progress.html
+ signature: ui.Progress.inc(self, amount=0.1, message=None, detail=None)
+ - title: ui.Progress.set
+ href: https://shiny.posit.co/py/api/ui.Progress.html
+ signature: ui.Progress.set(self, value=None, message=None, detail=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+With Shiny, you can display a progress bar while a computation runs by running the computation bar within a special computation manager. Here's how:
+
+1. Use [`ui.Progress()`](https://shiny.posit.co/py/api/ui.Progress.html) to create a computation manager, and use `with` to run the computation within the manager. For example, you might set up a progress bar like this:
+
+```{.python}
+def compute():
+ with ui.Progress(min=1, max=15) as p:
+ # computation
+```
+
+`ui.Progress()` creates a progress bar object that you can use to update the progress bar that is displayed during the computation.
+
+2. Set the minimum and maximum values of the progress bar when you call `ui.Progress()`. These provide the outer bounds for the progress to display. For example, in the code above, when the bar is at 1, it would appear empty. When it is at 8, it would appear half full. When it is at 15, it would appear complete.
+
+3. Update the progress bar object as the computation runs. Updating the object is simple: you can call its `set()` method to change the location of the progress bar, as well as the message it displays. For example the code below would update the progress bar above to half finished, and change the message that accompanies the bar to "Almost there!".
+
+```{.python}
+p.set(8, message="Almost there")
+```
+
+Finding opportunities to update the bar while the computation runs is more tricky. To have a responsive bar, you will need to interlace `set()` calls with the computation that runs. If the computation is a function from an external package, you may only be able to alert the user when the computation begins and when it finishes, which is unlikely to be satisfying:
+
+```{.python}
+async def compute():
+with ui.Progress(min=1, max=15) as p:
+ p.set(1, message="Here we go")
+ # computation()
+ p.set(15, message="Finished!")
+```
+
+If the computation involves separate functions run in sequence, you can update the progress bar after each function:
+
+```{.python}
+async def compute():
+with ui.Progress(min=1, max=15) as p:
+ p.set(1, message="Here we go")
+ # computation1()
+ p.set(5, message="Working hard")
+ # computation2()
+ p.set(10, message="Almost there")
+ # computation3()
+ p.set(15, message="Finished!")
+```
+
+If the computation is a function that you have written, you can write the function to accept a progress bar object to update as it runs.
diff --git a/components/display-messages/tooltips.qmd b/components/display-messages/tooltips.qmd
deleted file mode 100644
index 9f7586b7..00000000
--- a/components/display-messages/tooltips.qmd
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: "Tooltips"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.tooltip(
- ui.input_action_button("btn", "A button with a tooltip"),
- "A message",
- id="btn_tooltip"
- ),
- ui.output_text_verbatim("text"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def text():
- return ""
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Tooltips
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYGOGMsWIWyHVHYgPfjjFyoCmSaUIQepJoARsEuEHZgUWRq+EzKYCJMMWRxTADuHGRsTFBMLm4eqOkAlHj2fmkZTPAsLCZw6XU+DRzSuulJEJrl7p6d9X6oFmFw8OT9YHQcxmxk6fW1E-7EwUEhFAAeIQBuclFQHjAJh2tg1ar3ahCyNKxyp3Q2gcESO2R7EhYcFaHFI1UQ9QAAlJnnJnHAjvUXmUEWQbOCtg4pGQFHQfN8yBhBsNXKMvI91Og9KJ0DYNNoOID3nJqmAAL4AXSAA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.tooltip( #<<
- ui.input_action_button("btn", "A button with a tooltip"),
- "A message", #<<
- id="btn_tooltip", #<<
- placement="right" #<<
- ),
- ui.output_text_verbatim("text")
- )
-
- def server(input, output, session):
- @render.text
- def text():
- return input.btn_tooltip() #<<
-
- app = App(app_ui, server)
-
- relevantfunctions:
- - title: ui.tooltip
- href: https://shiny.posit.co/py/api/ui.tooltip.html
- signature: ui.tooltip(trigger, *args, id=None, placement='auto', options=None, **kwargs)
- - title: ui.update_tooltip
- href: https://shiny.posit.co/py/api/ui.update_tooltip.html
- signature: ui.update_tooltip(id, *args, show=None, session=None)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Update a tooltip message
- description: Call `ui.update_tooltip()` to update the message of a tooltip with a given id.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAkBXDgB0IGtKgD6qpgF4mqrFADmcHTQA2qgCYAKDU2McMZYsWtzUTiC4DXDC5UZTIdGTlSHQAjMI8IJzAYsk18JjUwESY4sgSmAHcOMjYmKCYPLx9MgEo8Z0CMrKZ4FhZzOEz6-0aOOwNMlIgdSu8OVC6GwNRrGTh4cgGwOg4zNjJMhrqGkzJzFgwYugdtnt39w+PTlxMQsIjZDmjchKShvVQ7KAoupoBVT7fOAVTxjVAtOBtDq1DQ1DQaOxwGisOB0RTHO5kCTEMKhLEotpPCA1RBTJgAASkkQUcAwAFEaDQ4LIyZTpI9FBg4IpyA5MYdUh8vhQ4T0XIjkToTqSxY0SORKMIjH5GqqmtlMkwANRNJoYABWxC4DmAmQAcnSAOqamiCJg6Xj+OhQCAWPkQPEC4bKQEUE41AC6NW1uta7Qsm1lgVFZMCJh9wssox8b0FyfGv3lFHIEnYxAKBgAKnRlHAY9B0IZROgHNo9Bxc6j0TUwABfANAA
- code: |
- from shiny import App, reactive, ui
-
- app_ui = ui.page_fluid(
- ui.tooltip(
- ui.input_action_button("btn", "A button with a tooltip"),
- "A message",
- id="btn_tooltip",
- placement="right"
- ),
- ui.tags.br(),
- ui.tags.br(),
- ui.input_action_button("btn_update", "Update tooltip message")
- )
-
- def server(input, output, session):
- @reactive.Effect
- @reactive.event(input.btn_update)
- def _():
- content = (
- "A " + " ".join(["NEW" for _ in range(input.btn_update())])+ " message"
- )
-
- ui.update_tooltip("btn_tooltip", content, show=True) #<<
-
- app = App(app_ui, server)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A tooltip is a box that appears next to an element when a user hovers over the element. To add a tooltip to a UI component, wrap the component in [`ui.tooltip()`](https://shiny.posit.co/py/api/ui.tooltip.html). Then pass `ui.tooltip()` one or more elements to display, such as a simple string that contains a message.
-
-Optionally assign the tooltip an `id` to trigger reactions when the tooltip becomes visible or to programmatically update the contents of the tooltip as your user navigates the app. A boolean that describes whether or not the tooltip is visible will be accessible as a reactive variable within the server function as `input.()`.
-
-Control the placement of the tooltip relative to the item it highlights with the `placement` argument. `placement` defaults to `'auto'`, but can be set to one of `'top'`, `'bottom'`, `'left'`, or `'right'`.
-
-## Accessibility of Tooltip Triggers
-
-Because the user needs to interact with the `trigger` element to see the `tooltip`, it's best practice to use an element that is typically accessible via keyboard interactions, like a button or a link.
-
-If you use a non-interactive element, like a `` or text, `tooltip()` will automatically add the `tabindex="0"` attribute to the trigger element to make sure that users can reach the element with the keyboard. This means that in most cases you can use any element you want as the trigger.
-
-One place where it's important to consider the accessibility of the trigger is when using an icon without any accompanying text. In these cases, many icon elements are created with the assumption that the icon is decorative, which will make it inaccessible to users of assistive technologies.
-
-When using an icon as the primary trigger, ensure that the icon does not have `aria-hidden="true"` or `role="presentation"` attributes. Icon packages typically provide a way to specify a title for the icon, as well as a way to specify that the icon is not decorative. The title should be a short description of the purpose of the trigger, rather than a description of the icon itself.
-
-For example:
-
-```{.python}
-icon_title = "About tooltips"
-def bs_info_icon(title: str):
- # Enhanced from https://rstudio.github.io/bsicons/ via `bsicons::bs_icon("info-circle", title = icon_title)`
-return ui.HTML(f'{title} {title} ()`.
+
+Control the placement of the tooltip relative to the item it highlights with the `placement` argument. `placement` defaults to `'auto'`, but can be set to one of `'top'`, `'bottom'`, `'left'`, or `'right'`.
+
+## Accessibility of Tooltip Triggers
+
+Because the user needs to interact with the `trigger` element to see the `tooltip`, it's best practice to use an element that is typically accessible via keyboard interactions, like a button or a link.
+
+If you use a non-interactive element, like a `` or text, `tooltip()` will automatically add the `tabindex="0"` attribute to the trigger element to make sure that users can reach the element with the keyboard. This means that in most cases you can use any element you want as the trigger.
+
+One place where it's important to consider the accessibility of the trigger is when using an icon without any accompanying text. In these cases, many icon elements are created with the assumption that the icon is decorative, which will make it inaccessible to users of assistive technologies.
+
+When using an icon as the primary trigger, ensure that the icon does not have `aria-hidden="true"` or `role="presentation"` attributes. Icon packages typically provide a way to specify a title for the icon, as well as a way to specify that the icon is not decorative. The title should be a short description of the purpose of the trigger, rather than a description of the icon itself.
+
+For example:
+
+```{.python}
+icon_title = "About tooltips"
+def bs_info_icon(title: str):
+ # Enhanced from https://rstudio.github.io/bsicons/ via `bsicons::bs_icon("info-circle", title = icon_title)`
+return ui.HTML(f'{title} {title}
-
+
@@ -110,4 +112,4 @@ Provide feedback to your user with notifications, progress bars, and confirmatio
::::::
::::::::
-
\ No newline at end of file
+
diff --git a/components/inputs/action-button.qmd b/components/inputs/action-button.qmd
deleted file mode 100644
index e8fd75fb..00000000
--- a/components/inputs/action-button.qmd
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: "Action Button"
-sidebar: components
-previewapp: |
- from shiny import App, reactive, render, ui
- app_ui = ui.page_fluid(
- ui.input_action_button("action_button", "Action"),
- ui.output_text("counter"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @output
- @render.text()
- @reactive.event(input.action_button)
- def counter():
- return f""
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Action Button
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPrSoA+jqYBeJjqxQA5nGM0ANjtUAKfUy9WOGBgHcPCG8QnwwSFxgINwA2bV8uVC0yYxk5UmMAI2SyUg8UWQ4M7LJcg3wmXTAASQhCKSgWOCYAOS0YTI0qgEpuvE9Qr2sI9ui4sOJkpJSKAA8yfJItci6wbowoVVVjQidGlnzVDhZUPewAWgBWJg7zgAYevoHBkCrd-arESrB5NnOARjudyYACstCw5DQLiQVuRzoRKBQ6EwoE4OLYIOcOBQYCx4YiNExULMrlUAL79YLedabbbvFgHKpzMj4lZ0Hr6br6blqOA0VgaRR0NyJZISSZkaYSJoMooQbqIZ5MJbkCySaSFRQYABqqK0cDcdy5BipXgAAg1NXAMABRGg0OCyJUWjVyLVwRTkEUQaYbQrFHKkY0hdT84xuBVKkIqsgYJoLGMRpgAaiY-2NzpU6joGGZStDysmbIjitNoSkZC0dGCNCqIET3TJVR5hnQarEqDcRlMHGlgo0xrAZIAukA
- height: 200px
- code: |
- from shiny import App, reactive, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_button("action_button", "Action"), #<<
- ui.output_text("counter")
- )
-
- def server(input, output, session):
- @render.text()
- @reactive.event(input.action_button)
- def counter():
- return f"{input.action_button()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_action_button
- href: https://shiny.posit.co/py/api/ui.input_action_button.html
- signature: ui.input_action_button(id, label, *, icon=None, width=None, **kwargs)
- - title: reactive.event
- href: https://shiny.posit.co/py/api/reactive.event.html
- signature: reactive.event(*args, ignore_none=True, ignore_init=False)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-An action button appears as a button and has a value that increments each time the user presses the button.
-
-Follow these steps to add an action button to your app:
-
- 1. Add `ui.input_action_button()` to the UI of your app to create an action button. Where you call this function will determine where the button will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_action_button()` to define the button's identifier and label.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of an action button:
-
- 1. Use `input.` (e.g., `input.action_button()`) to access the value of the action button. The server value of an action button is an integer representing the number of clicks.
-
-See also: [Action Link](action-link.qmd)
-
-
-
diff --git a/components/inputs/action-button/app-core.py b/components/inputs/action-button/app-core.py
new file mode 100644
index 00000000..11de75ef
--- /dev/null
+++ b/components/inputs/action-button/app-core.py
@@ -0,0 +1,16 @@
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("action_button", "Action"), # <<
+ ui.output_text("counter"),
+)
+
+
+def server(input, output, session):
+ @render.text()
+ @reactive.event(input.action_button)
+ def counter():
+ return f"{input.action_button()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-button/app-detail-preview.py b/components/inputs/action-button/app-detail-preview.py
new file mode 100644
index 00000000..1dc19196
--- /dev/null
+++ b/components/inputs/action-button/app-detail-preview.py
@@ -0,0 +1,26 @@
+## file: app.py
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.row(
+ ui.column(6, ui.input_action_button("action_button", "Increase Number")),
+ ui.column(6, ui.output_text("counter").add_class("display-5 mb-0")),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+ ).add_class("text-center")
+)
+
+
+def server(input, output, session, starting_value=0):
+ count = reactive.Value(starting_value)
+
+ @reactive.Effect
+ @reactive.event(input.action_button)
+ def _():
+ count.set(count() + 1)
+
+ @render.text
+ def counter():
+ return f"{count()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-button/app-express.py b/components/inputs/action-button/app-express.py
new file mode 100644
index 00000000..81f2e08e
--- /dev/null
+++ b/components/inputs/action-button/app-express.py
@@ -0,0 +1,11 @@
+from shiny import reactive, render
+from shiny.express import input, ui
+
+
+ui.input_action_button("action_button", "Action") # <<
+
+
+@render.text()
+@reactive.event(input.action_button)
+def counter():
+ return f"{input.action_button()}"
diff --git a/components/inputs/action-button/app-preview.py b/components/inputs/action-button/app-preview.py
new file mode 100644
index 00000000..59760a52
--- /dev/null
+++ b/components/inputs/action-button/app-preview.py
@@ -0,0 +1,18 @@
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_button("action_button", "Action"),
+ ui.output_text("counter"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text()
+ @reactive.event(input.action_button)
+ def counter():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-button/index.qmd b/components/inputs/action-button/index.qmd
new file mode 100644
index 00000000..acb46220
--- /dev/null
+++ b/components/inputs/action-button/index.qmd
@@ -0,0 +1,52 @@
+---
+title: Action Button
+sidebar: components
+appPreview:
+ file: components/inputs/action-button/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/action-button/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzhExEACZwGAHQiNmbLjyxwAHujGtWfAUJHd0AVwpFrndU4gOsV2wH0JU8h4BGthTkABSqaJKcvgEUQRBhRGEAghHkYQCUyMgAxMgAPLnO6gACCsoMWFT6FMFpxWLeMnB6spTB7hRYDVGB5LVKcHTIZNaUKjWI6pmZYhTWDBDIdGEg7Z0pEP49EDUAvmHqhKgUuOgIKGCVFGA7ALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnEnUAJnAZEArpwA6EPRnQB9bcgC8ybTigBzOEboAbbSoAUe5J8ucs3dJoojGTlyIwAjAIpydzRZTlCIiij9QmQdMFE48nSASiJkAGJkAB5ijy8rUgD-QKoADwoYsk1KdVyCPRy9bog1OjZ1RQZXPwCiKooaolY4VlZ4iBzEcs8AASle9Sx6xq6IL2R16TjFLDhFShGIGqxghfDI8j2DvuRm1uGllYPkKQpNBj7OjpECjCi3LIQB5JaI5AC+6R6Bkw5jEmFchhMnGmg3Ue1SYAouHQCBQhLgDTAcIAukA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_action_button
+ href: https://shiny.posit.co/py/api/ui.input_action_button.html
+ signature: ui.input_action_button(id, label, *, icon=None, width=None, **kwargs)
+ - title: reactive.event
+ href: https://shiny.posit.co/py/api/reactive.event.html
+ signature: reactive.event(*args, ignore_none=True, ignore_init=False)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+An action button appears as a button and has a value that increments each time the user presses the button.
+
+Follow these steps to add an action button to your app:
+
+ 1. Add `ui.input_action_button()` to the UI of your app to create an action button. Where you call this function will determine where the button will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_action_button()` to define the button's identifier and label.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of an action button:
+
+ 1. Use `input.` (e.g., `input.action_button()`) to access the value of the action button. The server value of an action button is an integer representing the number of clicks.
+
+See also: [Action Link](../action-link/index.qmd)
diff --git a/components/inputs/action-link.qmd b/components/inputs/action-link.qmd
deleted file mode 100644
index 95477870..00000000
--- a/components/inputs/action-link.qmd
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: "Action Link"
-sidebar: components
-previewapp: |
- from shiny import App, reactive, render, ui
- app_ui = ui.page_fluid(
- ui.input_action_link("action_link", "Action"),
- ui.output_text("counter"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @output
- @render.text()
- @reactive.event(input.action_link)
- def counter():
- return f""
- app = App(app_ui, server)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Action Link
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPrSoA+jqYBeJjqxQA5nGM0ANjtUAKfUy9WOGBgHcPCG8QnwwSFxgINwA2bV8uVC0yYxk5UmMnLgBrDxRZDgysiGzdfCYygEkIQikoFjgmADktGAAjDTKASi68T1CvawjW6Liw4mSklIoADzI8ki1yTrAujChVVWNCJ3qWPNUOFlRd7ABaAFYmdrOABm7e-oGQMp29ssQKsHk2M4BGW63JgAKy0LDkNHOJGW5DOhEoFDoTCgWVsEDOHAoMBYcIRGiYqBmlzKAF8+sFvGsNls3ix9mVZmRccs6N19F19Jy1HAaKwNIo6G5EskJBMyFMJA06YUIF1EE8mItyBZJNICooMAA1FFaOBuW4cgwUrwAATq6rgGAAojQaHBZAqzWq5Bq4IpyEKIFN1gUijlDSF1LzjG45QqQkqyBgGvNI6GmABqJh-Q2OlTqOgYRkKoOKiYs0Py42hKRkLR0YI0MogONdEllLmGdAqsSoNxGUwcSX8jSGsAkgC6QA
- height: 200px
- code: |
- from shiny import App, reactive, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_action_link("action_link", "Action"), #<<
- ui.output_text("counter")
- )
-
- def server(input, output, session):
- @render.text()
- @reactive.event(input.action_link)
- def counter():
- return f"{input.action_link()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_action_link
- href: https://shiny.posit.co/py/api/ui.input_action_link.html
- signature: ui.input_action_link(id, label, *, icon=None, **kwargs)
- - title: reactive.event
- href: https://shiny.posit.co/py/api/reactive.event.html
- signature: reactive.event(*args, ignore_none=True, ignore_init=False)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-An action link appears as a link in your app and has a value that increments each time the user presses the link.
-
-Follow these steps to add an action link to your app:
-
- 1. Add `ui.input_action_link()` to the UI of your app to create an action link. Where you call this function will determine where the link appears within the app's layout.
- 2. Specify the `id` and `label` parameters of `ui.input_action_link()` to define the action link's identifier and label.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of an action link:
-
- 1. Use `input.` (e.g., `input.action_link()`) to access the value of the action link. The server value of an action link is an integer representing the number of clicks.
-
-See also: [Action Button](action-button.qmd)
diff --git a/components/inputs/action-link/app-core.py b/components/inputs/action-link/app-core.py
new file mode 100644
index 00000000..26204f4c
--- /dev/null
+++ b/components/inputs/action-link/app-core.py
@@ -0,0 +1,22 @@
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_link("action_link", "Increase Number"), # <<
+ ui.output_text("counter"),
+)
+
+
+def server(input, output, session):
+ count = reactive.value(0)
+
+ @reactive.effect
+ @reactive.event(input.action_link) # <<
+ def _():
+ count.set(count() + 1)
+
+ @render.text()
+ def counter():
+ return f"{count()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-link/app-detail-preview.py b/components/inputs/action-link/app-detail-preview.py
new file mode 100644
index 00000000..31de7999
--- /dev/null
+++ b/components/inputs/action-link/app-detail-preview.py
@@ -0,0 +1,26 @@
+## file: app.py
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.row(
+ ui.column(6, ui.input_action_link("action_link", "Increase Number")),
+ ui.column(6, ui.output_text("counter").add_class("display-5 mb-0")),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+ ).add_class("text-center")
+)
+
+
+def server(input, output, session):
+ count = reactive.value(0)
+
+ @reactive.effect
+ @reactive.event(input.action_link)
+ def _():
+ count.set(count() + 1)
+
+ @render.text()
+ def counter():
+ return f"{count()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-link/app-express.py b/components/inputs/action-link/app-express.py
new file mode 100644
index 00000000..164298f0
--- /dev/null
+++ b/components/inputs/action-link/app-express.py
@@ -0,0 +1,18 @@
+from shiny import reactive
+from shiny.express import input, render, ui
+
+ui.input_action_link("action_link", "Increase Number") # <<
+
+
+count = reactive.value(0)
+
+
+@reactive.effect
+@reactive.event(input.action_link)
+def _():
+ count.set(count() + 1)
+
+
+@render.text()
+def counter():
+ return f"{count()}"
diff --git a/components/inputs/action-link/app-preview.py b/components/inputs/action-link/app-preview.py
new file mode 100644
index 00000000..6f5063c0
--- /dev/null
+++ b/components/inputs/action-link/app-preview.py
@@ -0,0 +1,18 @@
+from shiny import App, reactive, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_action_link("action_link", "Action"),
+ ui.output_text("counter"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text()
+ @reactive.event(input.action_link)
+ def counter():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/action-link/index.qmd b/components/inputs/action-link/index.qmd
new file mode 100644
index 00000000..2fc5393c
--- /dev/null
+++ b/components/inputs/action-link/index.qmd
@@ -0,0 +1,51 @@
+---
+title: Action Link
+sidebar: components
+appPreview:
+ file: components/inputs/action-link/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/action-link/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDOFGIVOANzgAdCI2ZsuPLHAAe6Ma1Z8BQkd3QBXCkTEQAJnAZETnBQodZjZgPoSp5dwBtuANYAFHJokpw+-hABoUShAJIQxGJQrHDIAHImMABGtqEAlMjIAMTIADzlThAKZCaUyAC8ouLhsljSUL4mcEEADAXVCgACKW1w6nR0cJIjY1LtcLKUQW4UWF4REH6Bg9ZwdMjuQQWICsXFdZRYaRRBV3dFANTIAIx71aPUNgxYVBqPBQ2Q4PWwnM4QC4tCgmBiQuihEAPE4AX1CCkIqAouHQCBQYH+FDAKIAukA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEGcKMQqcAbnEnUAJnAZEArpwA6EPRnQB9bcgC8ybTigBzOEboAbbSoAUe5J8ucs3dJoojGTlyI0duAGt3NFlOUPCICJ1CZGSASQhiKShWOGQAOU0YACN1ZIBKImQAYmQAHjqPLytSAP9AqgAPCmiyTUoysEq9cr0xiDU6NnVFBlc-AKJWinaiXNZWOIhyxCbPPspzZGzYxSx5KGc4VwAGUf0IL2QAARO5M7g6OjhZPZe3hRwLBwRSUeYQdpYYJbMKRcqeWoNP6TZBGVw7P5PA4ULC5HrY9HIADUyAAjPc-q9VOosF0evcnijsep0btHk8vFIKJoGI86MkQATygBfZLjAyYI7idCuQwmThrGbqe4pMAUXDoBAoNVwbpgYUAXSAA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_action_link
+ href: https://shiny.posit.co/py/api/ui.input_action_link.html
+ signature: ui.input_action_link(id, label, *, icon=None, **kwargs)
+ - title: reactive.event
+ href: https://shiny.posit.co/py/api/reactive.event.html
+ signature: reactive.event(*args, ignore_none=True, ignore_init=False)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+An action link appears as a link in your app and has a value that increments each time the user presses the link.
+
+Follow these steps to add an action link to your app:
+
+ 1. Add `ui.input_action_link()` to the UI of your app to create an action link. Where you call this function will determine where the link appears within the app's layout.
+ 2. Specify the `id` and `label` parameters of `ui.input_action_link()` to define the action link's identifier and label.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of an action link:
+
+ 1. Use `input.` (e.g., `input.action_link()`) to access the value of the action link. The server value of an action link is an integer representing the number of clicks.
+
+See also: [Action Button](../action-button/index.qmd)
diff --git a/components/inputs/checkbox-group.qmd b/components/inputs/checkbox-group.qmd
deleted file mode 100644
index 62504575..00000000
--- a/components/inputs/checkbox-group.qmd
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: "Checkbox Group"
-sidebar: components
-previewapp: |
- from shiny import App, render, req, ui
- app_ui = ui.page_fluid(
- ui.input_checkbox_group(
- "checkbox_group",
- "",
- {
- "a": "Watch me Whip",
- "b": "Watch me Nae Nae",
- "c": "Watch neither",
- },
- ).add_class("mb-0"),
- ui.output_text("value"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @output
- @render.text
- def value():
- return ""
- app = App(app_ui, server)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Checkbox Group
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EqQEcJAVw4AdaOgD6apgF4marFADmcbTQA2a6QApNTJ0Y4YuqFWW2E2cQgGsAI2IAD21TBhVUOyZHZ3j1Il8A4LCI4ijEiTj4p0SAYWSg0KZ0zPxYiFznEErq6sSoRMRYsBEsuvqEsEDm1oAhDpyu1sI+gqGq+oBfbKmnAEo5+OMMsg8vChCyBzAANygbOESlzRBEwisoFhZx-bYAWgBGAAYXpmkH6zgQpkOOUwQB4cCgwFgPQiUCh0JioEIPAAsiWmmgWmlkNFYcj2cjs7k8EjWGwkLDgNw4pAWiGGAAEiZ5aVIILI6BgtmRhhimAcjnYqcN4lIyCo6FUhmAMAArYhcPEQDYYHx+YppSLRBZorSoAyidB2NCoXQcEnYuQLMDTAC6QA
- height: 200px
- code: |
- from shiny import App, render, req, ui
-
- app_ui = ui.page_fluid(
- ui.input_checkbox_group( #<<
- "checkbox_group", #<<
- "Checkbox group", #<<
- { #<<
- "a": "A", #<<
- "b": "B", #<<
- "c": "C", #<<
- }, #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return ", ".join(input.checkbox_group())
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_checkbox_group
- href: https://shiny.posit.co/py/api/ui.input_checkbox_group.html
- signature: ui.input_checkbox_group(id, label, choices, *, selected=None, inline=False, width=None)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A checkbox group creates a group of checkboxes that can be used to toggle multiple choices independently.
-
-Follow these steps to display a checkbox group in your app:
-
- 1. Add `ui.input_checkbox_group()` to the UI of your app to create a checkbox group. Where you call this function will determine where the checkbox group will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_checkbox_group()` to define the identifier and label of the checkbox group.
-
- 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_checkbox_group()` uses the dictionary keys as the checkbox values and the dictionary values as the checkbox labels.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a checkbox group:
-
- 1. Use `input.()` (e.g., `input.checkbox_group()`) to access the value of a checkbox group. The server value of a checkbox group is a tuple of string(s) with the selected value(s).
-
-See also: [Checkbox](checkbox.qmd)
\ No newline at end of file
diff --git a/components/inputs/checkbox-group/app-core.py b/components/inputs/checkbox-group/app-core.py
new file mode 100644
index 00000000..7299b3e5
--- /dev/null
+++ b/components/inputs/checkbox-group/app-core.py
@@ -0,0 +1,23 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_checkbox_group( # <<
+ "checkbox_group", # <<
+ "Checkbox group", # <<
+ { # <<
+ "a": "A", # <<
+ "b": "B", # <<
+ "c": "C", # <<
+ }, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return ", ".join(input.checkbox_group())
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox-group/app-detail-preview.py b/components/inputs/checkbox-group/app-detail-preview.py
new file mode 100644
index 00000000..3e68eb10
--- /dev/null
+++ b/components/inputs/checkbox-group/app-detail-preview.py
@@ -0,0 +1,26 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_checkbox_group(
+ "checkbox_group",
+ "Checkbox group",
+ {
+ "a": "A",
+ "b": "B",
+ "c": "C",
+ },
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return ", ".join(input.checkbox_group())
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox-group/app-express.py b/components/inputs/checkbox-group/app-express.py
new file mode 100644
index 00000000..8452b7ce
--- /dev/null
+++ b/components/inputs/checkbox-group/app-express.py
@@ -0,0 +1,18 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_checkbox_group( # <<
+ "checkbox_group", # <<
+ "Checkbox group", # <<
+ { # <<
+ "a": "A", # <<
+ "b": "B", # <<
+ "c": "C", # <<
+ }, # <<
+) # <<
+
+
+@render.text
+def value():
+ return ", ".join(input.checkbox_group())
diff --git a/components/inputs/checkbox-group/app-preview.py b/components/inputs/checkbox-group/app-preview.py
new file mode 100644
index 00000000..c8e4668c
--- /dev/null
+++ b/components/inputs/checkbox-group/app-preview.py
@@ -0,0 +1,25 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_checkbox_group(
+ "checkbox_group",
+ "",
+ {
+ "a": "Watch me Whip",
+ "b": "Watch me Nae Nae",
+ "c": "Watch neither",
+ },
+ ).add_class("mb-0"),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox-group/index.qmd b/components/inputs/checkbox-group/index.qmd
new file mode 100644
index 00000000..36c8f4c3
--- /dev/null
+++ b/components/inputs/checkbox-group/index.qmd
@@ -0,0 +1,52 @@
+---
+title: Checkbox Group
+sidebar: components
+appPreview:
+ file: components/inputs/checkbox-group/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/checkbox-group/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6xdnGIBrAEalVdgOZND6AApkZABiZAAecNlg4OkwR2d3Tx8-dDiiUIioiBjkOIBhJ1cPVWRfUn904LDI6JiQaqy63Ni0OJQ4gEEqzNqclta3drywACEemuyB1uJhgomm-uCAXwzJ2QBKRr7LAAExCEkGLCpVCllJOmQANygAG0M4AI3EZtE4CkMGHKq4rAArUjcAK2ChYBLFZLlfzPDayQioCi4dAIFBgU4UMDLAC6QA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm4uzjEA1gCNSAA9NYyYFdBsHAGJkAB44+0dk5TAvHwDg0PD0VKJkWISk5IdUgGFvP0Cg5DDSCLyY+MSIEscQJqLWtpLUqFSUVNFGgubintKwfwHkVIAhEcKWiZS0mfLFse62gF98pfGASn2t5MN6ijcPKiCKOzAANygrOFTj1UPVL4hZOjY5B5yGyudxEC5XIisOCsVicciHRDjAACUh+ciwNwo41+yCeLxsCPGySkFAUDFajVSWAAVqRuMCIFcsOkqlk6hECZ81NyNHoxJgbBptJxIQC5FzCKgKLh0AgUGBMWAdgBdIA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_checkbox_group
+ href: https://shiny.posit.co/py/api/ui.input_checkbox_group.html
+ signature: ui.input_checkbox_group(id, label, choices, *, selected=None, inline=False,
+ width=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A checkbox group creates a group of checkboxes that can be used to toggle multiple choices independently.
+
+Follow these steps to display a checkbox group in your app:
+
+ 1. Add `ui.input_checkbox_group()` to the UI of your app to create a checkbox group. Where you call this function will determine where the checkbox group will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_checkbox_group()` to define the identifier and label of the checkbox group.
+
+ 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_checkbox_group()` uses the dictionary keys as the checkbox values and the dictionary values as the checkbox labels.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a checkbox group:
+
+ 1. Use `input.()` (e.g., `input.checkbox_group()`) to access the value of a checkbox group. The server value of a checkbox group is a tuple of string(s) with the selected value(s).
+
+See also: [Checkbox](../checkbox/index.qmd)
diff --git a/components/inputs/checkbox.qmd b/components/inputs/checkbox.qmd
deleted file mode 100644
index 66c82ebd..00000000
--- a/components/inputs/checkbox.qmd
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: "Checkbox"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
- app_ui = ui.page_fluid(
- ui.input_checkbox("x", "Checkbox Checkbox").add_class("mb-0"),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @output
- @render.text
- def txt():
- return f""
- app = App(app_ui, server)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Checkbox
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOtHQB9JUwC8TJVigBzOOpoAbJdIAUqpnb0cMDAO42I9jw4wkLMCFYA2RUcuVAUydUI2OEIAawAjYgAPGyJouMSk5XwmbIBhdITk7IkAFToFOABKDChpaUizKBYWVJh4gFoABiYKJLIOwkoKOmyqqolbTzt9HwU-QOCMYnCwiKVUgDcoCzgx2vrG5tbs9u7euH7B4bkxianpkGzCJpbsxFywTbYOgEYunoAKwULDIHBo2EGpAo5Gu5DkTB2HEMEA6HAoMBYcJGTFQSQ6AFZsgBfB5MKqqCkQVSyGisOSbORWULhCQrMhrCQsOAtDikKqIMkAASkEFkdAwSjJtKY212VgFZI8UjICjo7hZZG8hUyCtUaFQOlE6CsBs0HC5DLkVTAxIAukA
- height: 150px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_checkbox("checkbox", "Checkbox", False), #<<
- ui.output_ui("value"),
- )
-
- def server(input, output, session):
- @render.ui
- def value():
- return input.checkbox()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_checkbox()
- href: https://shiny.posit.co/py/api/ui.input_checkbox.html
- signature: ui.input_checkbox(id, label, value=False, *, width=None)
----
-
-:::{#component}
-:::
-
-## Details
-
-A checkbox creates a single checkbox that can be used to specify logical values.
-
-Follow these steps to add a checkbox to your app:
-
- 1. Add `ui.input_checkbox()` to the UI of your app to create a checkbox. Where you call this function will determine where the checkbox will appear within the app's layout.
-
- 2. Supply values to `ui.input_checkbox()`'s first two parameters (`id` and `label`) to specify the id and label of the checkbox. Optionally, set the `value` argument to either `True` or `False` to specify the initial value of the checkbox. By default, the checkbox has value `False` and is un-checked.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a checkbox:
-
- 1. Use `input.()` (e.g., `input.checkbox()`) to access the value of a checkbox. The server value of a checkbox is `True` if checked and `False` if not checked.
-
-See also: Checkbox Group([Checkbox](checkbox.qmd)
\ No newline at end of file
diff --git a/components/inputs/checkbox/app-core.py b/components/inputs/checkbox/app-core.py
new file mode 100644
index 00000000..8f84d8bb
--- /dev/null
+++ b/components/inputs/checkbox/app-core.py
@@ -0,0 +1,15 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_checkbox("checkbox", "Checkbox", False), # <<
+ ui.output_ui("value"),
+)
+
+
+def server(input, output, session):
+ @render.ui
+ def value():
+ return input.checkbox()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox/app-detail-preview.py b/components/inputs/checkbox/app-detail-preview.py
new file mode 100644
index 00000000..4b965679
--- /dev/null
+++ b/components/inputs/checkbox/app-detail-preview.py
@@ -0,0 +1,24 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.row(
+ ui.column(
+ 6,
+ ui.input_checkbox("checkbox", "Checkbox", True).add_class(
+ "mb-0 text-center"
+ ),
+ ),
+ ui.column(6, ui.output_ui("value").add_class("mb-0 text-center")),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+ )
+)
+
+
+def server(input, output, session):
+ @render.ui
+ def value():
+ return input.checkbox()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox/app-express.py b/components/inputs/checkbox/app-express.py
new file mode 100644
index 00000000..3dbc6d8d
--- /dev/null
+++ b/components/inputs/checkbox/app-express.py
@@ -0,0 +1,9 @@
+from shiny import render
+from shiny.express import input, ui
+
+ui.input_checkbox("checkbox", "Checkbox", False) # <<
+
+
+@render.ui
+def value():
+ return input.checkbox()
diff --git a/components/inputs/checkbox/app-preview.py b/components/inputs/checkbox/app-preview.py
new file mode 100644
index 00000000..e9b1b508
--- /dev/null
+++ b/components/inputs/checkbox/app-preview.py
@@ -0,0 +1,17 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_checkbox("x", "Checkbox Checkbox").add_class("mb-0"),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/checkbox/index.qmd b/components/inputs/checkbox/index.qmd
new file mode 100644
index 00000000..f91347d8
--- /dev/null
+++ b/components/inputs/checkbox/index.qmd
@@ -0,0 +1,49 @@
+---
+title: Checkbox
+sidebar: components
+appPreview:
+ file: components/inputs/checkbox/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/checkbox/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 150
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrNlmsB4wH1i7OMQDWAI1KqAFNLAOnbjx8iHwBhRxd3VSDkADEoABtWOABKZGQAYmQAHiyLCFkAATEISQYsM1lJOmQANwTDOE9kxFk0tLEKQwYIPggjCiw-CI8m2UJUClx0BBQwKlUKMABfAF0gA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm4uzjEA1gCNSAA87MC8fAODlQmRogGFvP0Cg6KIAMSgLVjgASiJkAGJkAB5i+0dDUnc3DyVQgDdMhThovNUc1U6IWTo2OXq5G1d3IiqKGqJs1lZOchzEcocAASluuSwlReQe5EarOBt5rcdkKQoFBgg+CBqscKTgw671TD0xTBsNbU5J-rkOiAxMAUXDoBAoYFwIIUMAAXwAukA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_checkbox()
+ href: https://shiny.posit.co/py/api/ui.input_checkbox.html
+ signature: ui.input_checkbox(id, label, value=False, *, width=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A checkbox creates a single checkbox that can be used to specify logical values.
+
+Follow these steps to add a checkbox to your app:
+
+ 1. Add `ui.input_checkbox()` to the UI of your app to create a checkbox. Where you call this function will determine where the checkbox will appear within the app's layout.
+
+ 2. Supply values to `ui.input_checkbox()`'s first two parameters (`id` and `label`) to specify the id and label of the checkbox. Optionally, set the `value` argument to either `True` or `False` to specify the initial value of the checkbox. By default, the checkbox has value `False` and is un-checked.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a checkbox:
+
+ 1. Use `input.()` (e.g., `input.checkbox()`) to access the value of a checkbox. The server value of a checkbox is `True` if checked and `False` if not checked.
+
+See also: Checkbox Group([Checkbox](../checkbox/index.qmd)
diff --git a/components/inputs/date-range-selector.qmd b/components/inputs/date-range-selector.qmd
deleted file mode 100644
index 528a08bc..00000000
--- a/components/inputs/date-range-selector.qmd
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: "Date Range Selector"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_date_range("x", ""),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f""
-
- app = App(app_ui, server, debug=True)
-
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Date Range Selector
- preview: |
- https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCOPqMmAZwAWnCNl4x+gpgEF0eJnUos4dHQFdO48WlQB9U0wC8TU1igBzOFZoAbUywAU4pkDHTgxFVGMyKzYKKzooCDd-MGjDeLdRfCYMjJ0ZMihBOwyAJgAGMoBaUoBGKuqMgEoMKBYWK0JPKBkZJNQyCoBWJhgADwqoCOImChH+wkoKOka8AKCnYgjwyJmyJIA3KG8xMAaViCCLphAMjq6ZDMQssD25CurS0qYAK2M8zhpsBUSOQFkCFoYmIdOC4IBVOBQYDIwSC6ExUGMBhkAL7iJotNq3bpJGCAiZkKY7ZGLRrmCQQAw0WSGPaGXxhCI6DZkLa5ODdTikBqIVaBAACXK2IqYor09MMGB2UoZTAOR18QqlFz0ZGMdHONAyIHZZAwKTiCTg6uApQAuljplMjRAtqaRObEg1gNU7dk6RZ0PZNOhfJYbJxeXQWXQGmAsTagA
- height: 380px
- code: |
- from datetime import date
-
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_date_range("daterange", "Date range", start="2020-01-01"), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.daterange()[0]} to {input.daterange()[1]}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_date_range
- href: https://shiny.posit.co/py/api/ui.input_date_range.html
- signature: ui.input_date_range(id, label, *, start=None, end=None, min=None, max=None, format='yyyy-mm-dd', startview='month', weekstart=0, language='en', separator=' to ', width=None, autoclose=True)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A date range selector allows you to select a pair of dates from two calendars.
-
-To add a date range selector to your app:
-
- 1. Add `ui.input_date_range()` to the UI of your app to create a date range selector. Where you call this function will determine where the date range selector will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_date_range()` to define the identifier and label of the daterange selector. `ui.input_date_range()` also includes various optional parameters, including `start` and `end`, which set the initial start and end dates.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a daterange selector:
-
- 1. Use `input.()` to access the value of a daterange selector (e.g., `input.daterange()`). The server value of a daterange selector is a tuple of date objects. You can access the individual tuple elements using square brackets and indices (e.g., `input.daterange()[0]`).
-
-
-See also: [Date Selector](date-selector.qmd)
diff --git a/components/inputs/date-range-selector/app-core.py b/components/inputs/date-range-selector/app-core.py
new file mode 100644
index 00000000..67f49adb
--- /dev/null
+++ b/components/inputs/date-range-selector/app-core.py
@@ -0,0 +1,16 @@
+
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date_range("daterange", "Date range", start="2020-01-01"), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.daterange()[0]} to {input.daterange()[1]}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/date-range-selector/app-detail-preview.py b/components/inputs/date-range-selector/app-detail-preview.py
new file mode 100644
index 00000000..f9ba575b
--- /dev/null
+++ b/components/inputs/date-range-selector/app-detail-preview.py
@@ -0,0 +1,21 @@
+## file: app.py
+
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date_range("daterange", "", start="2020-01-01").add_class(
+ "pt-5 mx-auto text-center"
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return f"{input.daterange()[0]} to {input.daterange()[1]}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/date-range-selector/app-express.py b/components/inputs/date-range-selector/app-express.py
new file mode 100644
index 00000000..c74477bb
--- /dev/null
+++ b/components/inputs/date-range-selector/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_date_range("daterange", "Date range", start="2020-01-01") # <<
+
+
+@render.text
+def value():
+ return f"{input.daterange()[0]} to {input.daterange()[1]}"
diff --git a/components/inputs/date-range-selector/app-preview.py b/components/inputs/date-range-selector/app-preview.py
new file mode 100644
index 00000000..db8833ac
--- /dev/null
+++ b/components/inputs/date-range-selector/app-preview.py
@@ -0,0 +1,16 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date_range("x", ""),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/date-range-selector/index.qmd b/components/inputs/date-range-selector/index.qmd
new file mode 100644
index 00000000..2788752f
--- /dev/null
+++ b/components/inputs/date-range-selector/index.qmd
@@ -0,0 +1,52 @@
+---
+title: Date Range Selector
+sidebar: components
+appPreview:
+ file: components/inputs/date-range-selector/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/date-range-selector/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 380
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD64qFTsMoEAOZwAFNLCOqrh5wvkS+ACJOcKJuniFsFFDCALy+AEwADBkAtOkAjDm5vgCUyMgAxMgAPJWWsgACYhCSDFhUqhSyknTIAG5QADaG3kWIsqWlYhSGDBDIdL4gthRY-lIxw8DpALoAvsgUpMiLEEbLq4GeXkXAubu+soSoFLjoCChgbRRgO1tAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQB0IAzAJ1JmQGcALASwl2Q8Y6UswrIAgpiLNqAEzjMiAVx4MGGdAH1VyALzJVOKAHM4WxgBtVcgBQNkjwzyx90yilrlQqW5lAgzezBvKn9AuDpCZCiAER84ZHCzKKIOCigxPSiAJgAGfIBaPIBGYpKogEoiZABiZAAeBocnI1IPd08qAA8KYIA3KGtIsGqGSvUIBgVGTkV+xVs3DyJ2ik60uA4OHnJKxBbHAAFZCAVmLB6KQ+QZ5EHh232bpyS4CmVmCGRGKJBlihYUKKAJBSrAPIAXQAvsgKKRkP8IJ0gQlknAnsASjCopMNJh9JJMLZNDoeJtmAtmBMINEwBRcOgECh6XBemBoZCgA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_date_range
+ href: https://shiny.posit.co/py/api/ui.input_date_range.html
+ signature: ui.input_date_range(id, label, *, start=None, end=None, min=None, max=None,
+ format='yyyy-mm-dd', startview='month', weekstart=0, language='en', separator='
+ to ', width=None, autoclose=True)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A date range selector allows you to select a pair of dates from two calendars.
+
+To add a date range selector to your app:
+
+ 1. Add `ui.input_date_range()` to the UI of your app to create a date range selector. Where you call this function will determine where the date range selector will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_date_range()` to define the identifier and label of the daterange selector. `ui.input_date_range()` also includes various optional parameters, including `start` and `end`, which set the initial start and end dates.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a daterange selector:
+
+ 1. Use `input.()` to access the value of a daterange selector (e.g., `input.daterange()`). The server value of a daterange selector is a tuple of date objects. You can access the individual tuple elements using square brackets and indices (e.g., `input.daterange()[0]`).
+
+
+See also: [Date Selector](../date-selector/index.qmd)
diff --git a/components/inputs/date-selector.qmd b/components/inputs/date-selector.qmd
deleted file mode 100644
index 14018afc..00000000
--- a/components/inputs/date-selector.qmd
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: "Date Selector"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_date("x", ""),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4 flex-column"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f""
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Date Selector
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAEygrIEt4nvVi6ZVuzgAdCOPqMmAZwAWnCNl4x+gpgEF0eJnUos4dHQFdO48WlQB9U0wC8TU1igBzOFZoAbUywAU4pkDHTgxFVGMyKzYKfzBosXwmUTBkgEoMKBYWK0JPKBkZWNQyAFoAViYYAA8SqAjiJgoq0sJKCjo0vACgp2II8MimsliANyhvBNSuiCCmEGTc-JlkxCSwEbkSgEYABh2mACtjGS4abBKScjaLtsMmcc4XCBLOChgZG6u6JlQasuSAL7idKZbKLAqxGDnOpkBpDT7tNLmCQQAw0WSGEaGXxhCI6PpkAY6GRwAqcUipRDdQIAAQJA2pTBpelRhgwQ0ZaKYYwmvkpjNmejIxjoM1xZAw8T5yIs6HsmnQvksNk4xMxhlSYABAF0gA
- height: 380px
- code: |
- from datetime import date
-
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_date("date", "Date"), #<<
- ui.output_text("value")
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return input.date()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_date
- href: https://shiny.posit.co/py/api/ui.input_date.html
- signature: ui.input_date(id, label, *, value=None, min=None, max=None, format='yyyy-mm-dd', startview='month', weekstart=0, language='en', width=None, autoclose=True, datesdisabled=None, daysofweekdisabled=None)
----
-
-:::{#component}
-:::
-
-## Details
-
-A date selector allows you to select a date from a calendar.
-
-To add a date selector to your app:
-
- 1. Add `ui.input_date()` to the UI of your app to create a date selector. Where you call this function will determine where the date selector will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_date()` to define the identifier and label of the date selector. `ui.input_date()` also includes various optional parameters, including `min` and `max`, which set the minimum and maximum allowed dates.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a date selector:
-
- 1. Use `input.()` to access the value of a daterange selector (e.g., `input.date()`). The server value of a date selector is a date object.
-
-
-See also: [Date Range Selector](date-range-selector.qmd)
\ No newline at end of file
diff --git a/components/inputs/date-selector/app-core.py b/components/inputs/date-selector/app-core.py
new file mode 100644
index 00000000..9057f042
--- /dev/null
+++ b/components/inputs/date-selector/app-core.py
@@ -0,0 +1,16 @@
+
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date("date", "Date"), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.date()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/date-selector/app-detail-preview.py b/components/inputs/date-selector/app-detail-preview.py
new file mode 100644
index 00000000..15c7da85
--- /dev/null
+++ b/components/inputs/date-selector/app-detail-preview.py
@@ -0,0 +1,19 @@
+## file: app.py
+
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date("date", "").add_class("pt-5 mx-auto text-center"),
+ ui.output_text("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return input.date()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/date-selector/app-express.py b/components/inputs/date-selector/app-express.py
new file mode 100644
index 00000000..16ab24cc
--- /dev/null
+++ b/components/inputs/date-selector/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_date("date", "Date") # <<
+
+
+@render.text
+def value():
+ return input.date()
diff --git a/components/inputs/date-selector/app-preview.py b/components/inputs/date-selector/app-preview.py
new file mode 100644
index 00000000..3d16cb7f
--- /dev/null
+++ b/components/inputs/date-selector/app-preview.py
@@ -0,0 +1,18 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_date("x", ""),
+ ui.output_text_verbatim("txt"),
+ {
+ "class": "vh-100 d-flex justify-content-center align-items-center px-4 flex-column"
+ },
+)
+
+
+def server(input, output, session):
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/date-selector/index.qmd b/components/inputs/date-selector/index.qmd
new file mode 100644
index 00000000..4cba72a7
--- /dev/null
+++ b/components/inputs/date-selector/index.qmd
@@ -0,0 +1,52 @@
+---
+title: Date Selector
+sidebar: components
+appPreview:
+ file: components/inputs/date-selector/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/date-selector/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 380
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD64qFQAU0sI6puibgCJO4bgCUyMgAxMgAPBGWsgACYhCSDFhUqhSyknTIAG5QADaGcM6BiLIhIWIUhgwQfBBGFFgeRYGyhKgUuOgIKGCpFGAAvgC6QA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQB0IAzAJ1JmQGcALASwl2Q8Y6UswrIAgpiLNqAEzjMiAVx4MGGdAH1VyALzJVOKAHM4WxgBtVcgBQNkjwzyx90yilrlQq9sN6o6QmQggBEfOCCASiJkAGJkAB5EhycjUg93TyoADwo-ADcoa0iwGIYo9QgGBUZORQLFWzcPIgyKLKIOOA4OHnIoxFTHAAFZCAVmLFyKYeRa5CKS20G5p2RZCmVmCEEILKwAuBWqjUx9SUxbTR0eLobFSohgsApcdAQUV7g8sABfAC6QA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_date
+ href: https://shiny.posit.co/py/api/ui.input_date.html
+ signature: ui.input_date(id, label, *, value=None, min=None, max=None, format='yyyy-mm-dd',
+ startview='month', weekstart=0, language='en', width=None, autoclose=True, datesdisabled=None,
+ daysofweekdisabled=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A date selector allows you to select a date from a calendar.
+
+To add a date selector to your app:
+
+ 1. Add `ui.input_date()` to the UI of your app to create a date selector. Where you call this function will determine where the date selector will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_date()` to define the identifier and label of the date selector. `ui.input_date()` also includes various optional parameters, including `min` and `max`, which set the minimum and maximum allowed dates.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a date selector:
+
+ 1. Use `input.()` to access the value of a daterange selector (e.g., `input.date()`). The server value of a date selector is a date object.
+
+
+See also: [Date Range Selector](../date-range-selector/index.qmd)
diff --git a/components/inputs/numeric-input.qmd b/components/inputs/numeric-input.qmd
deleted file mode 100644
index 2b05803b..00000000
--- a/components/inputs/numeric-input.qmd
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: "Numeric Input"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_numeric("x", "", value=100),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f""
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Numeric Input
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOtHQB9JUwC8TJVigBzOOpoAbJdIAUqpnb0cMXVArLqIC+HQ6EbkT3I+yvhMwcESAIwSMFzaUUwwUAAecQAMAJQYUNLS6oRmUCwsfqhkALQArAlJZVCuxEwUSeWElBR0wel4tvb6xK4ubk1uAG5yAEZQZHx+I1AWcJ3dEPZMIMH5hSzBiKFgI2xlEampTABWCizTNNhlJORtd21yTPMchhBlHBQwLE8PdCYqBqFWCAF9VJlsrlNkU-DBbnUyA1hv92p1VLIaKw5GM6FZnK4JP0yIMJCw4EUOKR0ogenYAAJSCCyOgYYb0phYphzBZWWmc1ZSMgKOgrQlkDAeLw+fmqNCoHSidBWBWaDjk3FydJgMEAXSAA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_numeric("numeric", "Numeric input", 1, min=1, max=10), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return input.numeric()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_numeric
- href: https://shiny.posit.co/py/api/ui.input_numeric.html
- signature: ui.input_numeric(id, label, value, *, min=None, max=None, step=None, width=None)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A numeric input control creates a way to specify a number.
-
-To add a numeric input control to your app:
-
- 1. Add `ui.input_numeric()` to the UI of your app to create a numeric input. Where you call this function will determine where the numeric input control will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_numeric()` to define the identifier and label of the numeric input. `ui.input_numeric()` also includes various optional parameters, including `min` and `max`, which set the minimum and maximum allowed values.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a numeric input control:
-
- 1. Use `input.()` (e.g., `input.numeric()`) to access the specified numeric value. The server value of a numeric input control is a numeric value.
-
-
diff --git a/components/inputs/numeric-input/app-core.py b/components/inputs/numeric-input/app-core.py
new file mode 100644
index 00000000..c5a95b03
--- /dev/null
+++ b/components/inputs/numeric-input/app-core.py
@@ -0,0 +1,15 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_numeric("numeric", "Numeric input", 1, min=1, max=10), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.numeric()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/numeric-input/app-detail-preview.py b/components/inputs/numeric-input/app-detail-preview.py
new file mode 100644
index 00000000..df1ffac3
--- /dev/null
+++ b/components/inputs/numeric-input/app-detail-preview.py
@@ -0,0 +1,19 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_numeric("numeric", "", 1, min=1, max=10).add_class(
+ "pt-5 mx-auto text-center"
+ ),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.numeric()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/numeric-input/app-express.py b/components/inputs/numeric-input/app-express.py
new file mode 100644
index 00000000..21e94908
--- /dev/null
+++ b/components/inputs/numeric-input/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_numeric("numeric", "Numeric input", 1, min=1, max=10) # <<
+
+
+@render.text
+def value():
+ return input.numeric()
diff --git a/components/inputs/numeric-input/app-preview.py b/components/inputs/numeric-input/app-preview.py
new file mode 100644
index 00000000..c71c52ee
--- /dev/null
+++ b/components/inputs/numeric-input/app-preview.py
@@ -0,0 +1,16 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_numeric("x", "", value=100),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/numeric-input/index.qmd b/components/inputs/numeric-input/index.qmd
new file mode 100644
index 00000000..c3c35292
--- /dev/null
+++ b/components/inputs/numeric-input/index.qmd
@@ -0,0 +1,48 @@
+---
+title: Numeric Input
+sidebar: components
+appPreview:
+ file: components/inputs/numeric-input/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/numeric-input/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6V+A07EAFNMiGnLj0Q8A5LykXPggjCl9kAEYiGG4AXhjkGChVRIAGAEpkZABiZAAeAstZAAExCEkGLCpVCMq4OmQANygAG0M4V0zEWRycsQpDBghQ8KxHYLdM2UJUClx0BBQwWoowAF8AXSA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKmiAvgNOxO5Decn7KhMihAHJBvsR8EG4UoUQAjEQw3LqpyDBQAB6ZAAwAlETIAMTIADyV9o6GpO4JmlS5HgBucgBGUBT8AW1QVnChJapFqhMQsnRsch0MNq7uRA0UCUSscKysnORFiLUOAAJSU3JYLYkQjsjTyANDNvuHN8hSFAoM10sUWF4+fiek3UmD0YkwNg02k4GzmcnGEDCYAouHQCBQyLgrTAAF8ALpAA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_numeric
+ href: https://shiny.posit.co/py/api/ui.input_numeric.html
+ signature: ui.input_numeric(id, label, value, *, min=None, max=None, step=None,
+ width=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A numeric input control creates a way to specify a number.
+
+To add a numeric input control to your app:
+
+ 1. Add `ui.input_numeric()` to the UI of your app to create a numeric input. Where you call this function will determine where the numeric input control will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_numeric()` to define the identifier and label of the numeric input. `ui.input_numeric()` also includes various optional parameters, including `min` and `max`, which set the minimum and maximum allowed values.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a numeric input control:
+
+ 1. Use `input.()` (e.g., `input.numeric()`) to access the specified numeric value. The server value of a numeric input control is a numeric value.
diff --git a/components/inputs/password-field.qmd b/components/inputs/password-field.qmd
deleted file mode 100644
index d7e0832a..00000000
--- a/components/inputs/password-field.qmd
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: "Password Field"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_password("x", "", placeholder="Enter password"),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4 flex-column"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f''
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Password Field
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKym1FBYsA7oNtlMC8ffzppIIkgyKYgmGwQvwCARiCASgwoaWlNQgtvFjtgsgBaAFYmGAAPEqh3YiYKKtLCSgo6dLx7R0NidzcPJo8ANzkAIygyPiLhqCs4Tu6HECC8gqDEWLBhthLkgAZ9pgArBRYpmmwSknI267a5JjmOYwgSjgoYFnvbuiZUGplIIAX1UGSyOTWPiK8Vq9UacGaP3a6VUaIgshorDkozoNlc7gkfTIAwkLDgPg4pDSiCWTAAAsSBnT6VIMXIMEM6ZimLN5jYaXTHJI4GQFHQILwIAMjKEAgL0ep0HpROgbBptBwyTi5GkwMCALpAA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_password("password", "Password", "mypassword1"), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return input.password()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_password
- href: https://shiny.posit.co/py/api/ui.input_password.html
- signature: ui.input_password(id, label, value='', *, width=None, placeholder=None)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A password field creates a text box for password entry.
-
-To add a password field to your app:
-
- 1. Add `ui.input_password()` to the UI of your app to create a password field. Where you call this function will determine where the password field will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_password()` to define the identifier and label of the passsword field. `ui.input_password()` also includes various optional parameters, including `value`, which set the initial value.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a password field:
-
- 1. Use `input.()` (e.g., `input.password()`) to access the value of the password field. The server value of a password field is a string.
-
diff --git a/components/inputs/password-field/app-core.py b/components/inputs/password-field/app-core.py
new file mode 100644
index 00000000..6edd6efb
--- /dev/null
+++ b/components/inputs/password-field/app-core.py
@@ -0,0 +1,15 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_password("password", "Password", "mypassword1"), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.password()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/password-field/app-detail-preview.py b/components/inputs/password-field/app-detail-preview.py
new file mode 100644
index 00000000..49c95d0c
--- /dev/null
+++ b/components/inputs/password-field/app-detail-preview.py
@@ -0,0 +1,20 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_password("password", "", "mypassword1").add_class(
+ "pt-5 mx-auto text-center"
+ ),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return input.password()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/password-field/app-express.py b/components/inputs/password-field/app-express.py
new file mode 100644
index 00000000..3e575559
--- /dev/null
+++ b/components/inputs/password-field/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_password("password", "Password", "mypassword1") # <<
+
+
+@render.text
+def value():
+ return input.password()
diff --git a/components/inputs/password-field/app-preview.py b/components/inputs/password-field/app-preview.py
new file mode 100644
index 00000000..5017592d
--- /dev/null
+++ b/components/inputs/password-field/app-preview.py
@@ -0,0 +1,18 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_password("x", "", placeholder="Enter password"),
+ ui.output_text_verbatim("txt"),
+ {
+ "class": "vh-100 d-flex justify-content-center align-items-center px-4 flex-column"
+ },
+)
+
+
+def server(input, output, session):
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/password-field/index.qmd b/components/inputs/password-field/index.qmd
new file mode 100644
index 00000000..9f2e044c
--- /dev/null
+++ b/components/inputs/password-field/index.qmd
@@ -0,0 +1,47 @@
+---
+title: Password Field
+sidebar: components
+appPreview:
+ file: components/inputs/password-field/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/password-field/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD66KFoDuQ8QAppYRy7deiXgAKTqyuDOL+yF4wuD6hbgCMXgCUyMgAxMgAPFmWsgACYhCSDFhUqhSyknTIAG5QADaGcO7JiLJpaWIUhgwQfBBGFDghYR7JsoSoFLEIKGDlFGAAvgC6QA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm9FFasA7kNtlMC8ffwZpIKIggAVvPwDI5CCYXBD48IBGIIBKImQAYmQAHiL7R0NSdzcPKgAPDwA3OQAjKAp+OzAGqCs4HIJVbNVhiFk6NjkmhhtXdyJKimqiVjgfTnJsxDKHAAEpUbksOopt5DHkbt6bTdPHZCkKBQYIPghqo1CA65H1TD0xTA2DTaTjLSZyIYQQioCipBAoMDHMAAXwAukA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_password
+ href: https://shiny.posit.co/py/api/ui.input_password.html
+ signature: ui.input_password(id, label, value='', *, width=None, placeholder=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A password field creates a text box for password entry.
+
+To add a password field to your app:
+
+ 1. Add `ui.input_password()` to the UI of your app to create a password field. Where you call this function will determine where the password field will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_password()` to define the identifier and label of the passsword field. `ui.input_password()` also includes various optional parameters, including `value`, which set the initial value.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a password field:
+
+ 1. Use `input.()` (e.g., `input.password()`) to access the value of the password field. The server value of a password field is a string.
diff --git a/components/inputs/radio-buttons.qmd b/components/inputs/radio-buttons.qmd
deleted file mode 100644
index 9e3ab806..00000000
--- a/components/inputs/radio-buttons.qmd
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: "Radio Buttons"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_radio_buttons(
- "radio",
- "Never gonna:",
- {"1": "Give you up", "2": "Let you down"},
- ).add_class("mb-0"),
- ui.output_ui("value"),
- {"class": "vh-100 d-flex flex-column justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @output
- @render.text
- def txt():
- return f''
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Radio Buttons
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOtHQB9JUwC8TJVigBzOOpoAbJdIAUqpnb0cMXVArLq6UaR2LqARq7JSFismW3tw5TAPL2JIiTDwu0iAJU9vJn8yQIgWONCIRPsQSIBGSMRQsAB5VDJvArL8SoAmcsqautImVqbIgGY2yI76pgGwAF94gvsASinw-WJXFzclGzAANygLOEi5hKZiojMoFlykSo22AFoSgAY7pmlr8zgADyZtjkMIa44KGAsa6ESgUOhMVBva4AFki41UM1UshorDkGzkVmcrgkSzIKwkLDgZ3qM0QBwAAlIILI6BglAdkUwtjsrKSDuEpGQFHQCliyBhot5Wao0KgdKJ0FZRZoOAS0XJERBVKoJgBdIA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_radio_buttons( #<<
- "radio", #<<
- "Radio buttons", #<<
- {"1": "Option 1", "2": "Option 2", "3": "Option 3"}, #<<
- ), #<<
- ui.output_ui("value"),
- )
-
- def server(input, output, session):
- @render.ui
- def value():
- return input.radio()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_radio_buttons
- href: https://shiny.posit.co/py/api/ui.input_radio_buttons.html
- signature: ui.input_radio_buttons(id, label, choices, *, selected=None, inline=False, width=None)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-Use a set of radio buttons to select an item from a list.
-
-To add radio buttons to your app:
-
- 1. Add `ui.input_radio_buttons()` to the UI of your app to create a set of radio buttons. Where you call this function will determine where the radio buttons will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_radio_buttons()` to define the identifier and label of the set of radio buttons.
-
- 3. Specify the value and label that accompanies each radio button using the `choices` parameter. `choices` can be either a list or a dictionary. If `choices` is a list, the list elements become the radio button values and labels. If `choices` is a dictionary, `ui.input_radio_buttons()` uses the dictionary keys as the button values and the dictionary values as the button labels.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a set of radio buttons:
-
- 1. Use `input.()` to access the value of a radio button set (e.g., `input.radio()`). The server value of a set of radio buttons is a string containing the selected value.
diff --git a/components/inputs/radio-buttons/app-core.py b/components/inputs/radio-buttons/app-core.py
new file mode 100644
index 00000000..c64d30c6
--- /dev/null
+++ b/components/inputs/radio-buttons/app-core.py
@@ -0,0 +1,19 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_radio_buttons( # <<
+ "radio", # <<
+ "Radio buttons", # <<
+ {"1": "Option 1", "2": "Option 2", "3": "Option 3"}, # <<
+ ), # <<
+ ui.output_ui("value"),
+)
+
+
+def server(input, output, session):
+ @render.ui
+ def value():
+ return input.radio()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/radio-buttons/app-detail-preview.py b/components/inputs/radio-buttons/app-detail-preview.py
new file mode 100644
index 00000000..98ee3428
--- /dev/null
+++ b/components/inputs/radio-buttons/app-detail-preview.py
@@ -0,0 +1,21 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_radio_buttons(
+ "radio",
+ "Radio buttons",
+ {"1": "Option 1", "2": "Option 2", "3": "Option 3"},
+ ),
+ ui.output_ui("value"),
+ {"class": "vh-100 d-flex align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @render.ui
+ def value():
+ return input.radio()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/radio-buttons/app-express.py b/components/inputs/radio-buttons/app-express.py
new file mode 100644
index 00000000..91169915
--- /dev/null
+++ b/components/inputs/radio-buttons/app-express.py
@@ -0,0 +1,14 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_radio_buttons( # <<
+ "radio", # <<
+ "Radio buttons", # <<
+ {"1": "Option 1", "2": "Option 2", "3": "Option 3"}, # <<
+) # <<
+
+
+@render.ui
+def value():
+ return input.radio()
diff --git a/components/inputs/radio-buttons/app-preview.py b/components/inputs/radio-buttons/app-preview.py
new file mode 100644
index 00000000..49b8e466
--- /dev/null
+++ b/components/inputs/radio-buttons/app-preview.py
@@ -0,0 +1,23 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_radio_buttons(
+ "radio",
+ "Never gonna:",
+ {"1": "Give you up", "2": "Let you down"},
+ ).add_class("mb-0"),
+ ui.output_ui("value"),
+ {
+ "class": "vh-100 d-flex flex-column justify-content-center align-items-center px-4"
+ },
+)
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def txt():
+ return ""
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/radio-buttons/index.qmd b/components/inputs/radio-buttons/index.qmd
new file mode 100644
index 00000000..2c3b54c5
--- /dev/null
+++ b/components/inputs/radio-buttons/index.qmd
@@ -0,0 +1,50 @@
+---
+title: Radio Buttons
+sidebar: components
+appPreview:
+ file: components/inputs/radio-buttons/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/radio-buttons/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6DKOM6k7AI2MVyrABTJkAMTIADzBsv7+0mCOzqRRRIEhYRARyFEASk4uyB4UXhCs8f5BoeERIFEAjFEoUQDy6BQuKdWEaWAATDXtDU3kyF1tUQDM3fWNzcijYAC+CSXJAJTFSZayAAJiEJIMWGayknTIAG5QADaGcD6LiGX+YhSGDCm2FFgxLteybWAUuOgIFC-NQUWYAXSAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKmhlGmdSmgEbuFOSsNg4AxMgAPFH2jvHKYF4+pIlEyJExcfEOiQBK3r7IgRTBEKxpEdGxEDmOIIkAjIkoiQDy6BS+tc2EyIkATC39YB1d5MhDfYkAzMPtnd3Ic2AAvumZNfEAlBvV2U5YpO5uHkp2YABuUFZwibuq26rPELJ0bHKXcjau7kTHFFORFYcFYrG620QBwAAlJXnIsEoDm9kNdbjZIQd4lIKAoGLVfhQsMlfBiXupMHoxJgbBptJxgZ85E8IH0wBRcOgECh2XAAB4UNYAXSAA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_radio_buttons
+ href: https://shiny.posit.co/py/api/ui.input_radio_buttons.html
+ signature: ui.input_radio_buttons(id, label, choices, *, selected=None, inline=False,
+ width=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+Use a set of radio buttons to select an item from a list.
+
+To add radio buttons to your app:
+
+ 1. Add `ui.input_radio_buttons()` to the UI of your app to create a set of radio buttons. Where you call this function will determine where the radio buttons will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_radio_buttons()` to define the identifier and label of the set of radio buttons.
+
+ 3. Specify the value and label that accompanies each radio button using the `choices` parameter. `choices` can be either a list or a dictionary. If `choices` is a list, the list elements become the radio button values and labels. If `choices` is a dictionary, `ui.input_radio_buttons()` uses the dictionary keys as the button values and the dictionary values as the button labels.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a set of radio buttons:
+
+ 1. Use `input.()` to access the value of a radio button set (e.g., `input.radio()`). The server value of a set of radio buttons is a string containing the selected value.
diff --git a/components/inputs/select-multiple.qmd b/components/inputs/select-multiple.qmd
deleted file mode 100644
index 07d90920..00000000
--- a/components/inputs/select-multiple.qmd
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: "Select (Multiple)"
-sidebar: components
-previewapp: |
- from shiny import App, Inputs, Outputs, Session, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select(
- "select",
- "",
- {
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}
- },
- multiple=True
- ),
- ui.output_text("value"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input: Inputs, output: Outputs, session: Session):
- @render.text
- def value():
- return f""
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Select (Multiple)
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZG0wAxAA8wfaOEcpgXj5+URIhYRARkWAAyt6+wsSoZBykLEwARt7EAO6I8UGh4SlMIFEAjCJRiExRAMJsxByEcEzNVU0AQq3tYF09fQOj+OONHWOd3b39C1EAvgk1yXVMMAoWeag+ugAqdAr9ibVMAJTbSRGGxO5uHhQAHv5RAG5QVjgUQeqjuqlUshorDkvzkNlc7gkrzI7wkXhYLHyEDulV2DgAAlIILI6BgvmRbpCmP9ATYcbcIlIyAo6MkaFEQAiyBgYlk6RsouDoOg9KJ0DYNNoOGiYXI7mANgBdIA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select( #<<
- "select", #<<
- "Select options below:", #<<
- {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- multiple=True #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.select()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_select
- href: https://shiny.posit.co/py/api/ui.input_select.html
- signature: ui.input_select(id, label, choices, *, selected=None, multiple=False, selectize=False, width=None, size=None)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Select list with grouped choices
- description: To group the choices into categories, supply the `choices` argument with a dictionary of dictionaries. `ui.input_select()` will use the top-level keys as group labels.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZG0wAxAA8wfaOEcpgXj5+URIhYRARkWAAyt6+wsSoZBykLEwARt7EAO6I8UGh4SlMINVJdXVRAIxRiPVtIh1MUQDCbMQchHBMrT34fWCtAEK9A0MjY3NVbf0LYIPDo+MbYAC+CTXJzakATL0gUeeTnYs7Y7drYOfzSNPby0xvL+f79y2S12-yiB0atRSRwhpzqMAUFjyqB8ugAKnQFGNEpCAJTHJqOQzEdxuDwUAAe-iiADcoFY4FE8aocapVLIaKw5NS5DZXO4JMSyKSJF4WCx8hAcZVYUwAAJSCCyOgYClkSHspi0+k2KWQiJSMgKOjJGhREB8sgYGJZHUHKKs6DoPSidA2DTaDgirlyHGHAC6QA
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select( #<<
- "select", #<<
- "Select options below:", #<<
- {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- multiple=True #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.select()}"
-
- app = App(app_ui, server)
-
----
-
-:::{#component}
-:::
-
-## Details
-A select list creates a way to select one or more items from a list.
-
-To add a select list that allows you to select multiple items to your app:
-
- 1. Add `ui.input_select()` to the UI of your app to create a select list. Where you call this function will determine where the select list appears within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_select()` to define the identifier and label of the select list.
-
- 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_select()` uses the dictionary keys as the list values and the dictionary values as the list labels.
-
- You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
-
- 4. Set the `multiple` parameter to `True` to allow the user to select multiple items at once. By default, `multiple` is `False`.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a select list:
-
- 1. Use `input.()` (e.g., `input.select()`) to access the selected value(s). The server value of a select list is a list of strings.
-
-See also: [Select (Single)](select-single.qmd) and [Selectize (Multiple)](selectize-multiple.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/inputs/select-multiple/app-core.py b/components/inputs/select-multiple/app-core.py
new file mode 100644
index 00000000..d645da64
--- /dev/null
+++ b/components/inputs/select-multiple/app-core.py
@@ -0,0 +1,20 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select( # <<
+ "select", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.select()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-multiple/app-express.py b/components/inputs/select-multiple/app-express.py
new file mode 100644
index 00000000..b4977990
--- /dev/null
+++ b/components/inputs/select-multiple/app-express.py
@@ -0,0 +1,15 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_select( # <<
+ "select", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.select()}"
diff --git a/components/inputs/select-multiple/app-preview.py b/components/inputs/select-multiple/app-preview.py
new file mode 100644
index 00000000..5fdffc84
--- /dev/null
+++ b/components/inputs/select-multiple/app-preview.py
@@ -0,0 +1,24 @@
+from shiny import App, Inputs, Outputs, Session, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select(
+ "select",
+ "",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ multiple=True,
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+ @render.text
+ def value():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-core.py b/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-core.py
new file mode 100644
index 00000000..d645da64
--- /dev/null
+++ b/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-core.py
@@ -0,0 +1,20 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select( # <<
+ "select", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.select()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-express.py b/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-express.py
new file mode 100644
index 00000000..b4977990
--- /dev/null
+++ b/components/inputs/select-multiple/app-variation-select-list-with-grouped-choices-express.py
@@ -0,0 +1,15 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_select( # <<
+ "select", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.select()}"
diff --git a/components/inputs/select-multiple/index.qmd b/components/inputs/select-multiple/index.qmd
new file mode 100644
index 00000000..2b558ae7
--- /dev/null
+++ b/components/inputs/select-multiple/index.qmd
@@ -0,0 +1,76 @@
+---
+title: Select (Multiple)
+sidebar: components
+appPreview:
+ file: components/inputs/select-multiple/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/select-multiple/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCgApkyAMTIAPH6yXl7SYI4ubqFEPv6BEMHIoQDKzq4ipOgUnOTaAEbOpADuiFFevgFBwSChAIwAgqEooQDC7KScxHDI9aW1AEKNiWCt7Z3dA4RDNc2DLW0dXdOhAL7R5XEJMIZOWeguALwAKgyGcGuxsgCUZRcQlgACYhCSDFhUqhSyknTIAG5QTlO7kuJXiwTEFEMDHidFCIFsFCw4TSwOWoVkkzAFFw6AQKCxagoYGWAF0gA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFGw4AxMgAPCH2jpHKYF4+ftFEyMFhEZEO0QDK3r4ipOgUnOSsyABG3qQA7ogJQaHhEGmOINEAjKLRKNEAwuyknMRwyG01rQBCHcjdvf2DLeOEk2AtXRNTfQNDK2AAvonJ9Y0OMAoWBeg+ugAqDApwe3WpyACU9ykNjoak7m4eVAAe-miADcoFY4NEXqonqoYRBZHQ2HIgXIbK53EQvhQfkQvKxWIUIE9qu8HAABKRwuRYf4UR7w5AgsE2ImPSJSCgKBgNOjREBoihYWI5ZnbaKw9SYPRiTA2DTaTg4pFyaEQBZgCi4dAIFDquAAnYAXSAA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_select
+ href: https://shiny.posit.co/py/api/ui.input_select.html
+ signature: ui.input_select(id, label, choices, *, selected=None, multiple=False,
+ selectize=False, width=None, size=None)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/inputs/select-multiple/
+ contents:
+ - title: Select list with grouped choices
+ description: To group the choices into categories, supply the `choices` argument
+ with a dictionary of dictionaries. `ui.input_select()` will use the top-level
+ keys as group labels.
+ apps:
+ - title: Preview
+ file: app-variation-select-list-with-grouped-choices-core.py
+ - title: Express
+ file: app-variation-select-list-with-grouped-choices-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCgApkyAMTIAPH6yXl7SYI4ubqFEPv6BEMHIoQDKzq4ipOgUnOTaAEbOpADuiFFevgFBwSChAIwAgqEooQDC7KScxHDI9aW1AEKNiWCt7Z3dA4RDNc2DLW0dXdOhAL7R5XEJMIZOWeguALwAKgyGcGuxsgCUZRcQlgACYhCSDFhUqhSyknTIAG5QTlO7kuJXiwTEFEMDHidFCIFsFCw4TSwOWoVkkzAFFw6AQKCxagoYGWAF0gA
+ - title: Core
+ file: app-variation-select-list-with-grouped-choices-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFGw4AxMgAPCH2jpHKYF4+ftFEyMFhEZEO0QDK3r4ipOgUnOSsyABG3qQA7ogJQaHhEGmOINEAjKLRKNEAwuyknMRwyG01rQBCHcjdvf2DLeOEk2AtXRNTfQNDK2AAvonJ9Y0OMAoWBeg+ugAqDApwe3WpyACU9ykNjoak7m4eVAAe-miADcoFY4NEXqonqoYRBZHQ2HIgXIbK53EQvhQfkQvKxWIUIE9qu8HAABKRwuRYf4UR7w5AgsE2ImPSJSCgKBgNOjREBoihYWI5ZnbaKw9SYPRiTA2DTaTg4pFyaEQBZgCi4dAIFDquAAnYAXSAA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+A select list creates a way to select one or more items from a list.
+
+To add a select list that allows you to select multiple items to your app:
+
+ 1. Add `ui.input_select()` to the UI of your app to create a select list. Where you call this function will determine where the select list appears within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_select()` to define the identifier and label of the select list.
+
+ 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_select()` uses the dictionary keys as the list values and the dictionary values as the list labels.
+
+ You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
+
+ 4. Set the `multiple` parameter to `True` to allow the user to select multiple items at once. By default, `multiple` is `False`.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a select list:
+
+ 1. Use `input.()` (e.g., `input.select()`) to access the selected value(s). The server value of a select list is a list of strings.
+
+See also: [Select (Single)](../select-single/index.qmd) and [Selectize (Multiple)](../selectize-multiple/index.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
+
+:::{#variations}
+:::
diff --git a/components/inputs/select-single.qmd b/components/inputs/select-single.qmd
deleted file mode 100644
index e8d1c47a..00000000
--- a/components/inputs/select-single.qmd
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: "Select (Single)"
-sidebar: components
-previewapp: |
- from shiny import App, Inputs, Outputs, Session, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select(
- "select",
- "",
- {
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}
- },
- ),
- ui.output_text("value"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input: Inputs, output: Outputs, session: Session):
- @output
- @render.text
- def value():
- return f""
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Select List
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZG0wAxAA8wfaOEcpgXj5+URIhYRARkWAAyt6+wlDJxKhkHKRMAEbexADuiPFBoeEpTCBRAIwiUYhMUQDCbMQchHBMLdXNAEJtHWDdvf2DY-gTTZ3jXT19A4tRAL4JtcmOAJQ7SRGGxO5uHhQAHv5RAG5QVnBRh6r7qqqyNKxyd3I2rncEjOZAuEi8LBYhQg+yqewcAAEpBBZHQMNcyHUmF8mA8njZYViIlIyAo6MkaFEQICyBgYlkCZsoh9oOg9KJ0DYNNoOODfnJ9mBNgBdIA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select( #<<
- "select", #<<
- "Select an option below:", #<<
- {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.select()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_select
- href: https://shiny.posit.co/py/api/ui.input_select.html
- signature: ui.input_select(id, label, choices, *, selected=None, multiple=False, selectize=False, width=None, size=None)
-
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Select list with grouped choices
- description: To group the choices into categories, supply the `choices` argument with a dictionary of dictionaries. `ui.input_select()` will use the top-level keys as group labels.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZG0wAxAA8wfaOEcpgXj5+URIhYRARkWAAyt6+wlDJxKhkHKRMAEbexADuiPFBoeEpTCA1SfX1UQCMUYgN7SKdTFEAwmzEHIRwTG29+P1gbQBCfYPDo+Pz1e0Di2BDI2MTm2AAvgm1yS2pAEx9IFEXU11Lu+N362AXC0gzOytM768XBwe22WewBUUOTTqKWOkLODgAlCdmo5DMR3G4PBQAB7+KIANygVjgUURqnhqlUshorDkeLkNlc7gkaLIGIkXhYLEKEHhVThTAAAlIILI6BhsWQoVSmASiTZeVCIlIyAo6MkaFEQIyyBgYll5YcohToOg9KJ0DYNNoOOzaXJ4UcALpAA
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_select( #<<
- "select", #<<
- "Select an option below:", #<<
- { #<<
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"} #<<
- }, #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.select()}"
-
- app = App(app_ui, server)
----
-
-:::{#component}
-:::
-
-## Details
-
-A select list creates a way to select one or more items from a list.
-
-To use a select list that allows you to select a single item:
-
- 1. Add `ui.input_select()` to the UI of your app to create a select list. Where you call this function will determine where the select list appears within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_select()` to define the identifier and label of the select list.
-
- 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_select()` uses the dictionary keys as the list values and the dictionary values as the list labels.
-
- You can also supply with `choices` a dictionary of dictionaries. `ui.input_select()` will use the top-level keys as group labels. See the Select list with grouped choices variation.
-
- 4. The `multiple` parameter controls whether you can select multiple items at once. By default, `multiple` is `False`.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a select list:
-
- 1. Use `input.()` (e.g., `input.select()`) to access the selected value. The server value of a select list is a list of strings. When `multiple=False`, this list will have length 1.
-
-See also: [Select (Multiple)](select-multiple.qmd) and [Selectize (Multiple)](selectize-multiple.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/inputs/select-single/app-core.py b/components/inputs/select-single/app-core.py
new file mode 100644
index 00000000..9cdeffb8
--- /dev/null
+++ b/components/inputs/select-single/app-core.py
@@ -0,0 +1,19 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select( # <<
+ "select", # <<
+ "Select an option below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.select()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-single/app-express.py b/components/inputs/select-single/app-express.py
new file mode 100644
index 00000000..9946ccb8
--- /dev/null
+++ b/components/inputs/select-single/app-express.py
@@ -0,0 +1,14 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_select( # <<
+ "select", # <<
+ "Select an option below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.select()}"
diff --git a/components/inputs/select-single/app-preview.py b/components/inputs/select-single/app-preview.py
new file mode 100644
index 00000000..8fd1b49d
--- /dev/null
+++ b/components/inputs/select-single/app-preview.py
@@ -0,0 +1,21 @@
+from shiny import App, Inputs, Outputs, Session, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select(
+ "select",
+ "",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+ pass
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-single/app-variation-select-list-with-grouped-choices-core.py b/components/inputs/select-single/app-variation-select-list-with-grouped-choices-core.py
new file mode 100644
index 00000000..25d72753
--- /dev/null
+++ b/components/inputs/select-single/app-variation-select-list-with-grouped-choices-core.py
@@ -0,0 +1,22 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_select(
+ "select",
+ "Select an option below:",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ ),
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.select()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/select-single/app-variation-select-list-with-grouped-choices-express.py b/components/inputs/select-single/app-variation-select-list-with-grouped-choices-express.py
new file mode 100644
index 00000000..c8e3a5ea
--- /dev/null
+++ b/components/inputs/select-single/app-variation-select-list-with-grouped-choices-express.py
@@ -0,0 +1,16 @@
+from shiny import render
+from shiny.express import input, ui
+
+ui.input_select(
+ "select",
+ "Select an option below:",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+)
+
+
+@render.text
+def value():
+ return f"{input.select()}"
diff --git a/components/inputs/select-single/index.qmd b/components/inputs/select-single/index.qmd
new file mode 100644
index 00000000..4d8c69c8
--- /dev/null
+++ b/components/inputs/select-single/index.qmd
@@ -0,0 +1,75 @@
+---
+title: Select (Single)
+sidebar: components
+appPreview:
+ file: components/inputs/select-single/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/select-single/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCgApkyAMTIAPH6yXl7SYI4ubqFEPv6BEMHIoQDKzq4iUPGk6BSc5MgARs6kAO6IUV6+AUHBIKEAjACCoSihAMLspJzEcMiN5fUAQs2JYO2d3b1DhCN1rcNtHV09s6EAvtGVcQCUFbGWsgACYhCSDFhUqhSyknTIAG5QToZw7ltl8cFiFIYM8XShIFsFCw4TSr1WoVk0zAFFw6AQKBhagoYFWAF0gA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFGw4AxMgAPCH2jpHKYF4+ftFEyMFhEZEO0QDK3r4iUBDIpOgUnOTIAEbepADuiAlBoeH5aQ4g0QCMotEo0QDC7KScxHDIHXXtAEJdyL39g8Ntk4TTYG09UzMDQyNrYAC+icmNkQCUBw2pTlik7m4eVAAe-tEAblBWcNGnqseqvxCydDYcmechsrncRGuFFuRC8rFYJQgx1qTQcAAEpP85FgHhQLgDkK93jZkRdIlIKAoGPk6NEQOCKFhYjkSbton91Jg9GJMDYNNpOLDgXIfhAlmAKLh0AgUBK4I89gBdIA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_select
+ href: https://shiny.posit.co/py/api/ui.input_select.html
+ signature: ui.input_select(id, label, choices, *, selected=None, multiple=False,
+ selectize=False, width=None, size=None)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/inputs/select-single/
+ contents:
+ - title: Select list with grouped choices
+ description: To group the choices into categories, supply the `choices` argument
+ with a dictionary of dictionaries. `ui.input_select()` will use the top-level
+ keys as group labels.
+ apps:
+ - title: Express
+ file: app-variation-select-list-with-grouped-choices-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrNlmsB4wH1WcADZxiFABSzkX5NLAPnrr4Ent6+AMpOLiJQEMik6BSc5MgARk6kAO6IQSFeILneXr4AjL4o+WDFAIJlPmAAwuyknMRwyNVBdcUAQrW+jc2t7b2EXfV9DU0tbcXjYAC+wbGFoWAATLUVazW0-VND252+ayMoe4NtJ0frc2eTF8hrc4sFLxAAlBYQsgACYhCSBhYKiqCiySR0ZAANygjkMcDc72yyy8YgohgYsTovhANgoWH8UUR818slGYAouHQCBQFLUFAWAF0gA
+ - title: Core
+ file: app-variation-select-list-with-grouped-choices-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFOxCOQcjKYF4+fqEE9sEOoQDK3r4iUIGk6BSc5MgARt6kAO6IUTGxIKWxjqEAjKEo5WDVonUhYADC7KScxHDITVGt1QBCLaEdXT19I4SDbaPtnd291XNgAL7RgZVBoQBMLQ27zbRji5NHA3vTKKcTvbvTRHurNwt3yLurGxVB31sOAEpNkFDKR3G4PFQAB7+UIANygVjgoSBqgBqgxEFkdDYcjhchsrncRDBFAhRC8rFYWQgAOK-2QAAEpFi5FhoRQKtjkAikTY6T9HFIKAoGIE6KEQESKFhwsl+WtQpj1Jg9GJMDYNNpOBS8XJ0RAZmAKLh0AgUMa4DD1gBdIA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A select list creates a way to select one or more items from a list.
+
+To use a select list that allows you to select a single item:
+
+ 1. Add `ui.input_select()` to the UI of your app to create a select list. Where you call this function will determine where the select list appears within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_select()` to define the identifier and label of the select list.
+
+ 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_select()` uses the dictionary keys as the list values and the dictionary values as the list labels.
+
+ You can also supply with `choices` a dictionary of dictionaries. `ui.input_select()` will use the top-level keys as group labels. See the Select list with grouped choices variation.
+
+ 4. The `multiple` parameter controls whether you can select multiple items at once. By default, `multiple` is `False`.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a select list:
+
+ 1. Use `input.()` (e.g., `input.select()`) to access the selected value. The server value of a select list is a list of strings. When `multiple=False`, this list will have length 1.
+
+See also: [Select (Multiple)](../select-multiple/index.qmd) and [Selectize (Multiple)](../selectize-multiple/index.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
+
+:::{#variations}
+:::
diff --git a/components/inputs/selectize-multiple.qmd b/components/inputs/selectize-multiple.qmd
deleted file mode 100644
index 9cb4fee4..00000000
--- a/components/inputs/selectize-multiple.qmd
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: "Selectize (Multiple)"
-sidebar: components
-previewapp: |
- from shiny import App, Inputs, Outputs, Session, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize(
- "select",
- "",
- {
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}
- },
- multiple=True
- ),
- ui.output_text("value"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input: Inputs, output: Outputs, session: Session):
- @output
- @render.text
- def value():
- return f""
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Selectize (Multiple)
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZDgBecDZMAMQAPOH2jjHKYF4+foFwcRIRURAxsWAAyt6+wsSo-qQsTABG3sQA7qlhkdFZTCBxAIwicYhMcQDCbMQchHBM7XVtAEKd3WB9A0Mjk-jTrT1Tvf2DwytxAL54jVkwChb+qD66ACp0CsPpBwCUaQ2ZjobE7m4eFAAeZHZgADcoFYUmBHqp7qpVLIaKw5AC5DZXO4JO8yJ8JF4WCwOKR7ogDgABKQQWR0DA-MgHGFMIEgmz4g4xKRkBR0TI0OIgZFkDAJArJBk7OJQ6DoPSidA2DTaDiY+Fye5gHYAXSAA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize( #<<
- "selectize", #<<
- "Select options below:", #<<
- {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- multiple=True #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.selectize()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_selectize
- href: https://shiny.posit.co/py/api/ui.input_selectize.html
- signature: ui.input_selectize(id, label, choices, *, selected=None, multiple=False, width=None)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Selectize with grouped choices
- description: To group the choices into categories, supply the `choices` argument with a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZDgBecDZMAMQAPOH2jjHKYF4+foFwcRIRURAxsWAAyt6+wsSo-qQsTABG3sQA7oipYZHRWUwgDRnNzXEAjHGILd0ivUxxAMJsxByEcExdg-jDYF0AQkOj45PTy-XdI6tgYxNTM7tgAL5pjZkd2QBMQyBxN3N9a4fTT9tgNytICwcbTG+nxuJxe+3WRxBcVObSaWXOsKuzRgCgs-lQPl0ABU6Appuk4QBKC7tRyGYjuNweCgADzIdjAADcoFYUmBiapCapVLIaKw5Iy5DZXO4JBSyFSJF4WCwOKRCXUkUwAAJSCCyOgYWlkOG8pjM1k2BVwmJSMgKOiZGhxEAisgYBIFZJG05xbnQdB6UToGwabQcKUCuSEs4AXSAA
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize( #<<
- "selectize", #<<
- "Select options below:", #<<
- { #<<
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"} #<<
- }, #<<
- multiple=True #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.selectize()}"
-
- app = App(app_ui, server)
----
-
-:::{#component}
-:::
-
-## Details
-
-A selectize list creates a way to select one or more items from a list.
-
-To use a selectize list that allows you to select multiple items:
-
- 1. Add `ui.input_selectize()` to the UI of your app to create a selectize list. Where you call this function will determine where the selectize list appears within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_selectize()` to define the identifier and label of the select list.
-
- 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_selectize()` uses the dictionary keys as the list values and the dictionary values as the list labels.
-
- You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
-
- 4. The `multiple` parameter controls whether you can select multiple items at once. Set `multiple=True` to allow the user to select multiple values.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a selectize list:
-
- 1. Use `input.()` (e.g., `input.selectize()`) to access the selected value(s). The server value of a selectize list is a list of strings.
-
-See also: [Selectize (Single)](selectize-single.qmd) and [Select (Multiple)](select-multiple.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/inputs/selectize-multiple/app-core.py b/components/inputs/selectize-multiple/app-core.py
new file mode 100644
index 00000000..ba840547
--- /dev/null
+++ b/components/inputs/selectize-multiple/app-core.py
@@ -0,0 +1,20 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize( # <<
+ "selectize", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.selectize()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-multiple/app-express.py b/components/inputs/selectize-multiple/app-express.py
new file mode 100644
index 00000000..896c9096
--- /dev/null
+++ b/components/inputs/selectize-multiple/app-express.py
@@ -0,0 +1,15 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_selectize( # <<
+ "selectize", # <<
+ "Select options below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ multiple=True, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.selectize()}"
diff --git a/components/inputs/selectize-multiple/app-preview.py b/components/inputs/selectize-multiple/app-preview.py
new file mode 100644
index 00000000..63cc668a
--- /dev/null
+++ b/components/inputs/selectize-multiple/app-preview.py
@@ -0,0 +1,25 @@
+from shiny import App, Inputs, Outputs, Session, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize(
+ "select",
+ "",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ multiple=True,
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+ @output
+ @render.text
+ def value():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-core.py b/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-core.py
new file mode 100644
index 00000000..3facca34
--- /dev/null
+++ b/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-core.py
@@ -0,0 +1,23 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize( # <<
+ "selectize", # <<
+ "Select options below:", # <<
+ { # <<
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}, # <<
+ }, # <<
+ multiple=True, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.selectize()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-express.py b/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-express.py
new file mode 100644
index 00000000..4cdcb0e1
--- /dev/null
+++ b/components/inputs/selectize-multiple/app-variation-selectize-with-grouped-choices-express.py
@@ -0,0 +1,18 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_selectize( # <<
+ "selectize", # <<
+ "Select options below:", # <<
+ { # <<
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}, # <<
+ }, # <<
+ multiple=True, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.selectize()}"
diff --git a/components/inputs/selectize-multiple/index.qmd b/components/inputs/selectize-multiple/index.qmd
new file mode 100644
index 00000000..c30eba97
--- /dev/null
+++ b/components/inputs/selectize-multiple/index.qmd
@@ -0,0 +1,77 @@
+---
+title: Selectize (Multiple)
+sidebar: components
+appPreview:
+ file: components/inputs/selectize-multiple/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/selectize-multiple/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCpwBecABTJkAYmQAHiDZPz9pMEcXN084SKIA4NCIcORIgGVnVxFSdHdybQAjZ1IAd0QEv0CQsPCQSIBGAEFIlEiAYXZSTmI4ZBaqpoAhNvSwLp6+gdHCccaOsc7u3v6FyIBfRJqUtJhDJ3d0FwBeABUGQzht5NkASmrbiEsAATEISQYsKlUKWUk6MgAG5QJxXbx3SqpcJiCiGBipOiREC2ChYaI5OIQjaRWRzMAUXDoBAoAlqChgDYAXSAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFTgBecDYOAMTIADwR9o6xymBePn6BcPFEyOFRMbEO8QDK3r4ipOj+5KzIAEbepADuiGlhkdEQOY4g8QCMovEo8QDC7KScxHDI3Y1dAEK9yANDI2OdM4RzYJ39s-PDo+ObYAC+6ZktbQ4wChb+6D66ACoMCnDHzdnIAJQvWa2OhqTubg8VAAHhQ7GAAG5QKypMCfVTvVRIiCyOhsOQQuQ2VzuIj-CiAoheVisTjkd4NH4OAACUhRciwIIob1RyChMJsFLesSkFAUDFadHiIBxFCwiSKKU5B3iyPUmD0YkwNg02k4RIxckREFWYAouHQCBQergoMOAF0gA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_selectize
+ href: https://shiny.posit.co/py/api/ui.input_selectize.html
+ signature: ui.input_selectize(id, label, choices, *, selected=None, multiple=False,
+ width=None)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/inputs/selectize-multiple/
+ contents:
+ - title: Selectize with grouped choices
+ description: To group the choices into categories, supply the `choices` argument
+ with a dictionary of dictionaries. `ui.input_selectize()` will use the top-level
+ keys as group labels.
+ apps:
+ - title: Preview
+ file: app-variation-selectize-with-grouped-choices-core.py
+ - title: Express
+ file: app-variation-selectize-with-grouped-choices-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCpwBecABTJkAYmQAHiDZPz9pMEcXN084SKIA4NCIcORIgGVnVxFSdHdybQAjZ1IAd0QEv0CQsPCQauS6tIiwAEZIlBBItoBBTvSwAGF2Uk5iOGQ+qp6AIQHIkbGJqfnCQbahheHR8cnNyIBfRJqUlvDIgCYB7rBL-tpF3ZX7mbu1lCflycu1oiuto8dt9kJdAcdGrVUuEIUkoWkYIYnO50C4ALwAFQYhjgJyaEAAlJCUpYAAJiCCSBhYKiqCiySR0ZAANygThx3gJlWhfjEFEMDFSdEiIFsFCw0RycU5h0isnWYAouHQCBQirUFDAhwAukA
+ - title: Core
+ file: app-variation-selectize-with-grouped-choices-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFTgBecDYOAMTIADwR9o6xymBePn6BcPFEyOFRMbEO8QDK3r4ipOj+5KzIAEbepADuiGlhkdEQOY4gTVmtbTnxAIzxKCD9ooPI8QDC7KScxHDIfaOE42B9AEJjk9Oz8+uN-RObYFMzcwuHYAC+6ZktPb1gAExjw09LKFun849LRPGPG1onx2yAB+yeFw+x22Z0eF2unTuPQRGWa2RyMAUFn86B8ugAKgwFHAbmjug4AJSkrqxQykdxuDxUAAeFDsYAAblArKkwFTVBTVEKILI6Gw5By5DZXO4iPSKIyiF5WKxOOQKQ1ycgAAJSEVyLAsijo0XILk8mwa9GxKQUBQMVp0eIgGUULCJIopS2XeLC9SYPRiTA2DTaThKiVyQUQZZgCi4dAIFBxuCsq4AXSAA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A selectize list creates a way to select one or more items from a list.
+
+To use a selectize list that allows you to select multiple items:
+
+ 1. Add `ui.input_selectize()` to the UI of your app to create a selectize list. Where you call this function will determine where the selectize list appears within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_selectize()` to define the identifier and label of the select list.
+
+ 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_selectize()` uses the dictionary keys as the list values and the dictionary values as the list labels.
+
+ You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
+
+ 4. The `multiple` parameter controls whether you can select multiple items at once. Set `multiple=True` to allow the user to select multiple values.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a selectize list:
+
+ 1. Use `input.()` (e.g., `input.selectize()`) to access the selected value(s). The server value of a selectize list is a list of strings.
+
+See also: [Selectize (Single)](../selectize-single/index.qmd) and [Select (Multiple)](../select-multiple/index.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
+
+:::{#variations}
+:::
diff --git a/components/inputs/selectize-single.qmd b/components/inputs/selectize-single.qmd
deleted file mode 100644
index 3065eb55..00000000
--- a/components/inputs/selectize-single.qmd
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "Selectize (Single)"
-sidebar: components
-previewapp: |
- from shiny import App, Inputs, Outputs, Session, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize(
- "select",
- "",
- {
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"}
- }
- ),
- ui.output_text("value"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input: Inputs, output: Outputs, session: Session):
- @output
- @render.text
- def value():
- return f""
-
- app = App(app_ui, server)
-listing:
- - id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Selectize List
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZDgBecDZMAMQAPOH2jjHKYF4+foFwcRIRURAxsWAAyt6+wlCZxKj+pEwARt7EAO6IqWGR0VlMIHEAjCJxiExxAMJsxByEcEydDR0AQt29YANDI2PT+LPtfTP9g8Oja3EAvmlNmY4AlIcZMYbE7m4eFAAeZHZgAG5QVilgZ6onqqqyNFYchechsrncEmuZFuEi8LBYHFIJ3qxwcAAEpBBZHQMA8yM0mACmG8PjZkQSYlIyAo6JkaHEQOCyBgEgVkmS9nE-tB0HpROgbBptBxYcC5L8IGA9gBdIA
- height: 200px
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize( #<<
- "selectize", #<<
- "Select an option below:", #<<
- {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.selectize()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_selectize
- href: https://shiny.posit.co/py/api/ui.input_selectize.html
- signature: ui.input_selectize(id, label, choices, *, selected=None, multiple=False, width=None)
- - id: variations
- template: ../_partials/components-variations.ejs
- contents:
- variations:
- - title: Selectize with grouped choices
- description: To group the choices into categories, supply the `choices` argument with a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6lACZw6EgK4cAOhFVpUAfSVMAvEyVYoAcziaaAGyXSAFKqYODHDF1QKymlnAtxCZDgBecDZMAMQAPOH2jjHKYF4+foFwcRIRURAxsWAAyt6+wlCZxKj+pEwARt7EAO6IqWGR0VlMII0ZLS1xAIxxiK09In1McQDCbMQchHBM3UP4I2DdAELDYxNTMysNPaNrYOOT07N7YAC+aU2ZndkATMMgcbfz-etHM887YLerSIuHmyYPy+t1OrwOG2OoLiZ3azSyFzh1wcAEpLh1HIZiO43B4KAAPMh2MAANygVhSYDRqhRqlUshorDkJLkNlc7gk2LIuIkXhYLA4pBR9WRTAAAlIILI6BgCWR4QymGSKTZhfCYlIyAo6JkaHEQOyyBgEgVkqqznE6dB0HpROgbBptBxecy5CjzgBdIA
- code: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_selectize( #<<
- "selectize", #<<
- "Select an option below:", #<<
- { #<<
- "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, #<<
- "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"} #<<
- }, #<<
- ), #<<
- ui.output_text("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.selectize()}"
-
- app = App(app_ui, server)
----
-
-:::{#component}
-:::
-
-## Details
-
-A selectize list creates a way to select one or more items from a list.
-
-To use a selectize list that allows you to select a single item:
-
- 1. Add `ui.input_selectize()` to the UI of your app to create a selectize list. Where you call this function will determine where the selectize list appears within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_selectize()` to define the identifier and label of the select list.
-
- 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_selectize()` uses the dictionary keys as the list values and the dictionary values as the list labels.
-
- You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
-
- 4. The `multiple` parameter controls whether you can select multiple items at once. By default, `multiple` is `False` and the user can only select one value at a time.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a selectize list:
-
- 1. Use `input.()` (e.g., `input.selectize()`) to access the selected value. The server value of a selectize list is a list of strings. When `multiple=False`, this list will have length 1.
-
-See also: [Selectize (Multiple)](selectize-multiple.qmd) and [Select (Single)](select-single.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/inputs/selectize-single/app-core.py b/components/inputs/selectize-single/app-core.py
new file mode 100644
index 00000000..d9112042
--- /dev/null
+++ b/components/inputs/selectize-single/app-core.py
@@ -0,0 +1,19 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize( # <<
+ "selectize", # <<
+ "Select an option below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.selectize()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-single/app-detail-preview.py b/components/inputs/selectize-single/app-detail-preview.py
new file mode 100644
index 00000000..e91dcc5a
--- /dev/null
+++ b/components/inputs/selectize-single/app-detail-preview.py
@@ -0,0 +1,20 @@
+## file: app.py
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize( # <<
+ "selectize", # <<
+ "Select an option below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+ ), # <<
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.selectize()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-single/app-express.py b/components/inputs/selectize-single/app-express.py
new file mode 100644
index 00000000..80efd73d
--- /dev/null
+++ b/components/inputs/selectize-single/app-express.py
@@ -0,0 +1,14 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_selectize( # <<
+ "selectize", # <<
+ "Select an option below:", # <<
+ {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, # <<
+) # <<
+
+
+@render.text
+def value():
+ return f"{input.selectize()}"
diff --git a/components/inputs/selectize-single/app-preview.py b/components/inputs/selectize-single/app-preview.py
new file mode 100644
index 00000000..afec0379
--- /dev/null
+++ b/components/inputs/selectize-single/app-preview.py
@@ -0,0 +1,24 @@
+from shiny import App, Inputs, Outputs, Session, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize(
+ "select",
+ "",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ ),
+ ui.output_text("value"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session):
+ @output
+ @render.text
+ def value():
+ return ""
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-core.py b/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-core.py
new file mode 100644
index 00000000..98e4c88f
--- /dev/null
+++ b/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-core.py
@@ -0,0 +1,22 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_selectize(
+ "selectize",
+ "Select an option below:",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+ ),
+ ui.output_text("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.selectize()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-express.py b/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-express.py
new file mode 100644
index 00000000..47657718
--- /dev/null
+++ b/components/inputs/selectize-single/app-variation-selectize-with-grouped-choices-express.py
@@ -0,0 +1,16 @@
+from shiny import render
+from shiny.express import input, ui
+
+ui.input_selectize(
+ "selectize",
+ "Select an option below:",
+ {
+ "1": {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},
+ "2": {"2A": "Choice 2A", "2B": "Choice 2B", "2C": "Choice 2C"},
+ },
+)
+
+
+@render.text
+def value():
+ return f"{input.selectize()}"
diff --git a/components/inputs/selectize-single/index.qmd b/components/inputs/selectize-single/index.qmd
new file mode 100644
index 00000000..8a9bc8ff
--- /dev/null
+++ b/components/inputs/selectize-single/index.qmd
@@ -0,0 +1,77 @@
+---
+title: Selectize (Single)
+sidebar: components
+appPreview:
+ file: components/inputs/selectize-single/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/selectize-single/
+ contents:
+ - title: Preview
+ file: app-core.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rOABs4xCpwBecABTJkAYmQAHiDZPz9pMEcXN084SKIA4NCIcORIgGVnVxEoVNJ0d3JkACNnUgB3RAS-QJCw8JBIgEYAQUiUSIBhdlJOYjhkNpqWgCEO9LAevoGh8cJJ5q6J7t7+waXIgF9EupSASlrky1kAATEISQYsKlUKWUk6ZAA3KCdDH33q1PCxCkMGKk6JEQLYKFhojk4t59ltIrIFmAKLh0AgUEi1BQwFsALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFTgBecDYOAMTIADwR9o6xymBePn6BcPFEyOFRMbEO8QDK3r4iUBDIpOj+5MgARt6kAO6IaWGR0aU5DiDxAIyi8SjxAMLspJzEcMi9zT0AQv3IQyNjE91zhAtg3YPzi6Pjk9tgAL7pmW2xAJSnrdlOWKTubh5UAB4UdmAAblBWqWBXqguqmBEFkdDYck+chsrncRAeFCeRC8rFYnHIFya7QcAAEpKC5FhXhRbmDkN9fjZMbdYlIKAoGKU6PEQLCKFhEkUUlSjvEQepMHoxJgbBptJxkZC5ECIOswBRcOgECh5XA3scALpAA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_selectize
+ href: https://shiny.posit.co/py/api/ui.input_selectize.html
+ signature: ui.input_selectize(id, label, choices, *, selected=None, multiple=False,
+ width=None)
+- id: variations
+ template: ../../_partials/components-variations.ejs
+ template-params:
+ dir: components/inputs/selectize-single/
+ contents:
+ - title: Selectize with grouped choices
+ description: To group the choices into categories, supply the `choices` argument
+ with a dictionary of dictionaries. `ui.input_selectize()` will use the top-level
+ keys as group labels.
+ apps:
+ - title: Preview
+ file: app-variation-selectize-with-grouped-choices-core.py
+ - title: Express
+ file: app-variation-selectize-with-grouped-choices-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrNlmsB4wH1WcADZxiFTgC84AClnI-yaTAHZ1cPOECCX39AgGUnFxEoCGRSdDdyZAAjJ1IAd0QIqL8QIv8-QIBGQJQSsAqAQWqAsABhdlJOYjhkBojmioAhJsC2jq6eocJ+luHW9s7uipmwAF9I5LLosAAmJtrtxtoR+fGDvsDtyZRjse7L853l67nb5G3ltdLPiABKCwhZAABMQQSQMLBUVQUWSSOjIABuUEchm8PwKGz8YgohgYyTogRANgoWGCCTCXh+K0CsimYAouHQCBQdLUFFWAF0gA
+ - title: Core
+ file: app-variation-selectize-with-grouped-choices-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAQUxEG1ACZwGRAK6cAOhFUZ0AfSXIAvMiU4oAczia6AGyXSAFKuQODnLN3QKKm1nAtxiFTgBecHYQjmHIymBePn6BcJEE9uEOkQDK3r4iUKGk6P7kyABG3qQA7ogJSckgVcmOkQCMkSg1YA2izRFgAMLspJzEcMjtCV0NAEKdkb39g8OThGPdUz19A0MNy2AAvomhdWGRAEydrUcdtNNrc+ejxwsoV7NDRwtEx1uPq8-IR1u7tTCAP2DgAlHswoZSO43B4qAAPCh2MAANygVniYHBqlBqjxEFkdDYchRchsrncRGhFFhRC8rFYnHIoIqIOQAAEpAS5FgERRaoTkGiMTYWYDHFIKAoGKE6JEQBSKFhopk4qLtpF8epMHoxJgbBptJw6SS5LiIIswBRcOgECgrXBETsALpAA
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A selectize list creates a way to select one or more items from a list.
+
+To use a selectize list that allows you to select a single item:
+
+ 1. Add `ui.input_selectize()` to the UI of your app to create a selectize list. Where you call this function will determine where the selectize list appears within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_selectize()` to define the identifier and label of the select list.
+
+ 3. Supply the `choices` parameter with either a list or dictionary of choices. If `choices` is a list, its elements become the select list values and labels. If `choices` is a dictionary, `ui.input_selectize()` uses the dictionary keys as the list values and the dictionary values as the list labels.
+
+ You can also supply with `choices` a dictionary of dictionaries. `ui.input_selectize()` will use the top-level keys as group labels. See Selectize with grouped choices variation.
+
+ 4. The `multiple` parameter controls whether you can select multiple items at once. By default, `multiple` is `False` and the user can only select one value at a time.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a selectize list:
+
+ 1. Use `input.()` (e.g., `input.selectize()`) to access the selected value. The server value of a selectize list is a list of strings. When `multiple=False`, this list will have length 1.
+
+See also: [Selectize (Multiple)](../selectize-multiple/index.qmd) and [Select (Single)](../select-single/index.qmd). Select inputs and selectize inputs are similar, but have different interfaces and provide different ways of selecting multiple options. Selectize inputs also allow you to deselect items.
+
+:::{#variations}
+:::
diff --git a/components/inputs/slider-range.qmd b/components/inputs/slider-range.qmd
deleted file mode 100644
index 60ca7b92..00000000
--- a/components/inputs/slider-range.qmd
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: "Slider Range"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_slider("range", label="", value=[25, 70], min=1, max=100),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @render.plot
- def hist():
- print(input.range())
-
- app = App(app_ui, server)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Slider Range
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlNLCx1l07YT95yyvhMwcESMFy6AAwRUAAeugCM0bFMAG5QVnC6wADMAKwSAGwFALoAlBhQ0tKahBZQLCx+qGQAtAVMMPHtUG7ETBTxHYSUFHTBFXj2jmIYxG6u7sPu6XIARlBkfH6Z2VMzEI5MIMENTSzBiKFg6WztKdFMAFYiLDs02O0k5OM-4zkTCyHGMEHaHAoMBYAL+dCYqF6BWCAF9VFUanULs0-DBvv0yINVrCJlNVKpZDRWHJ1r4XG4JIsyMsJCw4M0OKQKohZg4AAJM5a8ph8qQQHwYVbCykZLIiOA2bnCk5SMgiOjHGjBED0sgYAI+RVosDk6DoPRMJSoGwabTial0WkVMAospAA
- height: 200px
- code: |
- from shiny import ui, render, App
-
- app_ui = ui.page_fluid(
- ui.input_slider("slider", "Slider", min=0, max=100, value=[35, 65]), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.slider()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_slider
- href: https://shiny.posit.co/py/api/ui.input_slider.html
- signature: ui.input_slider(id, label, min, max, value, *, step=None, ticks=False, animate=False, width=None, sep=',', pre=None, post=None, time_format=None, timezone=None, drag_range=True)
- - title: ui.output_data_frame
- href: https://shiny.posit.co/py/api/ui.output_data_frame.html
- signature: ui.output_data_frame(id)
- - title: render.data_frame
- href: https://shiny.posit.co/py/api/render.data_frame.html
- signature: render.data_frame(fn=None)
- - title: render.DataTable
- href: https://shiny.posit.co/py/api/render.DataTable.html
- signature: render.DataTable(self, data, *, width='fit-content', height='500px', summary=True, filters=False, row_selection_mode='none')
----
-
-:::{#component}
-:::
-
-## Details
-
-A slider is a widget that lets you drag to select numbers, dates, or date-tifrom a specified range. You can use a slider to select either a single value or a range of values.
-
-To add a slider that lets the user select a range of values:
-
- 1. Add `ui.input_slider()` to the UI of your app to create a slider. Where you call this function will determine where the slider will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_slider()` to define the identifier and label of the slider.
-
- 3. Use the `min` and `max` parameters to define the minimum and maximum values of the slider. `min` and `max` can be numbers, dates, or date-times. Dates and date-times can be provided from the `datetime` module with the `date()` or `datetime()` functions, respectively.
-
- 4. Pass a list with two elements to the `value` parameter. These elements define the initial range. `value` can be a list of numbers, dates, or date-times.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a slider:
-
- 1. Use `input.()` (e.g., `input.slider()`) to access the value of the slider. If `value` is a list and the slider specifies a range, the server value of a slider will be a list of length 2.
-
-See also: [Slider](slider.qmd)
-
diff --git a/components/inputs/slider-range/app-core.py b/components/inputs/slider-range/app-core.py
new file mode 100644
index 00000000..c095edf1
--- /dev/null
+++ b/components/inputs/slider-range/app-core.py
@@ -0,0 +1,15 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_slider("slider", "Slider", min=0, max=100, value=[35, 65]), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.slider()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/slider-range/app-detail-preview.py b/components/inputs/slider-range/app-detail-preview.py
new file mode 100644
index 00000000..74baf3d7
--- /dev/null
+++ b/components/inputs/slider-range/app-detail-preview.py
@@ -0,0 +1,20 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_slider("slider", "", min=0, max=100, value=[35, 65]).add_class(
+ "pt-5 mx-auto text-center"
+ ),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return f"{input.slider()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/slider-range/app-express.py b/components/inputs/slider-range/app-express.py
new file mode 100644
index 00000000..3a1aa071
--- /dev/null
+++ b/components/inputs/slider-range/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_slider("slider", "Slider", min=0, max=100, value=[35, 65]) # <<
+
+
+@render.text
+def value():
+ return f"{input.slider()}"
diff --git a/components/inputs/slider-range/app-preview.py b/components/inputs/slider-range/app-preview.py
new file mode 100644
index 00000000..f70db38c
--- /dev/null
+++ b/components/inputs/slider-range/app-preview.py
@@ -0,0 +1,15 @@
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_slider("range", label="", value=[25, 70], min=1, max=100),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ @render.plot
+ def hist():
+ print(input.range())
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/slider-range/index.qmd b/components/inputs/slider-range/index.qmd
new file mode 100644
index 00000000..51f6769b
--- /dev/null
+++ b/components/inputs/slider-range/index.qmd
@@ -0,0 +1,65 @@
+---
+title: Slider Range
+sidebar: components
+appPreview:
+ file: components/inputs/slider-range/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/slider-range/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rADadJDABTSwTl1M9FPAMrOrn7IMNwAvAAMRDBQqhEAjFExyABuUI6GcBHAAMwArEQAbAUAugCUyMgAxMgAPPWWsgACYhCuWFSqFLKSdOmZ2W4ViLLV1WIUhgwQyHSeILYUWN6uIwC+nrKEqBS46AgoYN0UYBtlQA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAV05EG1ACZwGRAIKYAOhFUZ0AfXHIAvGM44oAczia6AG3HSAFKuQODWbulEVNrC51kM7YT95yyoTIwQDKXj7BRDDcugAMMVAAHroAjPGJyABuUFZwusAAzACsRABsJQC6AJREyADEyAA8zfaO4likbq7uVMnu2XIARlAU-H65+cF1qjWqCxCydGxyQ74ubkTdFL1ErHCsrJzkNYjtDgACUktyWP0UF8jLOXmicDZnT47IUhSiDAgyDowRAmwoWACPk+AF9got1Jg9MglOgbBptBJVgx1vMICEwBRcOgEChCXABmAYVUgA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_slider
+ href: https://shiny.posit.co/py/api/ui.input_slider.html
+ signature: ui.input_slider(id, label, min, max, value, *, step=None, ticks=False,
+ animate=False, width=None, sep=',', pre=None, post=None, time_format=None, timezone=None,
+ drag_range=True)
+ - title: ui.output_data_frame
+ href: https://shiny.posit.co/py/api/ui.output_data_frame.html
+ signature: ui.output_data_frame(id)
+ - title: render.data_frame
+ href: https://shiny.posit.co/py/api/render.data_frame.html
+ signature: render.data_frame(fn=None)
+ - title: render.DataTable
+ href: https://shiny.posit.co/py/api/render.DataTable.html
+ signature: render.DataTable(self, data, *, width='fit-content', height='500px',
+ summary=True, filters=False, row_selection_mode='none')
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A slider is a widget that lets you drag to select numbers, dates, or date-tifrom a specified range. You can use a slider to select either a single value or a range of values.
+
+To add a slider that lets the user select a range of values:
+
+ 1. Add `ui.input_slider()` to the UI of your app to create a slider. Where you call this function will determine where the slider will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_slider()` to define the identifier and label of the slider.
+
+ 3. Use the `min` and `max` parameters to define the minimum and maximum values of the slider. `min` and `max` can be numbers, dates, or date-times. Dates and date-times can be provided from the `datetime` module with the `date()` or `datetime()` functions, respectively.
+
+ 4. Pass a list with two elements to the `value` parameter. These elements define the initial range. `value` can be a list of numbers, dates, or date-times.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a slider:
+
+ 1. Use `input.()` (e.g., `input.slider()`) to access the value of the slider. If `value` is a list and the slider specifies a range, the server value of a slider will be a list of length 2.
+
+See also: [Slider](../slider/index.qmd)
diff --git a/components/inputs/slider.qmd b/components/inputs/slider.qmd
deleted file mode 100644
index f8b2e90c..00000000
--- a/components/inputs/slider.qmd
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: "Slider"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_slider("x", "", min=0, max=20, value=10),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f""
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Slider
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlNLCx1l07YT95yyvhMwcESAAwSAIwRUUwArBEAlBhQ0tKahBZQLCx+qGQAtAlMMAAeRVBuxEwU5cWElBR0wcl49o5iGMRuru717gBucgBGUGR8fkNQVnBtHRCOTCDB2bkswYihYENsRbERTABWIiyTNNhFJOTN181yTLMcxhBFHBQwLPe3dEyolQSwQAvqpUulMus8n4YFdqmRaoMfi02qpVLIaKw5CNfC43BJemR+hIWHA8hxSMlEJ0HAABQn9GlMWlSCA+DCDJkYpgzOY2KlM5ZSMgiOhLGjBEB4sgYAI+fmgsBo6DoPRMJSoGwabTiLF0HHJMDAgC6QA
- height: 200px
- code: |
- from shiny import ui, render, App
-
- app_ui = ui.page_fluid(
- ui.input_slider("slider", "Slider", 0, 100, 50), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return f"{input.slider()}"
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_slider
- href: https://shiny.posit.co/py/api/ui.input_slider.html
- signature: ui.input_slider(id, label, min, max, value, *, step=None, ticks=False, animate=False, width=None, sep=',', pre=None, post=None, time_format=None, timezone=None, drag_range=True)
----
-
-:::{#component}
-:::
-
-## Details
-
-A slider is a widget that lets you drag to select a number, date, or date-time from a specified range.
-
-To add a slider to your app:
-
- 1. Add `ui.input_slider()` to the UI of your app to create a slider. Where you call this function will determine where the slider will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_slider()` to define the identifier and label of the slider.
-
- 3. Use the `min` and `max` parameters to define the minimum and maximum values of the slider.
-
- 4. Set the `value` parameter to define the starting slider value. `min`, `max`, and `value` can be numbers, dates, or date-times. Dates and date-times can be provided from the `datetime` module with the `date()` or `datetime()` functions, respectively.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a slider:
-
- 1. Use `input.()` (e.g., `input.slider()`) to access the value of the slider. The server value of a slider is a number, date, or date-time (depending on the class of `value`).
-
-See also: [Slider Range](slider-range.qmd)
diff --git a/components/inputs/slider/app-core.py b/components/inputs/slider/app-core.py
new file mode 100644
index 00000000..d11e33b7
--- /dev/null
+++ b/components/inputs/slider/app-core.py
@@ -0,0 +1,15 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_slider("slider", "Slider", 0, 100, 50), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return f"{input.slider()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/slider/app-detail-preview.py b/components/inputs/slider/app-detail-preview.py
new file mode 100644
index 00000000..9412d714
--- /dev/null
+++ b/components/inputs/slider/app-detail-preview.py
@@ -0,0 +1,18 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_slider("slider", "", 0, 100, 50).add_class("pt-5 mx-auto text-center"),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return f"{input.slider()}"
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/slider/app-express.py b/components/inputs/slider/app-express.py
new file mode 100644
index 00000000..ae9e9504
--- /dev/null
+++ b/components/inputs/slider/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+(ui.input_slider("slider", "Slider", 0, 100, 50),) # <<
+
+
+@render.text
+def value():
+ return f"{input.slider()}"
diff --git a/components/inputs/slider/app-preview.py b/components/inputs/slider/app-preview.py
new file mode 100644
index 00000000..7286b989
--- /dev/null
+++ b/components/inputs/slider/app-preview.py
@@ -0,0 +1,14 @@
+from shiny import App, ui
+
+app_ui = ui.page_fluid(
+ ui.input_slider("x", "", min=0, max=20, value=10),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ pass
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/slider/index.qmd b/components/inputs/slider/index.qmd
new file mode 100644
index 00000000..770b57ad
--- /dev/null
+++ b/components/inputs/slider/index.qmd
@@ -0,0 +1,55 @@
+---
+title: Slider
+sidebar: components
+appPreview:
+ file: components/inputs/slider/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/slider/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQAFGawHjAfVYAbTpIZXpYF26leiXgDKru7+yAAMRACM4ZHIAKzhAJQEScjIAMTIADzZlrIAAmIQ7lhUqhSyknTIAG5QzoZwVkmIsunpYhSGDBDIdF4g9hRYPu4tAL5esoSoFLjoCChg5RRgEwC6QA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAV05EG1ACZwGRAIKYAOhFUZ0AfXHIAvGM44oAczia6AG3HSAFKuQODWbulEVNrC51kM7YT95yyoTIwQDKXj7BRAAMRACMMXHIAKwxAJREyADEyAA8efaO4likbq7uVAAe7gBucgBGUBT8frVQVnDBmarpqv0QsnRscvW+Lm5EZRQVRKxwrKyc5OmIRQ4AAlKDcljVFOvIQ8jtnTarh47IUhSiDBDIdMEgExRYAT7nAL7BA+qYemQSnQNg02gkIwYYz6EBCYAouHQCBQ8LgNTAXwAukA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_slider
+ href: https://shiny.posit.co/py/api/ui.input_slider.html
+ signature: ui.input_slider(id, label, min, max, value, *, step=None, ticks=False,
+ animate=False, width=None, sep=',', pre=None, post=None, time_format=None, timezone=None,
+ drag_range=True)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A slider is a widget that lets you drag to select a number, date, or date-time from a specified range.
+
+To add a slider to your app:
+
+ 1. Add `ui.input_slider()` to the UI of your app to create a slider. Where you call this function will determine where the slider will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_slider()` to define the identifier and label of the slider.
+
+ 3. Use the `min` and `max` parameters to define the minimum and maximum values of the slider.
+
+ 4. Set the `value` parameter to define the starting slider value. `min`, `max`, and `value` can be numbers, dates, or date-times. Dates and date-times can be provided from the `datetime` module with the `date()` or `datetime()` functions, respectively.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a slider:
+
+ 1. Use `input.()` (e.g., `input.slider()`) to access the value of the slider. The server value of a slider is a number, date, or date-time (depending on the class of `value`).
+
+See also: [Slider Range](../slider-range/index.qmd)
diff --git a/components/inputs/switch.qmd b/components/inputs/switch.qmd
deleted file mode 100644
index 966aaa64..00000000
--- a/components/inputs/switch.qmd
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: "Switch"
-sidebar: components
-previewapp: |
- from shiny import ui, render, App
- app_ui = ui.page_fluid(
- ui.input_switch("switch", "Make it switchable", True).add_class("mb-0"),
- ui.output_ui("value"),
- {"class": "vh-100 d-flex flex-column justify-content-center align-items-center px-4"}
- )
- def server(input, output, session):
- @render.ui
- def value():
- return ""
- app = App(app_ui, server)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Switch
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlNLAO4cyhNnbAvHz9lfCZQgGVvXzZQiQAVOhE4AEo8e0cxDGI3V3cxAIA3KCs4ULTVFIwoaWlNQgsoFhYA1ABaAFZy1VVZGlY5QrkbFzcJHLI8iRY4Zo5SFMQMhwABCbzlphWpCFk6DDFNvqZi0ptFzcdJODIROgheCDyMIJjznuh0PSYlVBsNbTiAZ0IZ0FJgAC+AF0gA
- height: 200px
- code: |
- from shiny import ui, render, App
-
- app_ui = ui.page_fluid(
- ui.input_switch("switch", "Switch", False), #<<
- ui.output_ui("value"),
- )
-
- def server(input, output, session):
- @render.ui
- def value():
- return input.switch()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_switch
- href: https://shiny.posit.co/py/api/ui.input_switch.html
- signature: ui.input_switch(id, label, value=False, *, width=None)
----
-
-:::{#component}
-:::
-
-## Details
-
-A switch allows you to select between logical values.
-
-To add a switch to your app:
-
- 1. Add `ui.input_switch()` to the UI of your app to create a switch. Where you call this function will determine where the switch will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_switch()` to define the identifier and label of the switch.
-
- 3. By default, the `value` parameter, which defines the switch's initial value, is `False`. If you'd like the initial value to be `True`, set `value` equal to `True`.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a switch:
-
- 1. Use `input.()` (e.g., `input.switch()`) to access the value of the switch. The server value of a switch is `True` if checked and `False` otherwise.
diff --git a/components/inputs/switch/app-core.py b/components/inputs/switch/app-core.py
new file mode 100644
index 00000000..35d4b58d
--- /dev/null
+++ b/components/inputs/switch/app-core.py
@@ -0,0 +1,15 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_switch("switch", "Switch", False), # <<
+ ui.output_ui("value"),
+)
+
+
+def server(input, output, session):
+ @render.ui
+ def value():
+ return input.switch()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/switch/app-detail-preview.py b/components/inputs/switch/app-detail-preview.py
new file mode 100644
index 00000000..c4f28561
--- /dev/null
+++ b/components/inputs/switch/app-detail-preview.py
@@ -0,0 +1,17 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_switch("switch", "Switch", True),
+ ui.output_ui("value"),
+).add_class("p-5")
+
+
+def server(input, output, session):
+ @output
+ @render.ui
+ def value():
+ return input.switch()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/switch/app-express.py b/components/inputs/switch/app-express.py
new file mode 100644
index 00000000..5a7a2fbb
--- /dev/null
+++ b/components/inputs/switch/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_switch("switch", "Switch", False) # <<
+
+
+@render.ui
+def value():
+ return input.switch()
diff --git a/components/inputs/switch/app-preview.py b/components/inputs/switch/app-preview.py
new file mode 100644
index 00000000..85dfdc20
--- /dev/null
+++ b/components/inputs/switch/app-preview.py
@@ -0,0 +1,16 @@
+from shiny import App, ui
+
+app_ui = ui.page_fluid(
+ ui.input_switch("switch", "Make it switchable", True).add_class("mb-0"),
+ ui.output_ui("value"),
+ {
+ "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)
diff --git a/components/inputs/switch/index.qmd b/components/inputs/switch/index.qmd
new file mode 100644
index 00000000..a7f1b721
--- /dev/null
+++ b/components/inputs/switch/index.qmd
@@ -0,0 +1,49 @@
+---
+title: Switch
+sidebar: components
+appPreview:
+ file: components/inputs/switch/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/switch/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6rAO6cKxdgAppYJy7deiXgDKzq7s-sgAYlAANqxwAJTIyADEyAA8aZayAAJiEJIMWGayknTIAG4xhnDu8YiySUliFIYMEHwQRhRYPqG1soSoFLjoCChgVKoUYAC+ALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAV05EG1ACZwGRAIKYAOhFUZ0AfXHIAvGM44oAczia6AG3HSAFKuQODWbulEVNrAO6cKxdnbAvHz9lQmRQgGVvX3ZQogAxKAtWOABKImQAYmQAHhz7R3EsUjdXd3EAgDck0ThQ9NVU1WaIWTo2OUq5Gxc3IhKKMqIU1lZOclTEAocAASlWuSxxaeQ25GqrOBtJlcdkKQpRBgg+CDKsIJjtlvVMPWQldBsNbQkOhi6GJogwsApcdAIFB-OAADwoYAAvgBdIA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_switch
+ href: https://shiny.posit.co/py/api/ui.input_switch.html
+ signature: ui.input_switch(id, label, value=False, *, width=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A switch allows you to select between logical values.
+
+To add a switch to your app:
+
+ 1. Add `ui.input_switch()` to the UI of your app to create a switch. Where you call this function will determine where the switch will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_switch()` to define the identifier and label of the switch.
+
+ 3. By default, the `value` parameter, which defines the switch's initial value, is `False`. If you'd like the initial value to be `True`, set `value` equal to `True`.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a switch:
+
+ 1. Use `input.()` (e.g., `input.switch()`) to access the value of the switch. The server value of a switch is `True` if checked and `False` otherwise.
diff --git a/components/inputs/text-area.qmd b/components/inputs/text-area.qmd
deleted file mode 100644
index 8359b8c5..00000000
--- a/components/inputs/text-area.qmd
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: "Text Area"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_text_area("x", "", placeholder="Enter text"),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f''
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Text Area
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlNFAB7uoUqHbAvMl84KGV8JnDwiXCACTgLC2ImAHVBC2lwgEoMKGlpTUILKBYWANQyAFoAViYYT0qoN2SgysJKCjpsvHtHMQxiN1d3IM0ANzkAIygyPgCxqCs4bt6HEHCikpZwxEiwMbZKgEYABhOmACsRFlmabDbSCnI2jrkmRY5jCEqOChgWF7kN6oBrVcIAX1UOTyBU2pQCMHuTTILTg3kBnWyqlUshorDkEzoNhcbgkgzIwwkLDgpQ4pCyiFWTAAAlIILI6BggkzcUwFksbAymY5JHAyCI6BBeBBhly0cE-ILsdB0HomEpUDYNNpxPi6ISsqowOCALpAA
- height: 200px
- code: |
- from shiny import ui, render, App
-
- app_ui = ui.page_fluid(
- ui.input_text_area("textarea", "Text input", "Hello World"), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return input.textarea()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_text_area
- href: https://shiny.posit.co/py/api/ui.input_text_area.html
- signature: ui.input_text_area(id, label, value='', *, width=None, height=None, cols=None, rows=None, placeholder=None, resize=None, autoresize=False, autocomplete=None, spellcheck=None)
----
-
-:::{#component}
-:::
-
-## Details
-
-Create a textarea input control for entry of unstructured text values.
-
-To add a textarea to your app:
-
- 1. Add `ui.input_text_area()` to the UI of your app to create a textarea. Where you call this function will determine where the textarea will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_text_area()` to define the identifier and label of the textarea.
-
- 3. By default, the `value` parameter, which defines the textarea's initial value, is the empty string (`''`). Provide a different string to `value` to change the initial text.
-
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a textarea:
-
- 1. Use `input.()` (e.g., `input.textarea()`) to access the value of the textarea. The server value of a textarea is a string containing the current text input.
-
-See also: [Text Box](text-box.qmd)
diff --git a/components/inputs/text-area/app-core.py b/components/inputs/text-area/app-core.py
new file mode 100644
index 00000000..bac1d55d
--- /dev/null
+++ b/components/inputs/text-area/app-core.py
@@ -0,0 +1,15 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_text_area("textarea", "Text input", "Hello World"), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.textarea()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/text-area/app-detail-preview.py b/components/inputs/text-area/app-detail-preview.py
new file mode 100644
index 00000000..c7d0209f
--- /dev/null
+++ b/components/inputs/text-area/app-detail-preview.py
@@ -0,0 +1,19 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_text_area("textarea", "", "Hello World").add_class(
+ "pt-5 mx-auto text-center"
+ ),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.textarea()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/text-area/app-express.py b/components/inputs/text-area/app-express.py
new file mode 100644
index 00000000..22de89ba
--- /dev/null
+++ b/components/inputs/text-area/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+(ui.input_text_area("textarea", "Text input", "Hello World"),) # <<
+
+
+@render.text
+def value():
+ return input.textarea()
diff --git a/components/inputs/text-area/app-preview.py b/components/inputs/text-area/app-preview.py
new file mode 100644
index 00000000..d8fdab70
--- /dev/null
+++ b/components/inputs/text-area/app-preview.py
@@ -0,0 +1,14 @@
+from shiny import App, ui
+
+app_ui = ui.page_fluid(
+ ui.input_text_area("x", "", placeholder="Enter text"),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ pass
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/text-area/index.qmd b/components/inputs/text-area/index.qmd
new file mode 100644
index 00000000..a2f8e663
--- /dev/null
+++ b/components/inputs/text-area/index.qmd
@@ -0,0 +1,54 @@
+---
+title: Text Area
+sidebar: components
+appPreview:
+ file: components/inputs/text-area/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/text-area/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQAFGawHjAfSqqKDqGKhXpYZxXdwobyJvABU1fQgjCiDkbwAJOAAbRNJkAHUhRPFvAEoCHORkAGJkAB5Sy1kAATEISQYsX1lJOmQANyhEwzgrHMRZQsKxCkMGCD5I40bw-08c2UJUClx0BBQfcLAAXwBdIA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAV05EG1ACZwGRAIKYAOhFUZ0AfXHIAvGM44oAczia6AG3HSAFKuQODWbulEVNVAB7uoUqHbAvCl84KGVCZHCAFThvPghXCnCicIAJOAsLUmQAdSELaXCASiJkAGJkAB5K+0dxLFI3RI9Y9wA3OQAjKAp+ALaoKzhiglUi1QmIWTo2OQ6GGxc3IkaKRKJWOFZWTnIixFqHAAEpKbksIMPkaeQBoZt9q8dkKQpRBgh4xIvWkP9xtSAjR6ZBKdA2DTaCSzBjzAERQK4dAIFCBVpgAC+AF0gA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_text_area
+ href: https://shiny.posit.co/py/api/ui.input_text_area.html
+ signature: ui.input_text_area(id, label, value='', *, width=None, height=None,
+ cols=None, rows=None, placeholder=None, resize=None, autoresize=False, autocomplete=None,
+ spellcheck=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+Create a textarea input control for entry of unstructured text values.
+
+To add a textarea to your app:
+
+ 1. Add `ui.input_text_area()` to the UI of your app to create a textarea. Where you call this function will determine where the textarea will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_text_area()` to define the identifier and label of the textarea.
+
+ 3. By default, the `value` parameter, which defines the textarea's initial value, is the empty string (`''`). Provide a different string to `value` to change the initial text.
+
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a textarea:
+
+ 1. Use `input.()` (e.g., `input.textarea()`) to access the value of the textarea. The server value of a textarea is a string containing the current text input.
+
+See also: [Text Box](../text-box/index.qmd)
diff --git a/components/inputs/text-box.qmd b/components/inputs/text-box.qmd
deleted file mode 100644
index 5fdf2817..00000000
--- a/components/inputs/text-box.qmd
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: "Text Box"
-sidebar: components
-previewapp: |
- from shiny import App, render, ui
-
- app_ui = ui.page_fluid(
- ui.input_text("x", "", placeholder="Enter text"),
- ui.output_text_verbatim("txt"),
- {"class": "vh-100 d-flex justify-content-center align-items-center px-4"}
- )
-
- def server(input, output, session):
- @render.text
- def txt():
- return f''
-
- app = App(app_ui, server, debug=True)
-listing:
- id: component
- template: ../_partials/components-detail.ejs
- contents:
- - title: Text Box
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMArhzxM6lACZw6EgILoAOhFVpUAfTFMAvKI5YoAcziaaAGzHSAFKqYODGLqhFlNFAB5k7YL2WV8JkDAiUCAUXI5Jn8MOMCASgwoaWlNQgsoFhZfVDIAWgBWJhhPfKg3Yhi4b3zCSgo6RLx7RzEMYjdXd39NADc5ACMoMj5fPqgrOGbWhxBAjKyWQMRgsD62fIBGAAYdpgArERZRmmw60gpyOoboyY5jCHyOChgWG6i6JlQywsCAX1USRSaUW2V8MHOFTIVX8H0aiVUqlkNFYcgGdBsLjcEk6ZG6EhYcGyHFICUQsyYAAE8d1KVSpBBZHQMP5KSimBMpjZyZTHJI4GQRHQILwIN1WTUfAkkdB0HomEpUDYNNpxGi6BiEmB-gBdIA
- height: 200px
- code: |
- from shiny import ui, render, App
-
- app_ui = ui.page_fluid(
- ui.input_text("text", "Text input", "Enter text..."), #<<
- ui.output_text_verbatim("value"),
- )
-
- def server(input, output, session):
- @render.text
- def value():
- return input.text()
-
- app = App(app_ui, server)
- relevantfunctions:
- - title: ui.input_text
- href: https://shiny.posit.co/py/api/ui.input_text.html
- signature: ui.input_text(id, label, value='', *, width=None, placeholder=None, autocomplete='off', spellcheck=None)
----
-
-:::{#component}
-:::
-
-## Details
-
-Create input control for entry of text values.
-
-To add a text box to your app:
-
- 1. Add `ui.input_text()` to the UI of your app to create a text box. Where you call this function will determine where the text box will appear within the app's layout.
-
- 2. Specify the `id` and `label` parameters of `ui.input_text_area()` to define the identifier and label of the text box.
-
- 3. By default, the `value` parameter, which defines the text box's initial value, is the empty string (`''`). Provide a different string to `value` to change the initial text.
-
-The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a text box:
-
- 1. Use `input.()` (e.g., `input.text()`) to access the value of the text box. The server value of a text box is a string containing the current text input.
-
-See also: [Text Area](text-area.qmd)
\ No newline at end of file
diff --git a/components/inputs/text-box/app-core.py b/components/inputs/text-box/app-core.py
new file mode 100644
index 00000000..24ddd7d7
--- /dev/null
+++ b/components/inputs/text-box/app-core.py
@@ -0,0 +1,15 @@
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_text("text", "Text input", "Enter text..."), # <<
+ ui.output_text_verbatim("value"),
+)
+
+
+def server(input, output, session):
+ @render.text
+ def value():
+ return input.text()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/text-box/app-detail-preview.py b/components/inputs/text-box/app-detail-preview.py
new file mode 100644
index 00000000..c4e1c9a4
--- /dev/null
+++ b/components/inputs/text-box/app-detail-preview.py
@@ -0,0 +1,18 @@
+## file: app.py
+from shiny import ui, render, App
+
+app_ui = ui.page_fluid(
+ ui.input_text("text", "", "Enter text...").add_class("pt-5 mx-auto text-center"),
+ ui.output_text_verbatim("value"),
+ {"class": "vh-100 justify-content-center align-items-center px-5"},
+).add_class("my-auto text-center")
+
+
+def server(input, output, session):
+ @output
+ @render.text
+ def value():
+ return input.text()
+
+
+app = App(app_ui, server)
diff --git a/components/inputs/text-box/app-express.py b/components/inputs/text-box/app-express.py
new file mode 100644
index 00000000..f11b9e8d
--- /dev/null
+++ b/components/inputs/text-box/app-express.py
@@ -0,0 +1,10 @@
+from shiny import render
+from shiny.express import input, ui
+
+
+ui.input_text("text", "Text input", "Enter text...") # <<
+
+
+@render.text
+def value():
+ return input.text()
diff --git a/components/inputs/text-box/app-preview.py b/components/inputs/text-box/app-preview.py
new file mode 100644
index 00000000..c1fc4ea9
--- /dev/null
+++ b/components/inputs/text-box/app-preview.py
@@ -0,0 +1,14 @@
+from shiny import App, ui
+
+app_ui = ui.page_fluid(
+ ui.input_text("x", "", placeholder="Enter text"),
+ ui.output_text_verbatim("txt"),
+ {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
+)
+
+
+def server(input, output, session):
+ pass
+
+
+app = App(app_ui, server, debug=True)
diff --git a/components/inputs/text-box/index.qmd b/components/inputs/text-box/index.qmd
new file mode 100644
index 00000000..2f2306d5
--- /dev/null
+++ b/components/inputs/text-box/index.qmd
@@ -0,0 +1,52 @@
+---
+title: Text Box
+sidebar: components
+appPreview:
+ file: components/inputs/text-box/app-preview.py
+listing:
+- id: example
+ template: ../../_partials/components-detail-example.ejs
+ template-params:
+ dir: components/inputs/text-box/
+ contents:
+ - title: Preview
+ file: app-detail-preview.py
+ height: 200
+ - title: Express
+ file: app-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkDagBM4DADoRGzNlx5Y4AD3RjWrPgKEju6AK4UihzrIsQzWA8YD6VVRQAU0sI4puibgCpr9EEaehMhuAKKUUsgeWLFuAJTIyADEyAA8aZayAAJiEJIMWB6yknTIAG5QADaGcM7xiLJJSWIUhgwQfIHGRf71siHuuOgIKO7+YAC+ALpAA
+ - title: Core
+ file: app-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZAZwAsBLCXZTmdKQYVkAV05EG1ACZwGRAIKYAOhFUZ0AfXHIAvGM44oAczia6AG3HSAFKuQODWbulEVNVAB4U7YLxWVCZECAFThvPghXAKDAgFFKOWR-LFTAgEoiZABiZAAePPtHcSxSN2iPcPcANzkAIygKfl9qqCs4DIJVdNVeiFk6NjlahhsXNyIyimiiVjhWVk5ydMQihwABKX65LH815AHkVvabFf3HZCkKUQYISOjdqtO+9Uw9ZCV0Gw1tCSGGEY9CBBPy4dAIFB+KpgAC+AF0gA
+- id: relevant-functions
+ template: ../../_partials/components-detail-relevant-functions.ejs
+ contents:
+ - title: ui.input_text
+ href: https://shiny.posit.co/py/api/ui.input_text.html
+ signature: ui.input_text(id, label, value='', *, width=None, placeholder=None,
+ autocomplete='off', spellcheck=None)
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+Create input control for entry of text values.
+
+To add a text box to your app:
+
+ 1. Add `ui.input_text()` to the UI of your app to create a text box. Where you call this function will determine where the text box will appear within the app's layout.
+
+ 2. Specify the `id` and `label` parameters of `ui.input_text_area()` to define the identifier and label of the text box.
+
+ 3. By default, the `value` parameter, which defines the text box's initial value, is the empty string (`''`). Provide a different string to `value` to change the initial text.
+
+The value of an input component is accessible as a reactive value within the `server()` function. To access the value of a text box:
+
+ 1. Use `input.()` (e.g., `input.text()`) to access the value of the text box. The server value of a text box is a string containing the current text input.
+
+See also: [Text Area](../text-area/index.qmd)
diff --git a/components/migrate.py b/components/migrate.py
new file mode 100644
index 00000000..c7b0bdbb
--- /dev/null
+++ b/components/migrate.py
@@ -0,0 +1,287 @@
+import logging
+import os
+
+import yaml as yml
+from _qmd import find_qmds, get_qmd_split
+
+lg = logging.getLogger("migrate")
+if len(lg.handlers) == 0:
+ formatter = logging.Formatter("%(levelname)s %(message)s")
+ console_handler = logging.StreamHandler()
+ console_handler.setFormatter(formatter)
+ lg.addHandler(console_handler)
+ lg.setLevel(logging.INFO)
+
+
+def extract_component_parts(path):
+ if isinstance(path, str):
+ meta, _ = get_qmd_split(path)
+ else:
+ meta = path
+
+ info = {}
+ info["_slug"] = meta["_slug"]
+ info["_dir"] = meta["_dir"]
+ info["title"] = meta["title"]
+ info["sidebar"] = "components"
+
+ if "preview" in meta:
+ info["preview"] = meta["preview"]
+
+ if "previewapp" in meta:
+ info["appPreview"] = {"code": meta["previewapp"]}
+
+ if not "listing" in meta:
+ return info
+
+ # Find the core app from the listing keys
+ listing = meta["listing"]
+ if not isinstance(listing, list):
+ listing = [listing]
+
+ # if listing is an array, then it should be the component
+ if isinstance(listing, list):
+ for l in listing:
+ if "id" in l and l["id"] == "component":
+ info["relevantFunctions"] = l["contents"][0]["relevantfunctions"]
+ info["example"] = {
+ "code": l["contents"][0]["code"],
+ "shinylive": l["contents"][0]["preview"],
+ }
+
+ if "height" in l["contents"][0]:
+ info["example"]["height"] = l["contents"][0]["height"]
+
+ if "id" in l and l["id"] == "variations":
+ info["variations"] = l["contents"]["variations"]
+ # rename info["variations"]["preview"] to info["variations"]["shinylive"]
+ for variation in info["variations"]:
+ variation["shinylive"] = variation["preview"]
+ del variation["preview"]
+
+ return info
+
+
+def write_new_component_dir(path):
+ meta, body = get_qmd_split(path)
+ info = extract_component_parts(meta)
+
+ os.makedirs(info["_dir"], exist_ok=True)
+
+ new_meta = {}
+ new_meta["title"] = info["title"]
+ new_meta["sidebar"] = info["sidebar"]
+
+ # Add preview html if needed
+ if "preview" in info:
+ lg.info(f"{info['_slug']} has a preview")
+ new_meta["preview"] = info["preview"]
+
+ # Write out app-preview.py
+ if "appPreview" in info:
+ path_preview = os.path.join(info["_dir"], "app-preview.py")
+ new_meta["appPreview"] = {"file": path_preview}
+
+ with open(path_preview, "w") as f:
+ f.write(info["appPreview"]["code"])
+
+ new_meta["listing"] = []
+
+ # Write out app-core and app-express
+ if "example" in info:
+ l_example = {
+ "id": "example",
+ "template": "../../_partials/components-detail-example.ejs",
+ "template-params": {
+ "dir": info["_dir"] + "/",
+ },
+ "contents": [],
+ }
+
+ base = {}
+ if "height" in info["example"]:
+ base["height"] = info["example"]["height"]
+ if "shinylive" in info["example"]:
+ base["shinylive"] = info["example"]["shinylive"]
+
+ core = {"title": "Core", "file": "app-core.py"}
+
+ express = {"title": "Express", "file": "app-express.py"}
+
+ core.update(base)
+ express.update(base)
+
+ l_example["contents"].append(core)
+ l_example["contents"].append(express)
+
+ new_meta["listing"].append(l_example)
+
+ path_core = os.path.join(info["_dir"], "app-core.py")
+ path_express = os.path.join(info["_dir"], "app-express.py")
+
+ with open(path_core, "w") as f:
+ f.write(info["example"]["code"])
+
+ with open(path_express, "w") as f:
+ f.write("# FIXME: Rewrite as an Express app\n")
+ f.write(info["example"]["code"])
+
+ # Relevant functions
+ if "relevantFunctions" in info:
+ l_relevant = {
+ "id": "relevant-functions",
+ "template": "../../_partials/components-detail-relevant-functions.ejs",
+ "template-params": {
+ "dir": info["_dir"] + "/",
+ },
+ "contents": info["relevantFunctions"],
+ }
+
+ new_meta["listing"].append(l_relevant)
+
+ # Write out variations
+ if "variations" in info:
+ l_variations = {
+ "id": "variations",
+ "template": "../../_partials/components-variations.ejs",
+ "template-params": {
+ "dir": info["_dir"] + "/",
+ },
+ "contents": [],
+ }
+
+ for variation in info["variations"]:
+ new_var = {}
+ new_var["title"] = variation["title"]
+ new_var["description"] = variation["description"]
+
+ # slugify the title
+ var_slug = variation["title"].lower().replace(" ", "-").replace("/", "-")
+
+ new_var["apps"] = [
+ {
+ "title": "Core",
+ "file": f"app-variation-{var_slug}-core.py",
+ "shinylive": variation.get(
+ "shinylive", "#FIXME: Add shinylive link"
+ ),
+ },
+ {
+ "title": "Express",
+ "file": f"app-variation-{var_slug}-express.py",
+ "shinylive": variation.get(
+ "shinylive", "#FIXME: Add shinylive link"
+ ),
+ },
+ ]
+
+ if "height" in variation:
+ for app in new_var["apps"]:
+ app["height"] = variation["height"]
+
+ l_variations["contents"].append(new_var)
+
+ path_core = os.path.join(info["_dir"], new_var["apps"][0]["file"])
+ path_express = os.path.join(info["_dir"], new_var["apps"][1]["file"])
+
+ with open(path_core, "w") as f:
+ f.write(variation["code"])
+
+ with open(path_express, "w") as f:
+ f.write("# FIXME: Rewrite as an Express app\n")
+ f.write(variation["code"])
+
+ new_meta["listing"].append(l_variations)
+
+ # Write out index.qmd
+ path_index = os.path.join(info["_dir"], "index.qmd")
+ with open(path_index, "w") as f:
+ f.write("---\n")
+ f.write(yml.dump(new_meta, sort_keys=False, indent=2, default_flow_style=False))
+ f.write("---\n\n")
+ f.write(
+ body.replace(
+ ":::{#component}\n:::",
+ ":::{#example}\n:::\n\n:::{#relevant-functions}\n:::",
+ )
+ )
+
+
+def migrate_directory(dir, exclude=[], clean=False):
+ qmd_list = find_qmds(dir, exclude)
+ for qmd in qmd_list:
+ lg.info(f"Processing {qmd}")
+ write_new_component_dir(qmd)
+ if clean:
+ os.remove(qmd)
+ lg.info(f"\u2713 Migrated {qmd}")
+
+
+def migrate_all(dirs):
+ for dir in dirs:
+ lg.info(f"Migrating {dir} -------------------------")
+ migrate_directory(dir)
+
+
+# Step 2: Fix component previews ----------------------------------------------
+def rewrite_preview_app(qmd):
+ meta, body = get_qmd_split(qmd)
+
+ if not "listing" in meta:
+ return
+
+ import shinylive._url as shlive
+ from shinylive import decode_shinylive_url, encode_shinylive_url
+
+ ex_listing = [e for e in meta["listing"] if e["id"] == "example"][0]
+ examples = ex_listing["contents"]
+
+ shinylive_urls = [e["shinylive"] for e in examples if "shinylive" in e]
+
+ app_preview_bundle = decode_shinylive_url(shinylive_urls[0])
+
+ preview = {"title": "Preview", "file": "app-detail-preview.py"}
+
+ if "height" in examples[0]:
+ preview["height"] = examples[0]["height"]
+
+ with open(os.path.join(meta["_dir"], preview["file"]), "w") as f:
+ f.write(shlive.create_shinylive_chunk_contents(app_preview_bundle))
+
+ for ex in examples:
+ if "height" in ex:
+ del ex["height"]
+
+ examples.insert(0, preview)
+
+ for ex in examples:
+ if ex["title"] == "Preview":
+ continue
+ app_path = os.path.join(meta["_dir"], ex["file"])
+ ex["shinylive"] = encode_shinylive_url(app_path)
+
+ path_index = os.path.join(meta["_dir"], "index.qmd")
+ del meta["_slug"]
+ del meta["_dir"]
+
+ with open(path_index, "w") as f:
+ f.write("---\n")
+ f.write(yml.dump(meta, sort_keys=False, indent=2, default_flow_style=False))
+ f.write("---\n\n")
+ f.write(body.strip())
+ f.write("\n")
+
+
+def step2_migrate_dirs(dirs, exclude=[]):
+ index_qmds = []
+
+ for dir in dirs:
+ cdirs = [os.path.join(dir, p) for p in os.listdir(dir)]
+ cdirs = [p for p in cdirs if os.path.isdir(p)]
+ for cdir in cdirs:
+ index_qmds.append(os.path.join(cdir, "index.qmd"))
+
+ for qmd in index_qmds:
+ lg.info(f"Processing {qmd}")
+ rewrite_preview_app(qmd)
+ lg.info(f"\u2713 Migrated {qmd}")
diff --git a/components/outputs/data-grid.qmd b/components/outputs/data-grid.qmd
deleted file mode 100644
index fa2bf95a..00000000
--- a/components/outputs/data-grid.qmd
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: "Data Grid"
-sidebar: components
-preview: |
-
-
-
_selected_rows()`.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFTQBKg6IubHCEFAqILc2pxBXllRQAHmQNDENzYhBsQnCBACp0fHAra4VnC4VJQKKBkKBZOiwOANcIaEE0JqxCDI7QOPouOgAN0ckTKFRs5zIl2crncpGiiH+TAAAkTLtSaXYIA46BhQeDIdDqeiWLwIsIETEqRAimKxmCoMk4SIMAY4Io8RBLhgIDFkeKinYyHw6KLmayMAARSUAcToAjyHKgNgeSl2+zIHggShgxAcgSaMD4bCdUzgSLiYrpQLIjINjgwNzDoqKvIewmF1MKDoOcAUyXxZCw-PhCho9rgezTygTMWTtjgOr1TAA5DZaxgAFbEISRYRkOh46JMGhSMTPfRFx3p1HxVDJKyoSJoVCJASk7GOaJgAC+AF0gA
- shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFTQBKg6IubHCEFAqILc2pxBXllRQAHmQNDENzYhBsQnCBACp0fHAra4VnC4VJQKKBkKBZOiwOANcIaEE0JqxCDI7QOPouOgAN0ckTKFRs5zIl2crncpGiiH+TAAAkTLtSaXYIA46BhQeDIdDqeiWLwIsIETEqRAimKxmCoMk4SIMAY4Io8RBLhgIDFkeKinYyHw6KLmayMAARSUAcToAjyHKgNgeSl2+zIHggShgxAcgSaMD4bCdUzgSLiYrpQLIjINjgwNzDoqKvIewmF1MKDoOcAUyXxZCw-PhCho9rgezTygTMWTtjgOr1TAA5DZaxgAFbEISRYRkOh46JMGhSMTPfRFx3p1HxVDJKyoSJoVCJASk7GOaJgAC+AF0gA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- "Rows selected: ", ui.output_text("rows", inline=True),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataGrid(data, row_selection_mode="multiple") #<<
-
- @render.text
- def rows():
- selected = input.penguins_df_selected_rows() #<<
- return ', '.join(str(i) for i in selected)
-
- app = App(app_ui, server)
- - title: Filterable Table
- height: "350px"
- description: Set `render.DataGrid(filters=True)` to add a row of filter options to the header row. Users can interact with these options to filter the table.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgDMACyL0XgFRanEFeWVClBkUFl0sHAN4RpKCjRNsRC32g59LnQAbo6RZRU2W2Q7zq7uUjRRDrQoAAR+O1BTDBdggDjoGD2ByOJ2hjxYvAiwkuNBiIIgRSJY32UGS5xEGAMcEUHwgOwwEBit2JRTsZD4dEJcIRGAAIqSAOJ0AR5ZFQGw0ARsCh0UTBAAqdD4cHu8VQySsqEiaFQiQE-1ejmiYAAvgBdIA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 344),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataGrid(data, filters = True) #<<
-
- app = App(app_ui, server)
- - title: Set Table Size
- height: "350px"
- description: Set the `height` and `width` parameters of `render.DataGrid()` to constrain the output size of the table.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFqcQV5ZUKUGRQWXSwcA3hGkoKNE2xEDfaDn0udABujpFlFTabZNvOru6kaKINaFAAC322IKYoLsEAcdAwu32h2OUIeLF4EWEFxoMWBECKhLGeygyTOIgwBjgineEG2GAgMRuRKKdjIfDoBNh8IwABESQBxOgCPJIqA2AYisgGZJNADMi0WqAAHnMmFSBDwDDJgk15gBWJWqsB3eKoZJWVCRNCoRICP4vRzRMAAXwAukA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataGrid(data, width = "300px", height = "250px") #<<
-
- app = App(app_ui, server)
- - title: Customize Summary Statement
- height: "350px"
- description: Set `summary` in `render.DataGrid()` to `False` to remove the statement “Viewing rows 1 through 10 of 20”. Set it to a string template containing `{start}`, `{end}`, and `{total}` tokens, to customize the message.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFqcQV5ZUKUGRQWXSwcA3hGkoKNE2xEDfaDn0udABujpFlFTabZNvOru6kaKINaFAAC322IKYoLsEAcdAwu32h2OUIeLF4EWEFxoMWBECKhLGeygyTOIgwBjgineEG2GAgMRuRKKdjIfDoBNh8IwABESQBxOgCPJQlmFJFQGxi8XCGowKB0EzBJoANQE9lGNAE01EIGE+2kAF8mKSQPYTQ4mCARvs2EamjLCnd4qhklZUJE0KhEgI-i9HNEwEaALpAA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataGrid(
- data,
- summary = "Viendo filas {start} a {end} de {total}" #<<
- )
-
- app = App(app_ui, server)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A Data Grid presents tabular data in a spreadsheet-like view with cells separated by grid lines.
-
-To make a reactive Data Grid, follow three steps:
-
- 1. Call `ui.output_data_frame()` in the UI of your app to create a div in which to display the table. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of `ui.output_data_frame()` to a unique value.
-
- 2. Within the server function, define a new function whose name matches the id used above. The function should assemble the table to display and then return the table wrapped in `render.DataGrid()`. Shiny will rerun this function whenever it needs to build or update the output that has the matching id.
-
- 3. Decorate the function with `@render.data_frame`
-
-A Data Grid can also collect input from the user. To allow this, set `render.DataGrid(row_selection_mode="single")` or `render.DataGrid(row_selection_mode="multiple")` to allow the user to select one or more rows of the Data Grid.
-
-The indices of the selected rows will be accessible within the server function as a reactive variable returned by `input._selected_rows()`, where is the id of the `ui.output_data_frame()` associated with the table.
-
-The value returned will be `None` if no rows are selected, or a tuple of integers representing the indices of the selected rows. To filter a pandas data frame down to the selected rows, use `df.iloc[list(input._selected_rows())]`.
-
-If your table is a data frame that uses the pandas styler, replace `ui.output_data_frame()` with `ui.output_table()` and `@render.data_frame` with `@render.table`.
-
-See also: [DataTables](datatable.qmd)
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/outputs/data-grid/app-core.py b/components/outputs/data-grid/app-core.py
new file mode 100644
index 00000000..1c68961e
--- /dev/null
+++ b/components/outputs/data-grid/app-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fixed(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"), # <<
+)
+
+
+def server(input, output, session):
+ @render.data_frame # <<
+ def penguins_df():
+ return render.DataGrid(penguins) # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/data-grid/app-express.py b/components/outputs/data-grid/app-express.py
new file mode 100644
index 00000000..f94c95bc
--- /dev/null
+++ b/components/outputs/data-grid/app-express.py
@@ -0,0 +1,12 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame # <<
+def penguins_df():
+ return render.DataGrid(penguins) # <<
diff --git a/components/outputs/data-grid/app-variation-customize-summary-statement-core.py b/components/outputs/data-grid/app-variation-customize-summary-statement-core.py
new file mode 100644
index 00000000..3aafe228
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-customize-summary-statement-core.py
@@ -0,0 +1,21 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataGrid(
+ penguins,
+ summary="Viendo filas {start} a {end} de {total}", # <<
+ )
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/data-grid/app-variation-customize-summary-statement-express.py b/components/outputs/data-grid/app-variation-customize-summary-statement-express.py
new file mode 100644
index 00000000..d9a21854
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-customize-summary-statement-express.py
@@ -0,0 +1,15 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataGrid(
+ penguins,
+ summary="Viendo filas {start} a {end} de {total}", # <<
+ )
diff --git a/components/outputs/data-grid/app-variation-filterable-table-core.py b/components/outputs/data-grid/app-variation-filterable-table-core.py
new file mode 100644
index 00000000..0b25bba3
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-filterable-table-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataGrid(penguins, filters=True) # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/data-grid/app-variation-filterable-table-express.py b/components/outputs/data-grid/app-variation-filterable-table-express.py
new file mode 100644
index 00000000..79d90898
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-filterable-table-express.py
@@ -0,0 +1,13 @@
+# shiny.express
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataGrid(penguins, filters=True) # <<
diff --git a/components/outputs/data-grid/app-variation-select-rows-core.py b/components/outputs/data-grid/app-variation-select-rows-core.py
new file mode 100644
index 00000000..ed7fed5b
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-select-rows-core.py
@@ -0,0 +1,25 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_ui("rows"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataGrid(penguins, row_selection_mode="multiple") # <<
+
+ @render.ui()
+ def rows():
+ rows = input.penguins_df_selected_rows() # <<
+ selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
+ return f"Rows selected: {selected}"
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/data-grid/app-variation-select-rows-express.py b/components/outputs/data-grid/app-variation-select-rows-express.py
new file mode 100644
index 00000000..5e5c448c
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-select-rows-express.py
@@ -0,0 +1,19 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import input, ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.ui()
+def rows():
+ rows = input.penguins_df_selected_rows() # <<
+ selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
+ return f"Rows selected: {selected}"
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataGrid(penguins, row_selection_mode="multiple") # <<
diff --git a/components/outputs/data-grid/app-variation-set-table-size-core.py b/components/outputs/data-grid/app-variation-set-table-size-core.py
new file mode 100644
index 00000000..b60cfc1a
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-set-table-size-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataGrid(penguins, width="300px", height="250px") # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/data-grid/app-variation-set-table-size-express.py b/components/outputs/data-grid/app-variation-set-table-size-express.py
new file mode 100644
index 00000000..b886b1be
--- /dev/null
+++ b/components/outputs/data-grid/app-variation-set-table-size-express.py
@@ -0,0 +1,12 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataGrid(penguins, width="300px", height="250px") # <<
diff --git a/components/outputs/data-grid/index.qmd b/components/outputs/data-grid/index.qmd
new file mode 100644
index 00000000..7f0863a7
--- /dev/null
+++ b/components/outputs/data-grid/index.qmd
@@ -0,0 +1,141 @@
+---
+title: Data Grid
+sidebar: components
+preview: '
+
+
+
+
_selected_rows()`.
+ apps:
+ - title: Preview
+ file: app-variation-select-rows-core.py
+ height: 350
+ - title: Express
+ file: app-variation-select-rows-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTPER0fgoiIR0dNQ1RZABeOQUVCKFRAAoASjCIISxDACZkrTAABQ4uZEK+JO0wdIgMgAErCBsGLCE0nRs6ZCYAdxE0xB1kYe7SPpj-QIocCs1lRTplETh2OGIqFV7+1OGAYmQAHgOhkeXV9bhFCYKiAqwAK1JhZJEKBmTBHbppcX8DC0uyS2qR2gi6W2QK2WyAKADlyHACidhlYKPwGBBkHQCgAlMZiM5rDYoECEi6KAC+SNqNIa1lsWEUUAoUGUjFgiKacC6iTmCwGyO6cDRGKFXJaABFmVAAOIMQSKZK80REXpLFZEwTkZQwUg2aIFGD8dgUQToVYFHbIfZHHSEVAUXA8WhgKiuChgCkAXSAA
+ height: 350
+ - title: Core
+ file: app-variation-select-rows-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLVGCRUwA7jV1DVlNLW0UyopQFFDJDLBwRQGaY3RatfUQYRDhDnQGjgBujkHCI0TNrS1EInAiIoLkIYgDyAACdhAODFjjk9OzT9usKqLRR0UKPCDZSHIOwUfgMCFvD5YAAiEygAHEGIJ0gtRLZSN1lFd2HBiBQ7hBlDBSA4vCsYPx2OT0CSViEsgBiZAAHm54Uhr3sjiwQlC-zgOx6IjBT0hUpixxaOCBoiWRLgJLJcBUUtCnJ5fIhUKyxNJVEUMRWRBWWAAVqRhEERBQGEd2XRpOJxBCRBZtUEpSF2YJJQSxBqrsgVgA5chwFay7IwuEQ5ZgABKYd2mvNKBApq1igAvgnNmWMOgYtZ0EEKx1LvtHBtCKgKLgeLQwFQAB4UMBFgC6QA
+ height: 350
+ - title: Filterable Table
+ description: Set `render.DataGrid(filters=True)` to add a row of filter options
+ to the header row. Users can interact with these options to filter the table.
+ apps:
+ - title: Preview
+ file: app-variation-filterable-table-core.py
+ height: 350
+ - title: Express
+ file: app-variation-filterable-table-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQGJkBnACwEsJcs4APdAJziNGAHQgAzPqRjJ0UADbw+6agHMAru0bJWMdKT4Vkc0lAAmAfWUR1m0RKlM2Hbbv2GBEU3D53J0luycPPyCWjp6BsgaoqJWNhBaALxGJhZxGgkAFACUMRAaWMwATJnCYAAK8orI5aoZImC5EHkAAh5efFimUBRQ5hKwcKJeYjJ1muamYjmIosjzyAIUanwQi9QdWAAiPVAA4nysppnpmkRirHJUfIyJACp8anDZ8wwAPG+ihKgUuMq0YCo3AoYAAvgBdIA
+ height: 350
+ - title: Core
+ file: app-variation-filterable-table-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgAHEGIJ0kNREQ6IJ2FQGCIvAAVBj8OAhLIAYmQAB4SeEdBh0DFrOgglSooIdotHFNCKgKLgeLQwFQAB4UMAAXwAukA
+ height: 350
+ - title: Set Table Size
+ description: Set the `height` and `width` parameters of `render.DataGrid()` to
+ constrain the output size of the table.
+ apps:
+ - title: Preview
+ file: app-variation-set-table-size-core.py
+ height: 350
+ - title: Express
+ file: app-variation-set-table-size-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTORCdHTUNUWQAXjkFFWChUQAKAEpAiCEsQwAmOK0wAAUOLmQcvljtMCSIZIABKwgbBixFKAooZUZYOB0bOlZizWVFOkTEHWRR5CsKfgYIcetbLAARJqgAcQZBRTiYzSIAdw2KQzDsgGYABjP0V2yiQzhBXkMKY7B0gFZL67LRgGJkAB5-jpCKgKLgeLQwFRXBQwABfAC6QA
+ height: 350
+ - title: Core
+ file: app-variation-set-table-size-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgAHEGIJ0kNREQAO7wiiGLxjADMAAYcegAB5jIiGOCCXiGCiYsD5ACs+KJtSyAGJkAAeNnhHQYdAxazoII8qKCHaLRxTQioCi4Hi0MBUAkUMAAXwAukA
+ height: 350
+ - title: Customize Summary Statement
+ description: 'Set `summary` in `render.DataGrid()` to `False` to remove the statement
+ "Viewing rows 1 through 10 of 20". Set it to a string template containing `{start}`,
+ `{end}`, and `{total}` tokens, to customize the message.
+
+ '
+ apps:
+ - title: Preview
+ file: app-variation-customize-summary-statement-core.py
+ height: 350
+ - title: Express
+ file: app-variation-customize-summary-statement-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTORCdHTUNUWQAXjkFFWChUQAKAEpAiCEsQwAmOK0wAAUOLmQcvljtMCSIZIABKwgbBixFKAooZUZYOB0bOlZizWVFOkTEHWRR5CsKfgYIcetbLAARJqgAcQZBRSyZsZ2YzQIRnbGRfhgYKAZcMOyANUFrUmQ6QXYoMRARZpkAX2QoZBA1l+NgBFFIzXY32yRGQAGJkAAeBGHUblQioCi4Hi0MBUVwUMDfAC6QA
+ height: 350
+ - title: Core
+ file: app-variation-customize-summary-statement-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgAHEGIJ0k8-tkhqIJkikSJ+DAYFAGLgvGMAGqCeykZB0QTsKBiEAiboyAC+yCgyBA9iZDlZFFI3XYDLGRGQAGJkAAeUWI7JTcIYdAxazoIKyqKCHaLRxTQioCi4Hi0MBUAAeFDADIAukA
+ height: 350
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A Data Grid presents tabular data in a spreadsheet-like view with cells separated by grid lines.
+
+To make a reactive Data Grid, follow three steps:
+
+ 1. Call `ui.output_data_frame()` in the UI of your app to create a div in which to display the table. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of `ui.output_data_frame()` to a unique value.
+
+ 2. Within the server function, define a new function whose name matches the id used above. The function should assemble the table to display and then return the table wrapped in `render.DataGrid()`. Shiny will rerun this function whenever it needs to build or update the output that has the matching id.
+
+ 3. Decorate the function with `@render.data_frame`
+
+A Data Grid can also collect input from the user. To allow this, set `render.DataGrid(row_selection_mode="single")` or `render.DataGrid(row_selection_mode="multiple")` to allow the user to select one or more rows of the Data Grid.
+
+The indices of the selected rows will be accessible within the server function as a reactive variable returned by `input._selected_rows()`, where is the id of the `ui.output_data_frame()` associated with the table.
+
+The value returned will be `None` if no rows are selected, or a tuple of integers representing the indices of the selected rows. To filter a pandas data frame down to the selected rows, use `df.iloc[list(input._selected_rows())]`.
+
+If your table is a data frame that uses the pandas styler, replace `ui.output_data_frame()` with `ui.output_table()` and `@render.data_frame` with `@render.table`.
+
+See also: [DataTables](../datatable/index.qmd)
+
+:::{#variations}
+:::
diff --git a/components/outputs/datatable.qmd b/components/outputs/datatable.qmd
deleted file mode 100644
index 62638025..00000000
--- a/components/outputs/datatable.qmd
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: "DataTable"
-sidebar: components
-preview: |
-
-
-
_selected_rows()`.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFTQBKg6IubHCEFAqILc2pxBXllRQAHmQNDENzYhBsQnCBACp0fHAra4VnC4VJQKKBkKBZOiwOANcIaEE0JqxCDI7QOPouOgAN0ckTKFRs5zIl2crncpGiiH+TAAAkTLtSaXYIA46BhQeDIdDqeiWLwIsIETEqRAimKxmCoMk4SIMAY4Io8RBLhgIDFkeKinYyHw6KLmayMAARSUfKAdPaRDlQGwPJS7fZkDwQJQwYgOQJNGB8NhOqZwJFxMV0oFkRkGxwYG5h0VFXkPYTC6mFB0HOAKZL4shYfnwhQ0e1wPZp5QJmLJ2xwHV6pgAchstYwACtiEJIsIyHQ8dEmDQpGJnvoi4706j4qhklZUJE0KhEgJSdjHNEwABfAC6QA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- "Rows selected: ", ui.output_text("rows", inline=True),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataTable(data, row_selection_mode="multiple") #<<
-
- @render.text
- def rows():
- selected = input.penguins_df_selected_rows() #<<
- return ', '.join(str(i) for i in selected)
-
- app = App(app_ui, server)
- - title: Filterable Table
- height: "350px"
- description: Set `render.DataTable(filters=True)` to add a row of filter options to the header row. Users can interact with these options to filter the table.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgDMACyL0XgFRanEFeWVClBkUFl0sHAN4RpKCjRNsRC32g59LnQAbo6RZRU2W2Q7zq7uUjRRDrQoAAR+O1BTDBdggDjoGD2ByOJ2hjxYvAiwkuNBiIIgRSJY32UGS5xEGAMcEUHwgOwwEBit2JRTsZD4dEJcIRGAAIqSACpQDpsU7IqA2GgCNgUOiiYKCuh8OD3eKoZJWVCRNCoRICf6vRzRMAAXwAukA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 344),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataTable(data, filters = True) #<<
-
- app = App(app_ui, server)
- - title: Set Table Size
- height: "350px"
- description: Set the `height` and `width` parameters of `render.DataTable()` to constrain the output size of the table.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFqcQV5ZUKUGRQWXSwcA3hGkoKNE2xEDfaDn0udABujpFlFTabZNvOru6kaKINaFAAC322IKYoLsEAcdAwu32h2OUIeLF4EWEFxoMWBECKhLGeygyTOIgwBjgineEG2GAgMRuRKKdjIfDoBNh8IwABESQAVKAdNgnJFQGwDAQKMgGZJNADMi0WqAAHnMmFSBDwDDJgk15gBWFXqsB3eKoZJWVCRNCoRICP4vRzRMAAXwAukA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataTable(data, width = "300px", height = "250px") #<<
-
- app = App(app_ui, server)
- - title: Customize Summary Statement
- height: "350px"
- description: Set `summary` in `render.DataGrid()` to `False` to remove the statement “Viewing rows 1 through 10 of 20”. Set it to a string template containing `{start}`, `{end}`, and `{total}` tokens, to customize the message.
- preview: https://shinylive.io/py/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACVKAG3jtUoHMBXAJYQAzkwExUxOmSZtiUACYB9bhH5DhAHQj1GTYQAsh2MRKkyAgujxM6lBXDo3hcYcIGkbg7dtXqRTAC8svLKfoIiABQAlD7Q6EqCQUyCWFA8cEo0bIIKkdpMhSkCGEKofGRKEHycAoT5kJr4TE0AcjUARo5MxDS2xADuomTETAoCwqhsUNhNNgBMAAzReAVFqcQV5ZUKUGRQWXSwcA3hGkoKNE2xEDfaDn0udABujpFlFTabZNvOru6kaKINaFAAC322IKYoLsEAcdAwu32h2OUIeLF4EWEFxoMWBECKhLGeygyTOIgwBjgineEG2GAgMRuRKKdjIfDoBNh8IwABESQAVKAdNgnKEswpIqA2cUS4Q1GBQOgmYJNABqAnsoxoAmmohAwn20gAvkxSSB7KaHEwQCN9mxjU1ZYU7vFUMkrKhImhUIkBH8Xo5omBjQBdIA
- code: |
- from palmerpenguins import load_penguins
- from shiny import App, render, session, ui
-
- penguins = load_penguins()
-
- app_ui = ui.page_fluid(
- ui.input_numeric("n", "Number of rows to display", 20),
- ui.output_data_frame("penguins_df")
- )
-
- def server(input, output, session):
- @render.data_frame
- def penguins_df():
- data = penguins.head(input.n())
- return render.DataTable(
- data,
- summary = "Viendo filas {start} a {end} de {total}" #<<
- )
-
- app = App(app_ui, server)
-
----
-
-:::{#component}
-:::
-
-## Details
-
-A DataTable presents tabular data in a figure-like view with a minimum of grid lines.
-
-To make a reactive Data Table, follow three steps:
-
- 1. Call `ui.output_data_frame()` in the UI of your app to create a div in which to display the table. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of `ui.output_data_frame()` to a unique value.
-
- 2. Within the server function, define a new function whose name matches the id used above. The function should assemble the table to display and then return the table wrapped in `render.DataTable()`. Shiny will rerun this function whenever it needs to build or update the output that has the matching id.
-
- 3. Decorate the function with two decorators:
-
- 1. `@output`
- 2. `@render.data_frame`
-
-A DataTable can also collect input from the user. To allow this, set `render.DataTable(row_selection_mode="single")` or `render.DataTable(row_selection_mode="multiple")` to allow the user to select one or more rows of the DataTable.
-
-The indices of the selected rows will be accessible within the server function as a reactive variable returned by `input._selected_rows()`, where is the id of the `ui.output_data_frame()` associated with the table.
-
-The value returned will be `None` if no rows are selected, or a tuple of integers representing the indices of the selected rows. To filter a pandas data frame down to the selected rows, use `df.iloc[list(input._selected_rows())]`.
-
-If your table is a data frame that uses the pandas styler, replace `ui.output_data_frame()` with `ui.output_table()` and `@render.data_frame` with `@render.table`.
-
-See also [Data Grids](data-grid.qmd)
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/outputs/datatable/app-core.py b/components/outputs/datatable/app-core.py
new file mode 100644
index 00000000..732121d6
--- /dev/null
+++ b/components/outputs/datatable/app-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"), # <<
+)
+
+
+def server(input, output, session):
+ @render.data_frame # <<
+ def penguins_df():
+ return render.DataTable(penguins) # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/datatable/app-express.py b/components/outputs/datatable/app-express.py
new file mode 100644
index 00000000..aa39acf6
--- /dev/null
+++ b/components/outputs/datatable/app-express.py
@@ -0,0 +1,12 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame # <<
+def penguins_df():
+ return render.DataTable(penguins) # <<
diff --git a/components/outputs/datatable/app-variation-customize-summary-statement-core.py b/components/outputs/datatable/app-variation-customize-summary-statement-core.py
new file mode 100644
index 00000000..93865b93
--- /dev/null
+++ b/components/outputs/datatable/app-variation-customize-summary-statement-core.py
@@ -0,0 +1,21 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataTable(
+ penguins,
+ summary="Viendo filas {start} a {end} de {total}", # <<
+ )
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/datatable/app-variation-customize-summary-statement-express.py b/components/outputs/datatable/app-variation-customize-summary-statement-express.py
new file mode 100644
index 00000000..efcdc9ce
--- /dev/null
+++ b/components/outputs/datatable/app-variation-customize-summary-statement-express.py
@@ -0,0 +1,15 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataTable(
+ penguins,
+ summary="Viendo filas {start} a {end} de {total}", # <<
+ )
diff --git a/components/outputs/datatable/app-variation-filterable-table-core.py b/components/outputs/datatable/app-variation-filterable-table-core.py
new file mode 100644
index 00000000..7ded73ca
--- /dev/null
+++ b/components/outputs/datatable/app-variation-filterable-table-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataTable(penguins, filters=True) # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/datatable/app-variation-filterable-table-express.py b/components/outputs/datatable/app-variation-filterable-table-express.py
new file mode 100644
index 00000000..eb8f7eb3
--- /dev/null
+++ b/components/outputs/datatable/app-variation-filterable-table-express.py
@@ -0,0 +1,12 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataTable(penguins, filters=True) # <<
diff --git a/components/outputs/datatable/app-variation-select-rows-core.py b/components/outputs/datatable/app-variation-select-rows-core.py
new file mode 100644
index 00000000..a6ff207f
--- /dev/null
+++ b/components/outputs/datatable/app-variation-select-rows-core.py
@@ -0,0 +1,25 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_ui("rows"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataTable(penguins, row_selection_mode="single") # <<
+
+ @render.ui
+ def rows():
+ rows = input.penguins_df_selected_rows() # <<
+ selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
+ return f"Rows selected: {selected}"
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/datatable/app-variation-select-rows-express.py b/components/outputs/datatable/app-variation-select-rows-express.py
new file mode 100644
index 00000000..7fac1c5b
--- /dev/null
+++ b/components/outputs/datatable/app-variation-select-rows-express.py
@@ -0,0 +1,19 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import input, ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.ui
+def rows():
+ rows = input.penguins_df_selected_rows() # <<
+ selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
+ return f"Rows selected: {selected}"
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataTable(penguins, row_selection_mode="single") # <<
diff --git a/components/outputs/datatable/app-variation-set-table-size-core.py b/components/outputs/datatable/app-variation-set-table-size-core.py
new file mode 100644
index 00000000..7912af61
--- /dev/null
+++ b/components/outputs/datatable/app-variation-set-table-size-core.py
@@ -0,0 +1,18 @@
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+penguins = load_penguins()
+
+app_ui = ui.page_fluid(
+ ui.h2("Palmer Penguins"),
+ ui.output_data_frame("penguins_df"),
+)
+
+
+def server(input, output, session):
+ @render.data_frame
+ def penguins_df():
+ return render.DataTable(penguins, width="300px", height="250px") # <<
+
+
+app = App(app_ui, server)
diff --git a/components/outputs/datatable/app-variation-set-table-size-express.py b/components/outputs/datatable/app-variation-set-table-size-express.py
new file mode 100644
index 00000000..c9fc3d16
--- /dev/null
+++ b/components/outputs/datatable/app-variation-set-table-size-express.py
@@ -0,0 +1,12 @@
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import ui
+
+penguins = load_penguins()
+
+ui.h2("Palmer Penguins")
+
+
+@render.data_frame
+def penguins_df():
+ return render.DataTable(penguins, width="300px", height="250px") # <<
diff --git a/components/outputs/datatable/index.qmd b/components/outputs/datatable/index.qmd
new file mode 100644
index 00000000..8edc6fbe
--- /dev/null
+++ b/components/outputs/datatable/index.qmd
@@ -0,0 +1,143 @@
+---
+title: DataTable
+sidebar: components
+preview: '
+
+
+
+
_selected_rows()`.
+ apps:
+ - title: Preview
+ file: app-variation-select-rows-core.py
+ height: 350
+ - title: Express
+ file: app-variation-select-rows-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTPER0fgoiIR0dNQ1RZABeOQUVCKFRAAoASjCIISxDACZkrTAABQ4uZEK+JO0wdIgMgAErCBsGLFCmuDpkJgB3ETTEHWQhrtJemP9AihwKzWVFOmUROHY4YioVHr7UoYBiZAAefcHhpZW1uEVxgqICrAArUmFkkQoGZMFtumlxfwMLC+Sm1S20EnU2yGWS2QBQAcuQ4AVjkMrBR+AwIMg6AUAEqjMSnVbrFAgAnnRQAX0RtWpDWstiwiigFCgykYsAR7U6iVm836SK6cFR6IF7RaABEmVAACpQABGK2S3NERB6i2WhME5GUMFINmiBREwl4KwK22Qe0OOkIqAouB4tDAVFcFDA5IAukA
+ height: 350
+ - title: Core
+ file: app-variation-select-rows-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLVGCRUwA7jV1DVlNLW0UyopQFFDJDLBwRQGaY3RatfUQYRDhDnQGjgBujkHCI0TNrS1EInAiIoLkIYgDyAACdhAODFjjk9OzT9usKqLRR0UKPCDZSHIOwUfgMCFvD5YAAiEygABUoAAjdhzBaiWykbrKK644gUO4QZQwUgOLwrW7qXErEJZADEyAAPJzwpDXvZHFgXBDsgCeiIwU9IeKYscWjggaIliS4GSqCpxaF2VyeSKobs1XBFDEVkQVlgAFakYRBEQUBhHVl0aTicQQkQWI1BcUhVmCHYy1VXZArABy5DgKyl2RhcIhyzAACUiWJSXByUaUCA0xnFABfKObIsYdAxazoIIljqXfaODaEVAUXA8WhgKgADwoYDzAF0gA
+ height: 350
+ - title: Filterable Table
+ description: Set `render.DataTable(filters=True)` to add a row of filter options
+ to the header row. Users can interact with these options to filter the table.
+ apps:
+ - title: Preview
+ file: app-variation-filterable-table-core.py
+ height: 350
+ - title: Express
+ file: app-variation-filterable-table-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTORCdHTUNUWQAXjkFFWChUQAKAEpAiCEsQwAmOK0wAAUOLmQcvljtMCSIZIABKwgbBixFKAooZUZYOB0bOlZizWVFOkTEHWRR5CsKfgYIcetbLAARJqgAFSgAI3Y4OJjNIjpBdioGETCVhn44BNGAYmQAHnudQlQKXB5aMCpXCjAAXwAukA
+ height: 350
+ - title: Core
+ file: app-variation-filterable-table-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgABUoAAjdgDIaiIh0QTsKgMEReaEMfhwEJZADEyAAPKTwjoMOgYtZ0EFqVFBDtFo4poRUBRcDxaGAqAAPChgAC+AF0gA
+ height: 350
+ - title: Set Table Size
+ description: Set the `height` and `width` parameters of `render.DataTable()` to
+ constrain the output size of the table.
+ apps:
+ - title: Preview
+ file: app-variation-set-table-size-core.py
+ height: 350
+ - title: Express
+ file: app-variation-set-table-size-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTORCdHTUNUWQAXjkFFWChUQAKAEpAiCEsQwAmOK0wAAUOLmQcvljtMCSIZIABKwgbBixFKAooZUZYOB0bOlZizWVFOkTEHWRR5CsKfgYIcetbLAARJqgAFSgAI3Y4OJjNIgB3QUUKQzDsgGYABkv0V2yiQzhBXkMKM7B0gFYbu7LRgGJkAAeIE6QioCi4Hi0MBUVwUMAAXwAukA
+ height: 350
+ - title: Core
+ file: app-variation-set-table-size-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgABUoAAjdgDIaiIgAd0Eigohi8YwAzAAGfHoAAeYyIhjggl4hgoOLA+QArETSbUsgBiZAAHk54R0GHQMWs6CC-Kigh2i0cU0IqAouB4tDAVGJFDAAF8ALpAA
+ height: 350
+ - title: Customize Summary Statement
+ description: 'Set `summary` in `render.DataGrid()` to `False` to remove the statement
+ "Viewing rows 1 through 10 of 20". Set it to a string template containing `{start}`,
+ `{end}`, and `{total}` tokens, to customize the message.
+
+ '
+ apps:
+ - title: Preview
+ file: app-variation-customize-summary-statement-core.py
+ height: 350
+ - title: Express
+ file: app-variation-customize-summary-statement-express.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyG1RXAY69LIyaxwAHuisixEqTORCdHTUNUWQAXjkFFWChUQAKAEpAiCEsQwAmOK0wAAUOLmQcvljtMCSIZIABKwgbBixFKAooZUZYOB0bOlZizWVFOkTEHWRR5CsKfgYIcetbLAARJqgAFSgAI3Y4LJmxvZjNAhG9sZF+GBgoBlww7IA1QWtSZDpBdigxEBFmmQBfZCgyBA1n+NiBFFIzXYv2yRGQAGJkAAeJHHUblQioCi4Hi0MBUVwUMC-AC6QA
+ height: 350
+ - title: Core
+ file: app-variation-customize-summary-statement-core.py
+ shinylive: https://shinylive.io/py/editor/#code=NobwRAdghgtgpmAXAAjFADugdOgnmAGlQGMB7CAFzkqVQDMAnUmZdKAG3gfWoHMBXAJYQAzskEx0pBhWTtSUACYB9HhAHCRAHQiNmyEQAthucZOmyAgpiINqiuAyJCdOtRtHIAvHIUr3QqIAFACUrtCYykLeyEI4ULxwynTsQopBOshZsYJYhgBMGWAAChxcyMV8gdpgIQSZ2XGk-BToLcqKUBRQyQywcEUBmh10WrX1EGEQ4Q50Bo4Abo5Bwm0URM2tLUQicCIiguQhiA1ZAAJ2EA4MWJ3dvf2nyLOsVcOKdKEnENm-yHYUfgMH6Xa5YAAiXSgABUoAAjdgDJ5-bJDUQTFEokT8GAwKAMXBeMYANUE9lIyDognYUDEIBE3RkAF9kFBkCB7CyHOyKKRuuwmWMiMgAMTIAA84uR2Sm4Qw6Bi1nQQXlUUEO0WjimhFQFFwPFoYCoAA8KGAmQBdIA
+ height: 350
+---
+
+:::{#example}
+:::
+
+:::{#relevant-functions}
+:::
+
+## Details
+
+A DataTable presents tabular data in a figure-like view with a minimum of grid lines.
+
+To make a reactive Data Table, follow three steps:
+
+ 1. Call `ui.output_data_frame()` in the UI of your app to create a div in which to display the table. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of `ui.output_data_frame()` to a unique value.
+
+ 2. Within the server function, define a new function whose name matches the id used above. The function should assemble the table to display and then return the table wrapped in `render.DataTable()`. Shiny will rerun this function whenever it needs to build or update the output that has the matching id.
+
+ 3. Decorate the function with two decorators:
+
+ 1. `@output`
+ 2. `@render.data_frame`
+
+A DataTable can also collect input from the user. To allow this, set `render.DataTable(row_selection_mode="single")` or `render.DataTable(row_selection_mode="multiple")` to allow the user to select one or more rows of the DataTable.
+
+The indices of the selected rows will be accessible within the server function as a reactive variable returned by `input._selected_rows()`, where is the id of the `ui.output_data_frame()` associated with the table.
+
+The value returned will be `None` if no rows are selected, or a tuple of integers representing the indices of the selected rows. To filter a pandas data frame down to the selected rows, use `df.iloc[list(input._selected_rows())]`.
+
+If your table is a data frame that uses the pandas styler, replace `ui.output_data_frame()` with `ui.output_table()` and `@render.data_frame` with `@render.table`.
+
+See also [Data Grids](../data-grid/index.qmd)
+
+:::{#variations}
+:::
diff --git a/components/outputs/image.qmd b/components/outputs/image.qmd
deleted file mode 100644
index 4ee44655..00000000
--- a/components/outputs/image.qmd
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: "Image"
-sidebar: components
-preview: |
-
-
-
+
+
+
+
-
-
+
+
+
+
-
-
_click()`, where `` is the id of the plot. The input value will be a dictionary with x and y elements indicating the mouse position.
-
- 2. `dblclick` - This is just like the click parameter, but for double-click events. The value can be accessed as `input._dblclick()`.
-
- 3. `hover` - When `hover = True`, the plot will allow the user to hover over the plotting area, and will send the coordinates of the cursor to the server, where they can be accessed as a reactive variable named `input._hover()`, where `` is the id of the plot. The input value will be a dictionary with x and y elements indicating the mouse position. To control the hover time or hover delay type, set `hover` to `hover_opts()`.
-
- 4. `brush` - When `brush = True`, the plot will allow the user to “brush” in the plotting area, and will send information about the brushed area to the server, where it can be accessed as a reactive variable named `input._brush()`, where `` is the id of the plot. Brushing means that the user will be able to draw a rectangle in the plotting area and drag it around. The value will be a named list with xmin, xmax, ymin, and ymax elements indicating the brush area. To control the brush behavior, set `brush` to `brush_opts()`.
-
- Multiple `output_image()`/`output_plot()` calls may share the same id value; brushing one image or plot will cause any other brushes with the same id to disappear.
-
-:::{#variations}
-:::
\ No newline at end of file
diff --git a/components/outputs/plot-matplotlib/app-core.py b/components/outputs/plot-matplotlib/app-core.py
new file mode 100644
index 00000000..d795c626
--- /dev/null
+++ b/components/outputs/plot-matplotlib/app-core.py
@@ -0,0 +1,24 @@
+import matplotlib.pyplot as plt
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.input_slider("n", "Number of bins", 0, 100, 20),
+ ui.output_plot("plot"), #<<
+)
+
+def server(input, output, session):
+ @render.plot(alt="A histogram") #<<
+ def plot(): #<<
+ df = load_penguins()
+ mass = df["body_mass_g"]
+
+ fig, ax = plt.subplots()
+ ax.hist(mass, input.n(), density=True)
+ ax.set_title("Palmer Penguin Masses")
+ ax.set_xlabel("Mass (g)")
+ ax.set_ylabel("Density")
+
+ return fig #<<
+
+app = App(app_ui, server, debug=True)
diff --git a/components/outputs/plot-matplotlib/app-express.py b/components/outputs/plot-matplotlib/app-express.py
new file mode 100644
index 00000000..b5dac9cf
--- /dev/null
+++ b/components/outputs/plot-matplotlib/app-express.py
@@ -0,0 +1,20 @@
+import matplotlib.pyplot as plt
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import input, ui
+
+ui.input_slider("n", "Number of bins", 0, 100, 20)
+
+
+@render.plot(alt="A histogram") # <<
+def plot(): # <<
+ df = load_penguins()
+ mass = df["body_mass_g"]
+
+ fig, ax = plt.subplots()
+ ax.hist(mass, input.n(), density=True)
+ ax.set_title("Palmer Penguin Masses")
+ ax.set_xlabel("Mass (g)")
+ ax.set_ylabel("Density")
+
+ return fig # <<
diff --git a/components/outputs/plot-matplotlib/app-variation-plot-as-input-core.py b/components/outputs/plot-matplotlib/app-variation-plot-as-input-core.py
new file mode 100644
index 00000000..31ddce42
--- /dev/null
+++ b/components/outputs/plot-matplotlib/app-variation-plot-as-input-core.py
@@ -0,0 +1,51 @@
+import matplotlib.pyplot as plt
+from palmerpenguins import load_penguins
+from shiny import App, render, ui
+
+app_ui = ui.page_fluid(
+ ui.output_plot(
+ "plot",
+ click=True, #<<
+ dblclick=True, #<<
+ hover=True, #<<
+ brush=True #<<
+ ),
+ "Click:",
+ ui.output_text_verbatim("clk", placeholder=True),
+ "Double Click:",
+ ui.output_text_verbatim("dblclk", placeholder=True),
+ "Hover:",
+ ui.output_text_verbatim("hvr", placeholder=True),
+ "Brush",
+ ui.output_text_verbatim("brsh", placeholder=True),
+)
+
+def server(input, output, session):
+ @render.plot(alt="A histogram")
+ def plot():
+ df = load_penguins()
+ mass = df["body_mass_g"]
+ bill = df["bill_length_mm"]
+
+ plt.scatter(mass, bill)
+ plt.xlabel("Mass (g)")
+ plt.ylabel("Bill Length (mm)")
+ plt.title("Penguin Mass vs Bill Length")
+
+ @render.text
+ def clk():
+ return input.plot_click()
+
+ @render.text
+ def dblclk():
+ return input.plot_dblclick()
+
+ @render.text
+ def hvr():
+ return input.plot_hover()
+
+ @render.text
+ def brsh():
+ return input.plot_brush()
+
+app = App(app_ui, server, debug=True)
diff --git a/components/outputs/plot-matplotlib/app-variation-plot-as-input-express.py b/components/outputs/plot-matplotlib/app-variation-plot-as-input-express.py
new file mode 100644
index 00000000..ad8bb7cc
--- /dev/null
+++ b/components/outputs/plot-matplotlib/app-variation-plot-as-input-express.py
@@ -0,0 +1,53 @@
+import matplotlib.pyplot as plt
+from palmerpenguins import load_penguins
+from shiny import render
+from shiny.express import input, suspend_display, ui
+
+ui.output_plot(
+ "plot",
+ click=True, # <<
+ dblclick=True, # <<
+ hover=True, # <<
+ brush=True, # <<
+)
+
+"Click:"
+ui.output_text_verbatim("clk", placeholder=True)
+"Double Click:"
+ui.output_text_verbatim("dblclk", placeholder=True)
+"Hover:"
+ui.output_text_verbatim("hvr", placeholder=True)
+"Brush"
+ui.output_text_verbatim("brsh", placeholder=True)
+
+
+with suspend_display():
+ # Note that this Express app uses `suspend_display()` so that we can
+ # manually add the `ui.output_plot()` and others to the page.
+
+ @render.plot(alt="A histogram")
+ def plot():
+ df = load_penguins()
+ mass = df["body_mass_g"]
+ bill = df["bill_length_mm"]
+
+ plt.scatter(mass, bill)
+ plt.xlabel("Mass (g)")
+ plt.ylabel("Bill Length (mm)")
+ plt.title("Penguin Mass vs Bill Length")
+
+ @render.text
+ def clk():
+ return input.plot_click()
+
+ @render.text
+ def dblclk():
+ return input.plot_dblclick()
+
+ @render.text
+ def hvr():
+ return input.plot_hover()
+
+ @render.text
+ def brsh():
+ return input.plot_brush()
diff --git a/components/outputs/plot-matplotlib/index.qmd b/components/outputs/plot-matplotlib/index.qmd
new file mode 100644
index 00000000..30783aae
--- /dev/null
+++ b/components/outputs/plot-matplotlib/index.qmd
@@ -0,0 +1,118 @@
+---
+title: Plot (Matplotlib)
+sidebar: components
+preview: '
+
+
+
+
_click()`, where `` is the id of the plot. The input value will be a dictionary with x and y elements indicating the mouse position.
+
+ 2. `dblclick` - This is just like the click parameter, but for double-click events. The value can be accessed as `input._dblclick()`.
+
+ 3. `hover` - When `hover = True`, the plot will allow the user to hover over the plotting area, and will send the coordinates of the cursor to the server, where they can be accessed as a reactive variable named `input._hover()`, where `` is the id of the plot. The input value will be a dictionary with x and y elements indicating the mouse position. To control the hover time or hover delay type, set `hover` to `hover_opts()`.
+
+ 4. `brush` - When `brush = True`, the plot will allow the user to “brush” in the plotting area, and will send information about the brushed area to the server, where it can be accessed as a reactive variable named `input._brush()`, where `` is the id of the plot. Brushing means that the user will be able to draw a rectangle in the plotting area and drag it around. The value will be a named list with xmin, xmax, ymin, and ymax elements indicating the brush area. To control the brush behavior, set `brush` to `brush_opts()`.
+
+ Multiple `output_image()`/`output_plot()` calls may share the same id value; brushing one image or plot will cause any other brushes with the same id to disappear.
+
+:::{#variations}
+:::
diff --git a/components/outputs/plot-plotly.qmd b/components/outputs/plot-plotly.qmd
deleted file mode 100644
index 3a3db69f..00000000
--- a/components/outputs/plot-plotly.qmd
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: "Plot (Plotly)"
-sidebar: components
-preview: |
-
-
-
+
+
+
+
-
-
+
+
+
+
` and navigate into it with `cd `
2. Install Shiny. We strongly recommend using a virtual environment for this as it will eliminate dependency resolution headaches and make deployment easier.
@@ -75,7 +81,7 @@ While R doesn't have an exact analog to decorators they are similar to [function
- Decorate output function with `@output`
- Use rendering decorators like `@render.plot`, `@render.text`, or `@render.ui` instead of `renderPlot()`, `renderText`, or `renderUI`
-- Reactive calculations (equivalent to reactive expressions in R) are decorated `@reactive.Calc`, and reactive effects (equivalent to observers in R) are decorated with `@reactive.Effect`.
+- Reactive calculations (equivalent to reactive expressions in R) are decorated `@reactive.calc`, and reactive effects (equivalent to observers in R) are decorated with `@reactive.effect`.
:::
::: {.grid .column-screen-inset}
@@ -186,7 +192,7 @@ app = App(app_ui, server)
All of the Shiny R functions are in a single package namespace.
On the Python side we make use of [submodules](https://docs.python.org/3/tutorial/modules.html#packages) to keep related functions together.
-Note that "submodules" in this case refers to the generic module which is not the same as [shiny modules](workflow-modules.qmd).
+Note that "submodules" in this case refers to the generic module which is not the same as [shiny modules](modules.qmd).
For example, instead of `sliderInput()`, you would call `ui.input_slider()`, where the `ui.` refers to a submodule of the main `shiny` module.
::: callout-tip
@@ -294,7 +300,7 @@ app_ui = ui.page_fluid(
)
def server(input, output, session):
- @reactive.Calc
+ @reactive.calc
def n():
return input.n()
@@ -325,11 +331,11 @@ For the most part you can follow this naming pattern to find the function you're
| R Function | Python Equivalent |
|-----------------------------------|-------------------------------------|
-| `observeEvent` | `@reactive.Effect` |
-| `reactive` | `@reactive.Calc` |
+| `observeEvent` | `@reactive.effect` |
+| `reactive` | `@reactive.calc` |
| `bindEvent` | `@ractive.event` |
-| `reactiveEvent` | `@reactive.Calc` with `@reactive.event` |
-| `observeEvent` | `@reactive.Effect` with `@reactive.event` |
+| `reactiveEvent` | `@reactive.calc` with `@reactive.event` |
+| `observeEvent` | `@reactive.effect` with `@reactive.event` |
| `htmlTemplate` | `page_template` |
| `tabPanelBody` | `navs_content` |
| `*Tab` (`insertTab`, `appendTab`, etc) | `nav_*` (`nav_insert`, `nav_append` etc) |
@@ -343,7 +349,7 @@ Reactivity works mostly the same in R and Python, but there are a few small diff
In Shiny for R, reactive expressions (created by `reactive()`, which are used when you want to compute a value (which is then used in an output or an observer), and observers (created by `observe()`) are used for their side effects, like writing data to disk.
This is a common source of confusion because the names `reactive()` and `observe()` do not clearly express when they should be used.
-To help clarify this confusion we've renamed `reactive()` to `@reactive.Calc`, and `observe()` to `@reactive.Effect` in Python.
+To help clarify this confusion we've renamed `reactive()` to `@reactive.calc`, and `observe()` to `@reactive.effect` in Python.
::: {.grid .column-screen-inset}
::: {.g-col-12 .g-col-md-6}
@@ -392,11 +398,11 @@ app_ui = ui.page_fluid(
)
def server(input, output, session):
- @reactive.Calc
+ @reactive.calc
def val():
return input.n()
- @reactive.Effect
+ @reactive.effect
def _():
input.reset()
ui.update_slider("n", value=40)
@@ -440,20 +446,20 @@ In Shiny for Python, we've simplified things in the following ways:
- There is no direct analog to R's `reactiveValues`.
-- The analog of R's standalone `reactiveVal` is `reactive.Value`.
- (The `input` object in Python is a dictionary-like object containing individual `reactive.Value` objects.)
+- The analog of R's standalone `reactiveVal` is `reactive.value`.
+ (The `input` object in Python is a dictionary-like object containing individual `reactive.value` objects.)
- Reactive values have can be retrieved with `my_val()` or `my_val.get()` and can be set with `my_val.set()`.
-There is no analog of `reactiveValues` in Python, but you can create something similar by using a dictionary of `reactive.Value` objects.
+There is no analog of `reactiveValues` in Python, but you can create something similar by using a dictionary of `reactive.value` objects.
```{python}
vals = {
- "x": reactive.Value(1),
- "y": reactive.Value(2),
+ "x": reactive.value(1),
+ "y": reactive.value(2),
}
-z = reactive.Value(3)
+z = reactive.value(3)
# Retrieve values
print(vals.x())
@@ -515,15 +521,15 @@ app_ui = ui.page_fluid(
)
def server(input: Inputs, output: Outputs, session: Session):
- val = reactive.Value(0)
+ val = reactive.value(0)
- @reactive.Effect
+ @reactive.effect
@reactive.event(input.minus)
def _():
newVal = val() - 1
val.set(newVal)
- @reactive.Effect
+ @reactive.effect
@reactive.event(input.plus)
def _():
newVal = val() + 1
diff --git a/docs/comp-streamlit.qmd b/docs/comp-streamlit.qmd
index 73a26614..27bfc04d 100644
--- a/docs/comp-streamlit.qmd
+++ b/docs/comp-streamlit.qmd
@@ -8,13 +8,18 @@ include-in-header:
text: ""
---
+```{python}
+#| echo: false
+from helpers import express_editor_tabs
+```
+
The idea of Streamlit is to simplify application development by rerunning the entire application script whenever any user input changes.
This strategy leads to a great initial user experience, but quickly becomes constricting as your application grows in scope.
Shiny and Streamlit differ in a few key ways:
1) Shiny's reactive execution means that elements are minimally re-rendered.
-2) You can build lare Shiny applications without manually managing application state or caching data.
+2) You can build large Shiny applications without manually managing application state or caching data.
3) Shiny allows you to easily customize the look and feel of your application.
Shiny is designed to support your application's growth without extensive rewriting; the patterns you learn when developing a simple app are robust enough to handle a complicated one.
@@ -89,560 +94,46 @@ st.pyplot(dist_plot(filt_df))
## Shiny translation
-Shiny requires a bit more initial setup than Streamlit, but this structure creates the foundation for a much more performant and flexible application.
-Unlike Streamlit, Shiny does not rerender the application every time an input is changed, but instead keeps track of the relationships between components to minimally rerender the parts of the application which need to be updated.
+Shiny express apps look very similar to Streamlit apps, but run much more efficiently.
+Unlike Streamlit, Shiny does not rerender the application every time an input is changed, but instead keeps track of the relationships between components and minimally rerenders the components which need to be updated.
The framework does this automatically when the application is run, and so you don't need to manually define the execution method for your app.
:::{.column-screen-inset}
-``` {shinylive-python}
-#| standalone: true
-#| components: [editor, viewer]
-from shiny import App, render, ui, reactive
-import pandas as pd
-from plotnine import ggplot, geom_density, aes, theme_light, geom_point, stat_smooth
-from pathlib import Path
-
-app_ui = ui.page_fluid(
- ui.layout_sidebar(
- ui.panel_sidebar(
- ui.input_slider("mass", "Mass", 2000, 8000, 6000),
- ui.input_checkbox("smoother", "Add Smoother"),
- ),
- ui.panel_main(
- ui.output_plot(id="scatter"),
- ui.output_plot(id="mass_distribution"),
- ),
- )
-)
-
-
-def server(input, output, session):
- infile = Path(__file__).parent / "penguins.csv"
- df = pd.read_csv(infile)
-
- @reactive.Calc
- def filtered_data():
- filt_df = df.copy()
- filt_df = filt_df.loc[df["Body Mass (g)"] < input.mass()]
- return filt_df
-
- @output
- @render.plot
- def mass_distribution():
- return dist_plot(filtered_data())
-
- @output
- @render.plot
- def scatter():
- return scatter_plot(filtered_data(), input.smoother())
-
+``` {python}
+#| output: asis
+#| echo: false
-def dist_plot(df):
- plot = (
- ggplot(df, aes(x="Body Mass (g)", fill="Species"))
- + geom_density(alpha=0.2)
- + theme_light()
- )
- return plot
+express_editor_tabs("apps/comp-streamlit/penguins")
-
-def scatter_plot(df, smoother):
- plot = (
- ggplot(
- df,
- aes(
- x="Bill Length (mm)",
- y="Bill Depth (mm)",
- color="Species",
- group="Species",
- ),
- )
- + geom_point()
- + theme_light()
- )
-
- if smoother:
- plot = plot + stat_smooth()
-
- return plot
-
-
-app = App(app_ui, server)
-## file: penguins.csv
-Species,Island,Bill Length (mm),Bill Depth (mm),Flipper Length (mm),Body Mass (g),Sex,Year
-Adelie,Torgersen,39.1,18.7,181,3750,male,2007
-Adelie,Torgersen,39.5,17.4,186,3800,female,2007
-Adelie,Torgersen,40.3,18,195,3250,female,2007
-Adelie,Torgersen,NA,NA,NA,NA,NA,2007
-Adelie,Torgersen,36.7,19.3,193,3450,female,2007
-Adelie,Torgersen,39.3,20.6,190,3650,male,2007
-Adelie,Torgersen,38.9,17.8,181,3625,female,2007
-Adelie,Torgersen,39.2,19.6,195,4675,male,2007
-Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
-Adelie,Torgersen,42,20.2,190,4250,NA,2007
-Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
-Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
-Adelie,Torgersen,41.1,17.6,182,3200,female,2007
-Adelie,Torgersen,38.6,21.2,191,3800,male,2007
-Adelie,Torgersen,34.6,21.1,198,4400,male,2007
-Adelie,Torgersen,36.6,17.8,185,3700,female,2007
-Adelie,Torgersen,38.7,19,195,3450,female,2007
-Adelie,Torgersen,42.5,20.7,197,4500,male,2007
-Adelie,Torgersen,34.4,18.4,184,3325,female,2007
-Adelie,Torgersen,46,21.5,194,4200,male,2007
-Adelie,Biscoe,37.8,18.3,174,3400,female,2007
-Adelie,Biscoe,37.7,18.7,180,3600,male,2007
-Adelie,Biscoe,35.9,19.2,189,3800,female,2007
-Adelie,Biscoe,38.2,18.1,185,3950,male,2007
-Adelie,Biscoe,38.8,17.2,180,3800,male,2007
-Adelie,Biscoe,35.3,18.9,187,3800,female,2007
-Adelie,Biscoe,40.6,18.6,183,3550,male,2007
-Adelie,Biscoe,40.5,17.9,187,3200,female,2007
-Adelie,Biscoe,37.9,18.6,172,3150,female,2007
-Adelie,Biscoe,40.5,18.9,180,3950,male,2007
-Adelie,Dream,39.5,16.7,178,3250,female,2007
-Adelie,Dream,37.2,18.1,178,3900,male,2007
-Adelie,Dream,39.5,17.8,188,3300,female,2007
-Adelie,Dream,40.9,18.9,184,3900,male,2007
-Adelie,Dream,36.4,17,195,3325,female,2007
-Adelie,Dream,39.2,21.1,196,4150,male,2007
-Adelie,Dream,38.8,20,190,3950,male,2007
-Adelie,Dream,42.2,18.5,180,3550,female,2007
-Adelie,Dream,37.6,19.3,181,3300,female,2007
-Adelie,Dream,39.8,19.1,184,4650,male,2007
-Adelie,Dream,36.5,18,182,3150,female,2007
-Adelie,Dream,40.8,18.4,195,3900,male,2007
-Adelie,Dream,36,18.5,186,3100,female,2007
-Adelie,Dream,44.1,19.7,196,4400,male,2007
-Adelie,Dream,37,16.9,185,3000,female,2007
-Adelie,Dream,39.6,18.8,190,4600,male,2007
-Adelie,Dream,41.1,19,182,3425,male,2007
-Adelie,Dream,37.5,18.9,179,2975,NA,2007
-Adelie,Dream,36,17.9,190,3450,female,2007
-Adelie,Dream,42.3,21.2,191,4150,male,2007
-Adelie,Biscoe,39.6,17.7,186,3500,female,2008
-Adelie,Biscoe,40.1,18.9,188,4300,male,2008
-Adelie,Biscoe,35,17.9,190,3450,female,2008
-Adelie,Biscoe,42,19.5,200,4050,male,2008
-Adelie,Biscoe,34.5,18.1,187,2900,female,2008
-Adelie,Biscoe,41.4,18.6,191,3700,male,2008
-Adelie,Biscoe,39,17.5,186,3550,female,2008
-Adelie,Biscoe,40.6,18.8,193,3800,male,2008
-Adelie,Biscoe,36.5,16.6,181,2850,female,2008
-Adelie,Biscoe,37.6,19.1,194,3750,male,2008
-Adelie,Biscoe,35.7,16.9,185,3150,female,2008
-Adelie,Biscoe,41.3,21.1,195,4400,male,2008
-Adelie,Biscoe,37.6,17,185,3600,female,2008
-Adelie,Biscoe,41.1,18.2,192,4050,male,2008
-Adelie,Biscoe,36.4,17.1,184,2850,female,2008
-Adelie,Biscoe,41.6,18,192,3950,male,2008
-Adelie,Biscoe,35.5,16.2,195,3350,female,2008
-Adelie,Biscoe,41.1,19.1,188,4100,male,2008
-Adelie,Torgersen,35.9,16.6,190,3050,female,2008
-Adelie,Torgersen,41.8,19.4,198,4450,male,2008
-Adelie,Torgersen,33.5,19,190,3600,female,2008
-Adelie,Torgersen,39.7,18.4,190,3900,male,2008
-Adelie,Torgersen,39.6,17.2,196,3550,female,2008
-Adelie,Torgersen,45.8,18.9,197,4150,male,2008
-Adelie,Torgersen,35.5,17.5,190,3700,female,2008
-Adelie,Torgersen,42.8,18.5,195,4250,male,2008
-Adelie,Torgersen,40.9,16.8,191,3700,female,2008
-Adelie,Torgersen,37.2,19.4,184,3900,male,2008
-Adelie,Torgersen,36.2,16.1,187,3550,female,2008
-Adelie,Torgersen,42.1,19.1,195,4000,male,2008
-Adelie,Torgersen,34.6,17.2,189,3200,female,2008
-Adelie,Torgersen,42.9,17.6,196,4700,male,2008
-Adelie,Torgersen,36.7,18.8,187,3800,female,2008
-Adelie,Torgersen,35.1,19.4,193,4200,male,2008
-Adelie,Dream,37.3,17.8,191,3350,female,2008
-Adelie,Dream,41.3,20.3,194,3550,male,2008
-Adelie,Dream,36.3,19.5,190,3800,male,2008
-Adelie,Dream,36.9,18.6,189,3500,female,2008
-Adelie,Dream,38.3,19.2,189,3950,male,2008
-Adelie,Dream,38.9,18.8,190,3600,female,2008
-Adelie,Dream,35.7,18,202,3550,female,2008
-Adelie,Dream,41.1,18.1,205,4300,male,2008
-Adelie,Dream,34,17.1,185,3400,female,2008
-Adelie,Dream,39.6,18.1,186,4450,male,2008
-Adelie,Dream,36.2,17.3,187,3300,female,2008
-Adelie,Dream,40.8,18.9,208,4300,male,2008
-Adelie,Dream,38.1,18.6,190,3700,female,2008
-Adelie,Dream,40.3,18.5,196,4350,male,2008
-Adelie,Dream,33.1,16.1,178,2900,female,2008
-Adelie,Dream,43.2,18.5,192,4100,male,2008
-Adelie,Biscoe,35,17.9,192,3725,female,2009
-Adelie,Biscoe,41,20,203,4725,male,2009
-Adelie,Biscoe,37.7,16,183,3075,female,2009
-Adelie,Biscoe,37.8,20,190,4250,male,2009
-Adelie,Biscoe,37.9,18.6,193,2925,female,2009
-Adelie,Biscoe,39.7,18.9,184,3550,male,2009
-Adelie,Biscoe,38.6,17.2,199,3750,female,2009
-Adelie,Biscoe,38.2,20,190,3900,male,2009
-Adelie,Biscoe,38.1,17,181,3175,female,2009
-Adelie,Biscoe,43.2,19,197,4775,male,2009
-Adelie,Biscoe,38.1,16.5,198,3825,female,2009
-Adelie,Biscoe,45.6,20.3,191,4600,male,2009
-Adelie,Biscoe,39.7,17.7,193,3200,female,2009
-Adelie,Biscoe,42.2,19.5,197,4275,male,2009
-Adelie,Biscoe,39.6,20.7,191,3900,female,2009
-Adelie,Biscoe,42.7,18.3,196,4075,male,2009
-Adelie,Torgersen,38.6,17,188,2900,female,2009
-Adelie,Torgersen,37.3,20.5,199,3775,male,2009
-Adelie,Torgersen,35.7,17,189,3350,female,2009
-Adelie,Torgersen,41.1,18.6,189,3325,male,2009
-Adelie,Torgersen,36.2,17.2,187,3150,female,2009
-Adelie,Torgersen,37.7,19.8,198,3500,male,2009
-Adelie,Torgersen,40.2,17,176,3450,female,2009
-Adelie,Torgersen,41.4,18.5,202,3875,male,2009
-Adelie,Torgersen,35.2,15.9,186,3050,female,2009
-Adelie,Torgersen,40.6,19,199,4000,male,2009
-Adelie,Torgersen,38.8,17.6,191,3275,female,2009
-Adelie,Torgersen,41.5,18.3,195,4300,male,2009
-Adelie,Torgersen,39,17.1,191,3050,female,2009
-Adelie,Torgersen,44.1,18,210,4000,male,2009
-Adelie,Torgersen,38.5,17.9,190,3325,female,2009
-Adelie,Torgersen,43.1,19.2,197,3500,male,2009
-Adelie,Dream,36.8,18.5,193,3500,female,2009
-Adelie,Dream,37.5,18.5,199,4475,male,2009
-Adelie,Dream,38.1,17.6,187,3425,female,2009
-Adelie,Dream,41.1,17.5,190,3900,male,2009
-Adelie,Dream,35.6,17.5,191,3175,female,2009
-Adelie,Dream,40.2,20.1,200,3975,male,2009
-Adelie,Dream,37,16.5,185,3400,female,2009
-Adelie,Dream,39.7,17.9,193,4250,male,2009
-Adelie,Dream,40.2,17.1,193,3400,female,2009
-Adelie,Dream,40.6,17.2,187,3475,male,2009
-Adelie,Dream,32.1,15.5,188,3050,female,2009
-Adelie,Dream,40.7,17,190,3725,male,2009
-Adelie,Dream,37.3,16.8,192,3000,female,2009
-Adelie,Dream,39,18.7,185,3650,male,2009
-Adelie,Dream,39.2,18.6,190,4250,male,2009
-Adelie,Dream,36.6,18.4,184,3475,female,2009
-Adelie,Dream,36,17.8,195,3450,female,2009
-Adelie,Dream,37.8,18.1,193,3750,male,2009
-Adelie,Dream,36,17.1,187,3700,female,2009
-Adelie,Dream,41.5,18.5,201,4000,male,2009
-Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
-Gentoo,Biscoe,50,16.3,230,5700,male,2007
-Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
-Gentoo,Biscoe,50,15.2,218,5700,male,2007
-Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
-Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
-Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
-Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
-Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
-Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
-Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
-Gentoo,Biscoe,49,16.1,216,5550,male,2007
-Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
-Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
-Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
-Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
-Gentoo,Biscoe,42,13.5,210,4150,female,2007
-Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
-Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
-Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
-Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
-Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
-Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
-Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
-Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
-Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
-Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
-Gentoo,Biscoe,47.8,15,215,5650,male,2007
-Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
-Gentoo,Biscoe,50,15.3,220,5550,male,2007
-Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
-Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
-Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
-Gentoo,Biscoe,59.6,17,230,6050,male,2007
-Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
-Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
-Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
-Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
-Gentoo,Biscoe,44,13.6,208,4350,female,2008
-Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
-Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
-Gentoo,Biscoe,49.6,16,225,5700,male,2008
-Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
-Gentoo,Biscoe,49.6,15,216,4750,male,2008
-Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
-Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
-Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
-Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
-Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
-Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
-Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
-Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
-Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
-Gentoo,Biscoe,50.1,15,225,5000,male,2008
-Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
-Gentoo,Biscoe,45,15.4,220,5050,male,2008
-Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
-Gentoo,Biscoe,45.5,15,220,5000,male,2008
-Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
-Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
-Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
-Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
-Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
-Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
-Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
-Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
-Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
-Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
-Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
-Gentoo,Biscoe,50.7,15,223,5550,male,2008
-Gentoo,Biscoe,47.7,15,216,4750,female,2008
-Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
-Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
-Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
-Gentoo,Biscoe,46.4,15,216,4700,female,2008
-Gentoo,Biscoe,48.6,16,230,5800,male,2008
-Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
-Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
-Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
-Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
-Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
-Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
-Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
-Gentoo,Biscoe,50,15.9,224,5350,male,2009
-Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
-Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
-Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
-Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
-Gentoo,Biscoe,47.5,14,212,4875,female,2009
-Gentoo,Biscoe,52.1,17,230,5550,male,2009
-Gentoo,Biscoe,47.5,15,218,4950,female,2009
-Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
-Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
-Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
-Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
-Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
-Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
-Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
-Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
-Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
-Gentoo,Biscoe,48.5,15,219,4850,female,2009
-Gentoo,Biscoe,55.9,17,228,5600,male,2009
-Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
-Gentoo,Biscoe,49.1,15,228,5500,male,2009
-Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
-Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
-Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
-Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
-Gentoo,Biscoe,43.3,14,208,4575,female,2009
-Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
-Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
-Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
-Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
-Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
-Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
-Gentoo,Biscoe,55.1,16,230,5850,male,2009
-Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
-Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
-Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
-Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
-Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
-Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
-Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
-Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
-Chinstrap,Dream,46.5,17.9,192,3500,female,2007
-Chinstrap,Dream,50,19.5,196,3900,male,2007
-Chinstrap,Dream,51.3,19.2,193,3650,male,2007
-Chinstrap,Dream,45.4,18.7,188,3525,female,2007
-Chinstrap,Dream,52.7,19.8,197,3725,male,2007
-Chinstrap,Dream,45.2,17.8,198,3950,female,2007
-Chinstrap,Dream,46.1,18.2,178,3250,female,2007
-Chinstrap,Dream,51.3,18.2,197,3750,male,2007
-Chinstrap,Dream,46,18.9,195,4150,female,2007
-Chinstrap,Dream,51.3,19.9,198,3700,male,2007
-Chinstrap,Dream,46.6,17.8,193,3800,female,2007
-Chinstrap,Dream,51.7,20.3,194,3775,male,2007
-Chinstrap,Dream,47,17.3,185,3700,female,2007
-Chinstrap,Dream,52,18.1,201,4050,male,2007
-Chinstrap,Dream,45.9,17.1,190,3575,female,2007
-Chinstrap,Dream,50.5,19.6,201,4050,male,2007
-Chinstrap,Dream,50.3,20,197,3300,male,2007
-Chinstrap,Dream,58,17.8,181,3700,female,2007
-Chinstrap,Dream,46.4,18.6,190,3450,female,2007
-Chinstrap,Dream,49.2,18.2,195,4400,male,2007
-Chinstrap,Dream,42.4,17.3,181,3600,female,2007
-Chinstrap,Dream,48.5,17.5,191,3400,male,2007
-Chinstrap,Dream,43.2,16.6,187,2900,female,2007
-Chinstrap,Dream,50.6,19.4,193,3800,male,2007
-Chinstrap,Dream,46.7,17.9,195,3300,female,2007
-Chinstrap,Dream,52,19,197,4150,male,2007
-Chinstrap,Dream,50.5,18.4,200,3400,female,2008
-Chinstrap,Dream,49.5,19,200,3800,male,2008
-Chinstrap,Dream,46.4,17.8,191,3700,female,2008
-Chinstrap,Dream,52.8,20,205,4550,male,2008
-Chinstrap,Dream,40.9,16.6,187,3200,female,2008
-Chinstrap,Dream,54.2,20.8,201,4300,male,2008
-Chinstrap,Dream,42.5,16.7,187,3350,female,2008
-Chinstrap,Dream,51,18.8,203,4100,male,2008
-Chinstrap,Dream,49.7,18.6,195,3600,male,2008
-Chinstrap,Dream,47.5,16.8,199,3900,female,2008
-Chinstrap,Dream,47.6,18.3,195,3850,female,2008
-Chinstrap,Dream,52,20.7,210,4800,male,2008
-Chinstrap,Dream,46.9,16.6,192,2700,female,2008
-Chinstrap,Dream,53.5,19.9,205,4500,male,2008
-Chinstrap,Dream,49,19.5,210,3950,male,2008
-Chinstrap,Dream,46.2,17.5,187,3650,female,2008
-Chinstrap,Dream,50.9,19.1,196,3550,male,2008
-Chinstrap,Dream,45.5,17,196,3500,female,2008
-Chinstrap,Dream,50.9,17.9,196,3675,female,2009
-Chinstrap,Dream,50.8,18.5,201,4450,male,2009
-Chinstrap,Dream,50.1,17.9,190,3400,female,2009
-Chinstrap,Dream,49,19.6,212,4300,male,2009
-Chinstrap,Dream,51.5,18.7,187,3250,male,2009
-Chinstrap,Dream,49.8,17.3,198,3675,female,2009
-Chinstrap,Dream,48.1,16.4,199,3325,female,2009
-Chinstrap,Dream,51.4,19,201,3950,male,2009
-Chinstrap,Dream,45.7,17.3,193,3600,female,2009
-Chinstrap,Dream,50.7,19.7,203,4050,male,2009
-Chinstrap,Dream,42.5,17.3,187,3350,female,2009
-Chinstrap,Dream,52.2,18.8,197,3450,male,2009
-Chinstrap,Dream,45.2,16.6,191,3250,female,2009
-Chinstrap,Dream,49.3,19.9,203,4050,male,2009
-Chinstrap,Dream,50.2,18.8,202,3800,male,2009
-Chinstrap,Dream,45.6,19.4,194,3525,female,2009
-Chinstrap,Dream,51.9,19.5,206,3950,male,2009
-Chinstrap,Dream,46.8,16.5,189,3650,female,2009
-Chinstrap,Dream,45.7,17,195,3650,female,2009
-Chinstrap,Dream,55.8,19.8,207,4000,male,2009
-Chinstrap,Dream,43.5,18.1,202,3400,female,2009
-Chinstrap,Dream,49.6,18.2,193,3775,male,2009
-Chinstrap,Dream,50.8,19,210,4100,male,2009
-Chinstrap,Dream,50.2,18.7,198,3775,female,2009
```
:::
-There are two main things which will be new to you if you're coming from Streamlit.
-
-## Explicit UI layout
-
-Shiny requires you to explicitly lay out your UI using nested `ui.` method calls, which map onto HTML -- you don't need to know HTML and CSS for Shiny, but if you do, you can use that knowledge to customize and extend your applications.
-Defining your UI in this way gives you more control over precisely how your application is laid out, and also makes the UI easier to read and modify down the road.
-
-
-### UI flexibility
-
-The Shiny UI is also more flexible and customizable than Streamlit.
-For example, in Streamlit container functions like columns or sidebars are called using the `with `, this makes some layouts [like nested columns](https://discuss.streamlit.io/t/create-nested-columns/18807/7) difficult or impossible to implement.
-All of Shiny's container functions take child elements as arguments, which makes them very easy to compose them to create
-highly customized layouts.
-Implementing nested columns is as a simple as nesting function calls.
-
-``` {shinylive-python}
-#| standalone: true
-#| components: [editor, viewer]
-#| layout: vertical
-
-from shiny import App, ui
-
-style = "border: 1px solid #999;"
-
-app_ui = ui.page_fluid(
- ui.row(
- ui.column(4, "row-1 col-1", style=style),
- ui.column(8, "row-1 col-2", style=style),
- ),
- ui.row(
- ui.column(6, "row-2 col-1", style=style),
- ui.column(
- 6,
- ui.row(
- ui.column(4, "sub-col1", style=style),
- ui.column(8, "sub-col2", style=style),
- ),
- style=style,
- ),
- ),
-)
-
-
-app = App(app_ui, None)
-```
-
-
-### Modular UI code
-
-Most Streamlit UI elements have the important side effect of rendering themselves.
-This means that _where_ the ui element is in the script determines its location in the app and as a result those ui elements are deeply intertwined with server logic.
-For example if you want to move a UI element from one part of the app to another, you often have to also rearrange the server logic of your app.
-This means that seemingly minor layout changes can result in major application surgery.
-
-Shiny's UI uses pure functions which return a value instead of rendering themselves.
-This means that UI can be defined independently of the server logic, which makes maintaining and modifying the UI much easier. All you have to do to move a graph in the UI is change the location of the `ui.output_plot` call.
-
-This also means that the UI can be broken up into informative pieces to improve code readability.
-For example, if you want to move pieces of the UI code to another file you can do that either by storing them in variables, or using Shiny [modules](workflow-modules.qmd).
-``` {shinylive-python}
-#| standalone: true
-#| components: [editor, viewer]
-#| layout: vertical
-
-from shiny import App, ui
-from rows import row_1, row_2
-
-app_ui = ui.page_fluid(row_1, row_2)
-
-app = App(app_ui, None)
-
-## file: rows.py
-from shiny import ui
-style = "border: 1px solid #999;"
-row_2 = (
- ui.row(
- ui.column(6, "row-2 col-1", style=style),
- ui.column(
- 6,
- ui.row(
- ui.column(4, "sub-col", style=style),
- ui.column(8, "sub-col", style=style),
- ),
- style=style,
- ),
- ),
-)
-
-row_1 = ui.row(
- ui.column(4, "row-1 col-1", style=style),
- ui.column(8, "row-1 col-2", style=style),
-)
-```
-
-
-## Code organization
-
-The second main difference between Streamlit and Shiny is code organization.
+The main difference between Streamlit and Shiny is code organization.
Since Streamlit runs everything from top to bottom it doesn't particularly matter how your code is organized.
In order to benefit from Shiny's execution model, you need to organize your code into decorated functions.
For example, take this part of the application code:
``` python
-@reactive.Calc
+@reactive.calc
def filtered_data():
filt_df = df.copy()
- filt_df = filt_df.loc[df["Body Mass (g)"] < input.mass()]
+ filt_df = filt_df.loc[df["body_mass_g"] < input.mass()]
return filt_df
-@output
@render.plot
def mass_distribution():
return dist_plot(filtered_data())
-@output
@render.plot
def scatter():
return scatter_plot(filtered_data(), input.smoother())
```
These functions define the three main nodes of the application, as well as the relationships between them.
-The `@render.plot` and `@reactive.Calc` decorators identify the functions as reactive functions which need to re-execute in response to upstream changes, and the `filtered_data()` and `input.*` calls define the relationships between these components.
-These decorators help Shiny to construct a computational graph of the application as it runs, and only rerender an element when one of its upstream dependencies changes.
+The `@render.plot` and `@reactive.calc` decorators identify the functions as reactive functions which need to re-execute in response to upstream changes, and the `filtered_data()` and `input.*` calls define the relationships between these components.
+The decorators allow Shiny to construct a computation graph of the application as it runs, and only rerender an element when one of its upstream dependencies changes.
```{mermaid}
flowchart LR
@@ -654,9 +145,9 @@ flowchart LR
# Extending the application
-The benefit of Shiny's structure is that you can extend the application without having to rewrite it.
+Organizing your app this way means that you can extend the application without rewriting it.
For example, let's add a button which resets the slider.
-In Shiny you can do this by adding a a `reactive.Effect` function which calls the `ui.update_slider()` function.
+In Shiny you can do this by adding a `@reactive.effect` function which calls the `ui.update_slider()` function.
This adds a node to the computation graph and everything works as you'd expect it to.
Importantly, we can extend the application without changing how we think about the overall application.
@@ -670,438 +161,11 @@ flowchart LR
```
:::{.column-screen-inset}
-``` {shinylive-python}
-#| standalone: true
-#| components: [editor, viewer]
-from shiny import App, render, ui, reactive
-import pandas as pd
-from plotnine import ggplot, geom_density, aes, theme_light, geom_point, stat_smooth
-from pathlib import Path
-
-app_ui = ui.page_fluid(
- ui.layout_sidebar(
- ui.panel_sidebar(
- ui.input_slider(
- "mass",
- "Mass",
- 2000,
- 8000,
- 6000,
- ),
- ui.input_checkbox("smoother", "Add Smoother"),
- ui.input_action_button("reset", "Reset slider"),
- ),
- ui.panel_main(
- ui.output_plot(id="scatter"),
- ui.output_plot(id="mass_distribution"),
- ),
- )
-)
-
-
-def server(input, output, session):
- infile = Path(__file__).parent / "penguins.csv"
- df = pd.read_csv(infile)
-
- @reactive.Calc
- def filtered_data():
- filt_df = df.copy()
- filt_df = filt_df.loc[df["Body Mass (g)"] < input.mass()]
- return filt_df
-
- @output
- @render.plot
- def mass_distribution():
- return dist_plot(filtered_data())
-
- @output
- @render.plot
- def scatter():
- return scatter_plot(filtered_data(), input.smoother())
-
- @reactive.Effect
- @reactive.event(input.reset)
- def _():
- ui.update_slider("mass", value=6000)
-
-
-def dist_plot(df):
- plot = (
- ggplot(df, aes(x="Body Mass (g)", fill="Species"))
- + geom_density(alpha=0.2)
- + theme_light()
- )
- return plot
-
+``` {python}
+#| echo: false
+#| output: asis
-def scatter_plot(df, smoother):
- plot = (
- ggplot(
- df,
- aes(
- x="Bill Length (mm)",
- y="Bill Depth (mm)",
- color="Species",
- group="Species",
- ),
- )
- + geom_point()
- + theme_light()
- )
-
- if smoother:
- plot = plot + stat_smooth()
-
- return plot
-
-
-app = App(app_ui, server)
-## file: penguins.csv
-Species,Island,Bill Length (mm),Bill Depth (mm),Flipper Length (mm),Body Mass (g),Sex,Year
-Adelie,Torgersen,39.1,18.7,181,3750,male,2007
-Adelie,Torgersen,39.5,17.4,186,3800,female,2007
-Adelie,Torgersen,40.3,18,195,3250,female,2007
-Adelie,Torgersen,NA,NA,NA,NA,NA,2007
-Adelie,Torgersen,36.7,19.3,193,3450,female,2007
-Adelie,Torgersen,39.3,20.6,190,3650,male,2007
-Adelie,Torgersen,38.9,17.8,181,3625,female,2007
-Adelie,Torgersen,39.2,19.6,195,4675,male,2007
-Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
-Adelie,Torgersen,42,20.2,190,4250,NA,2007
-Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
-Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
-Adelie,Torgersen,41.1,17.6,182,3200,female,2007
-Adelie,Torgersen,38.6,21.2,191,3800,male,2007
-Adelie,Torgersen,34.6,21.1,198,4400,male,2007
-Adelie,Torgersen,36.6,17.8,185,3700,female,2007
-Adelie,Torgersen,38.7,19,195,3450,female,2007
-Adelie,Torgersen,42.5,20.7,197,4500,male,2007
-Adelie,Torgersen,34.4,18.4,184,3325,female,2007
-Adelie,Torgersen,46,21.5,194,4200,male,2007
-Adelie,Biscoe,37.8,18.3,174,3400,female,2007
-Adelie,Biscoe,37.7,18.7,180,3600,male,2007
-Adelie,Biscoe,35.9,19.2,189,3800,female,2007
-Adelie,Biscoe,38.2,18.1,185,3950,male,2007
-Adelie,Biscoe,38.8,17.2,180,3800,male,2007
-Adelie,Biscoe,35.3,18.9,187,3800,female,2007
-Adelie,Biscoe,40.6,18.6,183,3550,male,2007
-Adelie,Biscoe,40.5,17.9,187,3200,female,2007
-Adelie,Biscoe,37.9,18.6,172,3150,female,2007
-Adelie,Biscoe,40.5,18.9,180,3950,male,2007
-Adelie,Dream,39.5,16.7,178,3250,female,2007
-Adelie,Dream,37.2,18.1,178,3900,male,2007
-Adelie,Dream,39.5,17.8,188,3300,female,2007
-Adelie,Dream,40.9,18.9,184,3900,male,2007
-Adelie,Dream,36.4,17,195,3325,female,2007
-Adelie,Dream,39.2,21.1,196,4150,male,2007
-Adelie,Dream,38.8,20,190,3950,male,2007
-Adelie,Dream,42.2,18.5,180,3550,female,2007
-Adelie,Dream,37.6,19.3,181,3300,female,2007
-Adelie,Dream,39.8,19.1,184,4650,male,2007
-Adelie,Dream,36.5,18,182,3150,female,2007
-Adelie,Dream,40.8,18.4,195,3900,male,2007
-Adelie,Dream,36,18.5,186,3100,female,2007
-Adelie,Dream,44.1,19.7,196,4400,male,2007
-Adelie,Dream,37,16.9,185,3000,female,2007
-Adelie,Dream,39.6,18.8,190,4600,male,2007
-Adelie,Dream,41.1,19,182,3425,male,2007
-Adelie,Dream,37.5,18.9,179,2975,NA,2007
-Adelie,Dream,36,17.9,190,3450,female,2007
-Adelie,Dream,42.3,21.2,191,4150,male,2007
-Adelie,Biscoe,39.6,17.7,186,3500,female,2008
-Adelie,Biscoe,40.1,18.9,188,4300,male,2008
-Adelie,Biscoe,35,17.9,190,3450,female,2008
-Adelie,Biscoe,42,19.5,200,4050,male,2008
-Adelie,Biscoe,34.5,18.1,187,2900,female,2008
-Adelie,Biscoe,41.4,18.6,191,3700,male,2008
-Adelie,Biscoe,39,17.5,186,3550,female,2008
-Adelie,Biscoe,40.6,18.8,193,3800,male,2008
-Adelie,Biscoe,36.5,16.6,181,2850,female,2008
-Adelie,Biscoe,37.6,19.1,194,3750,male,2008
-Adelie,Biscoe,35.7,16.9,185,3150,female,2008
-Adelie,Biscoe,41.3,21.1,195,4400,male,2008
-Adelie,Biscoe,37.6,17,185,3600,female,2008
-Adelie,Biscoe,41.1,18.2,192,4050,male,2008
-Adelie,Biscoe,36.4,17.1,184,2850,female,2008
-Adelie,Biscoe,41.6,18,192,3950,male,2008
-Adelie,Biscoe,35.5,16.2,195,3350,female,2008
-Adelie,Biscoe,41.1,19.1,188,4100,male,2008
-Adelie,Torgersen,35.9,16.6,190,3050,female,2008
-Adelie,Torgersen,41.8,19.4,198,4450,male,2008
-Adelie,Torgersen,33.5,19,190,3600,female,2008
-Adelie,Torgersen,39.7,18.4,190,3900,male,2008
-Adelie,Torgersen,39.6,17.2,196,3550,female,2008
-Adelie,Torgersen,45.8,18.9,197,4150,male,2008
-Adelie,Torgersen,35.5,17.5,190,3700,female,2008
-Adelie,Torgersen,42.8,18.5,195,4250,male,2008
-Adelie,Torgersen,40.9,16.8,191,3700,female,2008
-Adelie,Torgersen,37.2,19.4,184,3900,male,2008
-Adelie,Torgersen,36.2,16.1,187,3550,female,2008
-Adelie,Torgersen,42.1,19.1,195,4000,male,2008
-Adelie,Torgersen,34.6,17.2,189,3200,female,2008
-Adelie,Torgersen,42.9,17.6,196,4700,male,2008
-Adelie,Torgersen,36.7,18.8,187,3800,female,2008
-Adelie,Torgersen,35.1,19.4,193,4200,male,2008
-Adelie,Dream,37.3,17.8,191,3350,female,2008
-Adelie,Dream,41.3,20.3,194,3550,male,2008
-Adelie,Dream,36.3,19.5,190,3800,male,2008
-Adelie,Dream,36.9,18.6,189,3500,female,2008
-Adelie,Dream,38.3,19.2,189,3950,male,2008
-Adelie,Dream,38.9,18.8,190,3600,female,2008
-Adelie,Dream,35.7,18,202,3550,female,2008
-Adelie,Dream,41.1,18.1,205,4300,male,2008
-Adelie,Dream,34,17.1,185,3400,female,2008
-Adelie,Dream,39.6,18.1,186,4450,male,2008
-Adelie,Dream,36.2,17.3,187,3300,female,2008
-Adelie,Dream,40.8,18.9,208,4300,male,2008
-Adelie,Dream,38.1,18.6,190,3700,female,2008
-Adelie,Dream,40.3,18.5,196,4350,male,2008
-Adelie,Dream,33.1,16.1,178,2900,female,2008
-Adelie,Dream,43.2,18.5,192,4100,male,2008
-Adelie,Biscoe,35,17.9,192,3725,female,2009
-Adelie,Biscoe,41,20,203,4725,male,2009
-Adelie,Biscoe,37.7,16,183,3075,female,2009
-Adelie,Biscoe,37.8,20,190,4250,male,2009
-Adelie,Biscoe,37.9,18.6,193,2925,female,2009
-Adelie,Biscoe,39.7,18.9,184,3550,male,2009
-Adelie,Biscoe,38.6,17.2,199,3750,female,2009
-Adelie,Biscoe,38.2,20,190,3900,male,2009
-Adelie,Biscoe,38.1,17,181,3175,female,2009
-Adelie,Biscoe,43.2,19,197,4775,male,2009
-Adelie,Biscoe,38.1,16.5,198,3825,female,2009
-Adelie,Biscoe,45.6,20.3,191,4600,male,2009
-Adelie,Biscoe,39.7,17.7,193,3200,female,2009
-Adelie,Biscoe,42.2,19.5,197,4275,male,2009
-Adelie,Biscoe,39.6,20.7,191,3900,female,2009
-Adelie,Biscoe,42.7,18.3,196,4075,male,2009
-Adelie,Torgersen,38.6,17,188,2900,female,2009
-Adelie,Torgersen,37.3,20.5,199,3775,male,2009
-Adelie,Torgersen,35.7,17,189,3350,female,2009
-Adelie,Torgersen,41.1,18.6,189,3325,male,2009
-Adelie,Torgersen,36.2,17.2,187,3150,female,2009
-Adelie,Torgersen,37.7,19.8,198,3500,male,2009
-Adelie,Torgersen,40.2,17,176,3450,female,2009
-Adelie,Torgersen,41.4,18.5,202,3875,male,2009
-Adelie,Torgersen,35.2,15.9,186,3050,female,2009
-Adelie,Torgersen,40.6,19,199,4000,male,2009
-Adelie,Torgersen,38.8,17.6,191,3275,female,2009
-Adelie,Torgersen,41.5,18.3,195,4300,male,2009
-Adelie,Torgersen,39,17.1,191,3050,female,2009
-Adelie,Torgersen,44.1,18,210,4000,male,2009
-Adelie,Torgersen,38.5,17.9,190,3325,female,2009
-Adelie,Torgersen,43.1,19.2,197,3500,male,2009
-Adelie,Dream,36.8,18.5,193,3500,female,2009
-Adelie,Dream,37.5,18.5,199,4475,male,2009
-Adelie,Dream,38.1,17.6,187,3425,female,2009
-Adelie,Dream,41.1,17.5,190,3900,male,2009
-Adelie,Dream,35.6,17.5,191,3175,female,2009
-Adelie,Dream,40.2,20.1,200,3975,male,2009
-Adelie,Dream,37,16.5,185,3400,female,2009
-Adelie,Dream,39.7,17.9,193,4250,male,2009
-Adelie,Dream,40.2,17.1,193,3400,female,2009
-Adelie,Dream,40.6,17.2,187,3475,male,2009
-Adelie,Dream,32.1,15.5,188,3050,female,2009
-Adelie,Dream,40.7,17,190,3725,male,2009
-Adelie,Dream,37.3,16.8,192,3000,female,2009
-Adelie,Dream,39,18.7,185,3650,male,2009
-Adelie,Dream,39.2,18.6,190,4250,male,2009
-Adelie,Dream,36.6,18.4,184,3475,female,2009
-Adelie,Dream,36,17.8,195,3450,female,2009
-Adelie,Dream,37.8,18.1,193,3750,male,2009
-Adelie,Dream,36,17.1,187,3700,female,2009
-Adelie,Dream,41.5,18.5,201,4000,male,2009
-Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
-Gentoo,Biscoe,50,16.3,230,5700,male,2007
-Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
-Gentoo,Biscoe,50,15.2,218,5700,male,2007
-Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
-Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
-Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
-Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
-Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
-Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
-Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
-Gentoo,Biscoe,49,16.1,216,5550,male,2007
-Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
-Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
-Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
-Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
-Gentoo,Biscoe,42,13.5,210,4150,female,2007
-Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
-Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
-Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
-Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
-Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
-Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
-Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
-Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
-Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
-Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
-Gentoo,Biscoe,47.8,15,215,5650,male,2007
-Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
-Gentoo,Biscoe,50,15.3,220,5550,male,2007
-Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
-Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
-Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
-Gentoo,Biscoe,59.6,17,230,6050,male,2007
-Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
-Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
-Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
-Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
-Gentoo,Biscoe,44,13.6,208,4350,female,2008
-Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
-Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
-Gentoo,Biscoe,49.6,16,225,5700,male,2008
-Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
-Gentoo,Biscoe,49.6,15,216,4750,male,2008
-Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
-Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
-Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
-Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
-Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
-Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
-Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
-Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
-Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
-Gentoo,Biscoe,50.1,15,225,5000,male,2008
-Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
-Gentoo,Biscoe,45,15.4,220,5050,male,2008
-Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
-Gentoo,Biscoe,45.5,15,220,5000,male,2008
-Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
-Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
-Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
-Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
-Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
-Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
-Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
-Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
-Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
-Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
-Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
-Gentoo,Biscoe,50.7,15,223,5550,male,2008
-Gentoo,Biscoe,47.7,15,216,4750,female,2008
-Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
-Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
-Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
-Gentoo,Biscoe,46.4,15,216,4700,female,2008
-Gentoo,Biscoe,48.6,16,230,5800,male,2008
-Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
-Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
-Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
-Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
-Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
-Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
-Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
-Gentoo,Biscoe,50,15.9,224,5350,male,2009
-Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
-Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
-Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
-Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
-Gentoo,Biscoe,47.5,14,212,4875,female,2009
-Gentoo,Biscoe,52.1,17,230,5550,male,2009
-Gentoo,Biscoe,47.5,15,218,4950,female,2009
-Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
-Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
-Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
-Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
-Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
-Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
-Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
-Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
-Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
-Gentoo,Biscoe,48.5,15,219,4850,female,2009
-Gentoo,Biscoe,55.9,17,228,5600,male,2009
-Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
-Gentoo,Biscoe,49.1,15,228,5500,male,2009
-Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
-Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
-Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
-Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
-Gentoo,Biscoe,43.3,14,208,4575,female,2009
-Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
-Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
-Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
-Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
-Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
-Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
-Gentoo,Biscoe,55.1,16,230,5850,male,2009
-Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
-Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
-Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
-Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
-Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
-Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
-Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
-Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
-Chinstrap,Dream,46.5,17.9,192,3500,female,2007
-Chinstrap,Dream,50,19.5,196,3900,male,2007
-Chinstrap,Dream,51.3,19.2,193,3650,male,2007
-Chinstrap,Dream,45.4,18.7,188,3525,female,2007
-Chinstrap,Dream,52.7,19.8,197,3725,male,2007
-Chinstrap,Dream,45.2,17.8,198,3950,female,2007
-Chinstrap,Dream,46.1,18.2,178,3250,female,2007
-Chinstrap,Dream,51.3,18.2,197,3750,male,2007
-Chinstrap,Dream,46,18.9,195,4150,female,2007
-Chinstrap,Dream,51.3,19.9,198,3700,male,2007
-Chinstrap,Dream,46.6,17.8,193,3800,female,2007
-Chinstrap,Dream,51.7,20.3,194,3775,male,2007
-Chinstrap,Dream,47,17.3,185,3700,female,2007
-Chinstrap,Dream,52,18.1,201,4050,male,2007
-Chinstrap,Dream,45.9,17.1,190,3575,female,2007
-Chinstrap,Dream,50.5,19.6,201,4050,male,2007
-Chinstrap,Dream,50.3,20,197,3300,male,2007
-Chinstrap,Dream,58,17.8,181,3700,female,2007
-Chinstrap,Dream,46.4,18.6,190,3450,female,2007
-Chinstrap,Dream,49.2,18.2,195,4400,male,2007
-Chinstrap,Dream,42.4,17.3,181,3600,female,2007
-Chinstrap,Dream,48.5,17.5,191,3400,male,2007
-Chinstrap,Dream,43.2,16.6,187,2900,female,2007
-Chinstrap,Dream,50.6,19.4,193,3800,male,2007
-Chinstrap,Dream,46.7,17.9,195,3300,female,2007
-Chinstrap,Dream,52,19,197,4150,male,2007
-Chinstrap,Dream,50.5,18.4,200,3400,female,2008
-Chinstrap,Dream,49.5,19,200,3800,male,2008
-Chinstrap,Dream,46.4,17.8,191,3700,female,2008
-Chinstrap,Dream,52.8,20,205,4550,male,2008
-Chinstrap,Dream,40.9,16.6,187,3200,female,2008
-Chinstrap,Dream,54.2,20.8,201,4300,male,2008
-Chinstrap,Dream,42.5,16.7,187,3350,female,2008
-Chinstrap,Dream,51,18.8,203,4100,male,2008
-Chinstrap,Dream,49.7,18.6,195,3600,male,2008
-Chinstrap,Dream,47.5,16.8,199,3900,female,2008
-Chinstrap,Dream,47.6,18.3,195,3850,female,2008
-Chinstrap,Dream,52,20.7,210,4800,male,2008
-Chinstrap,Dream,46.9,16.6,192,2700,female,2008
-Chinstrap,Dream,53.5,19.9,205,4500,male,2008
-Chinstrap,Dream,49,19.5,210,3950,male,2008
-Chinstrap,Dream,46.2,17.5,187,3650,female,2008
-Chinstrap,Dream,50.9,19.1,196,3550,male,2008
-Chinstrap,Dream,45.5,17,196,3500,female,2008
-Chinstrap,Dream,50.9,17.9,196,3675,female,2009
-Chinstrap,Dream,50.8,18.5,201,4450,male,2009
-Chinstrap,Dream,50.1,17.9,190,3400,female,2009
-Chinstrap,Dream,49,19.6,212,4300,male,2009
-Chinstrap,Dream,51.5,18.7,187,3250,male,2009
-Chinstrap,Dream,49.8,17.3,198,3675,female,2009
-Chinstrap,Dream,48.1,16.4,199,3325,female,2009
-Chinstrap,Dream,51.4,19,201,3950,male,2009
-Chinstrap,Dream,45.7,17.3,193,3600,female,2009
-Chinstrap,Dream,50.7,19.7,203,4050,male,2009
-Chinstrap,Dream,42.5,17.3,187,3350,female,2009
-Chinstrap,Dream,52.2,18.8,197,3450,male,2009
-Chinstrap,Dream,45.2,16.6,191,3250,female,2009
-Chinstrap,Dream,49.3,19.9,203,4050,male,2009
-Chinstrap,Dream,50.2,18.8,202,3800,male,2009
-Chinstrap,Dream,45.6,19.4,194,3525,female,2009
-Chinstrap,Dream,51.9,19.5,206,3950,male,2009
-Chinstrap,Dream,46.8,16.5,189,3650,female,2009
-Chinstrap,Dream,45.7,17,195,3650,female,2009
-Chinstrap,Dream,55.8,19.8,207,4000,male,2009
-Chinstrap,Dream,43.5,18.1,202,3400,female,2009
-Chinstrap,Dream,49.6,18.2,193,3775,male,2009
-Chinstrap,Dream,50.8,19,210,4100,male,2009
-Chinstrap,Dream,50.2,18.7,198,3775,female,2009
+express_editor_tabs("apps/comp-streamlit/slider-update")
```
:::
@@ -1194,26 +258,21 @@ st.pyplot(dist_plot(filt_df))
```
-## Changing the button style
+# Customizing UI
-Some common web development tasks are quite difficult in Streamlit.
-For example, let's say we want to change the color of one button without changing the colors of any other buttons in our app.
-The UI structure that you use to define your Shiny app is designed to work seamlessly with CSS and JavaScript, so all that's required to change the button color is to pass a `style` argument with CSS attributes.
-In addition to including inline CSS like this, you can add a CSS class to any element, or include global CSS or JavaScript assets using `include_css()` or `include_js()`.
+Shiny embraces [UI as HTML](ui-html.qmd), and as a result it's relatively easy to implement bespoke [UI customizations](ui-customize.html).
+For example, lets change the color of one button without changing the colors of any other buttons in our app.
+Since Shiny allows you to add HTML attributes like `class`/`style`, and provides a CSS framework ([Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)), we can make primary button by just adding an appropriate `class` attribute.
-```{.python}
-from shiny import *
-
-app_ui = ui.page_fluid(
- ui.input_action_button(
- "red",
- "Red Button",
- style="background: red",
- ),
- ui.input_action_button("gray", "Gray Button"),
-)
-
-app = App(app_ui, None)
+```{shinylive-python}
+#| standalone: true
+#| components: [editor, viewer]
+#| layout: vertical
+#| viewerHeight: 100
+from shiny.express import ui
+
+ui.input_action_button("default", "Default Button")
+ui.input_action_button("primary", "Primary Button", class_="btn-outline-primary")
```
You might not need to customize the CSS of your app that often, but it's important to have the option if your application calls for it.
@@ -1250,7 +309,7 @@ def ChangeButtonColour(widget_label, font_color, background_color="transparent")
ChangeButtonColour("red", "white", "red")
```
-Despite its complexity, this is the best way to change the style of an individual element in Streamlit
+Despite its complexity, this is the best way to change the style of an individual element in Streamlit.
How this pattern works is:
- Return an empty html component with a script tag
@@ -1271,14 +330,14 @@ Streamlit collects [user information](https://docs.streamlit.io/library/advanced
The data is sent to a American server owned by Snowflake so that the company can analyze user behavior.
This can cause legal and security problems because your application may be subject to data governance policies which forbid this type of data collection.
For example, if your users do not explicitly provide consent to transfer data to a US company, sending data to Snowflake might be a [GDPR violation](https://github.com/streamlit/streamlit/issues/4747).
-In order to prevent data collection you need to set `gatherUsageStats = false` in your Streamlit config file, which is an easy thing to forget to include in a given Streamlit deployment.
+In order to prevent data collection you need to set `gatherUsageStats = false` in your Streamlit config file, which is an easy thing to forget to include in a given Streamlit deployment.
Shiny does not collect or report user data of any kind, and it never will.
-We do not believe that open-source tools should collect user data without explicit consent.
+We do not believe that open-source tools should collect user data without explicit consent.
# Conclusion
-Shiny requires you to use a bit more structure initially than you might using Streamlit, but the payoff of that structure is that your application is much more robust and extensible.
+Shiny allows you to build much more performant and extensible applications than Streamlit.
The patterns that you use to build a simple Shiny application are the same ones that you use to build a complex one, and you never need to change your mental model of how the application works.
This design will let your application grow along with the scope of your problem, and you can have confidence that the framework has the tools that you need to handle almost any requirement.
diff --git a/docs/custom-component-one-off.qmd b/docs/custom-component-one-off.qmd
index 7a6e122d..0db48645 100644
--- a/docs/custom-component-one-off.qmd
+++ b/docs/custom-component-one-off.qmd
@@ -15,7 +15,7 @@ The code shown here is simplified to get the point across, but before you use it
# The problem
-You found a new table library that you really want to use in your Shiny app. The library is [Tabulator](https://tabulator.info/), which is a JavaScript library for making tables with data. But there's a problem: there's no way to easily use it from a Shiny app. To do this, we'll need to write some Python code that will let us use the library from the Python side of Shiny, and wrap the library's JavaScript code to make it talk to JavaScript side of Shiny.
+You found a new table library that you really want to use in your Shiny app. The library is [Tabulator](https://tabulator.info/), which is a JavaScript library for making tables with data. But there's a problem: there's (currently) no way to easily use it from a Shiny app. To do this, we'll need to write some Python code that will let us use the library from the Python side of Shiny, and wrap the library's JavaScript code to make it talk to JavaScript side of Shiny.
# The solution
@@ -46,7 +46,7 @@ tabulator/
Both `tabulator_esm.min.js` and `tabulator.min.css` are downloaded from [tabulator's website.](https://tabulator.info/docs/5.5/install#sources-download) `tableComponent.js` is the script that we will write that contains the code for rendering the table to our Shiny app.
:::{.callout-note}
-The code in this article will be abbreviated to show the relevant parts. If you want to see the full code, see the [accompanying repo.](https://github.com/posit-dev/pyshiny-output-binding-example)
+The code in this article will be abbreviated to show the relevant parts. If you want to see the full code, see the [accompanying repo.](https://github.com/posit-dev/py-shiny-output-binding-example)
:::
@@ -157,14 +157,14 @@ if (Shiny) {
```
:::
-To see the full JavaScript code, see `tabulator/tableComponent.js` in the [accompanying repo.](https://github.com/posit-dev/pyshiny-output-binding-example/blob/main/tabulator/tableComponent.js)
+To see the full JavaScript code, see `tabulator/tableComponent.js` in the [accompanying repo.](https://github.com/posit-dev/py-shiny-output-binding-example/blob/main/tabulator/tableComponent.js)
## The `output_tabulator()` function
Next we need an HTML element to target with our JavaScript code. When we set up [the find method](#the-find-method) for our binding, we chose the class `shiny-tabulator-output` as the mark of a tabualtor output, so we need to add that class. We also need to allow the user to set the ID of the element so that Shiny knows which element to target with which output. By wrapping the `id` argument in `resolve_id()` we make sure it will work in the context of modules. We'll also add a height argument so that the user can set the height of the table.
```{.python filename="app.py"}
-from shiny import ui, App
+from shiny import App, Inputs, ui
from shiny.module import resolve_id
from htmltools import HTMLDependency
@@ -190,7 +190,7 @@ def output_tabulator(id, height="200px"):
:::{.callout-note}
-We use the `HTMLDependency` function to bind up the assets needed for tabulator that we made in the previous step to make sure th at they're included in our app whenever the `output_tabulator()` function is called (but not more than once).
+We use the `HTMLDependency` function to bind up the assets needed for tabulator that we made in the previous step to make sure that they're included in our app whenever the `output_tabulator()` function is called (but not more than once).
Note the use of `all_files=True` here. This makes it so we can do the ESM import of the Tabulator library. Otherwise `tabulator_esm.min.js` would not be hosted and the JS library wouldn't be able to find it.
:::
@@ -203,74 +203,66 @@ Now we've got the client-side logic finished, we need to write a custom render d
A render function's job is to take the result of calling the decorated function, transform it into the format our client-side code wants (in many cases this may be as simple as just returning the object unchanged), and then returning that client-side friendly data which will be passed to our client's `renderValue()` method.
-To do this we can leverage some tools provided by Shiny in the `shiny.render.transformer` subpackage.
+To do this we can leverage some tools provided by Shiny in the `shiny.render.renderer` subpackage.
```{.python filename="app.py"}
-from shiny.render.transformer import (
- output_transformer,
- resolve_value_fn,
- TransformerMetadata,
- ValueFn,
-)
-
-
-@output_transformer
-async def render_tabulator(
- _meta: TransformerMetadata,
- _fn: ValueFn[pd.DataFrame | None],
-):
- res = await resolve_value_fn(_fn)
- if res is None:
- return None
-
- if not isinstance(res, pd.DataFrame):
- # Throw an error if the value is not a dataframe
- raise TypeError(f"Expected a pandas.DataFrame, got {type(res)}. ")
-
- # Get data from dataframe as a list of lists where each inner list is a
- # row, column names as array of strings and types of each column as an
- # array of strings
- return {
- "data": res.values.tolist(),
- "columns": res.columns.tolist(),
- "type_hints": res.dtypes.astype(str).tolist(),
- }
+from shiny.render.renderer import Jsonifiable, Renderer
+
+
+class render_tabulator(Renderer[pd.DataFrame]):
+ """
+ Render a pandas dataframe as a tabulator table.
+ """
+
+ def auto_output_ui(self):
+ """
+ Express UI for the tabulator renderer
+ """
+ return ui.output_tabulator(self.output_name)
+
+ async def transform(self, value: pd.DataFrame) -> Jsonifiable:
+ """
+ Transform a pandas dataframe into a JSONifiable object that can be
+ passed to the tabulator HTML dependency.
+ """
+ if not isinstance(value, pd.DataFrame):
+ # Throw an error if the value is not a dataframe
+ raise TypeError(f"Expected a pandas.DataFrame, got {type(value)}. ")
+
+ # Get data from dataframe as a list of lists where each inner list is a
+ # row, column names as array of strings and types of each column as an
+ # array of strings
+ return {
+ "data": value.values.tolist(),
+ "columns": value.columns.tolist(),
+ "type_hints": value.dtypes.astype(str).tolist(),
+ }
```
:::{.callout-note}
In the code above we use types so that we can get some type checking in our IDE, but these are not required.
:::
-The `output_transformer` decorator is a decorator factory (it's a decorator that creates decorators!) that takes a function that returns a dictionary of data to be passed to the client side. The function that it decorates is passed two arguments: `_meta` and `_fn`.
+An implementation of `Renderer` produces a class which is intended to be used as a decorator, which is why a `render_*` naming convention is recommended. An implementation requires at least 3 things: (1) `auto_output_ui`, (2) either a `transform` or `render` function, and (3) an value type for the `Renderer` class.
-`_meta` is a dictionary of metadata about the function that is being decorated. We don't use it in our example.
+Here, the value type we've used is `pd.DataFrame`, which helps users know if they've returned a suitable object in their render function.
-`_fn` is the decorated function, i.e. the function that goes below the `@render_tabulator()` decorator in your app's server code. In this case we are expecting the function to return either a pandas dataframe or `None`.
-
-
-```{.python}
-...
- res = await resolve_value_fn(_fn)
-...
-```
-
-`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async.
+The `auto_output_ui()` method is used to generate the UI for the output if the renderer were to be used in Express mode. In this case we just use the `output_tabulator()` function we wrote earlier.
+Finally, renderers use either the `transform(self, value: IT)` or `render(self)` methods to retrieve and transform the result of an output value function into an object that can be sent to the client. `render_tabulator`'s `transform` method returns a dictionary of data (which is JSON-like, e.g. `Jsonifiable`) to be passed to the client side. The `transform` method is called when the output value function returns a non-`None` value. If the value is `None`, the `render` method quits early, returning `None`.
:::{.callout-note}
-# Why an asynchronous function?
-It is required by Shiny that the output decorator function be `async`. This allows users of the render bindings to provide either synchronous or asynchronous functions to the decorator. This ensures that the function will work whether or not the end user has defined their render function asynchronously.
-
-If you don't need any async behavior you can simply write your function as you would a standard synchronous function after `await`ing `resolve_value_fn()`.
+# Why an asynchronous `transform` function?
+It is required by Shiny `Renderer` that the `transform` be `async`. This allows for asynchronous transformations to occur even if the output value function is synchronous. By providing an async function, `Renderer` can then handle either an async or sync function provided by the user.
:::
-Next, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not strictly required, but is a best practice.
+When first transforming an output value, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not required, but it's good practice to do so.
```python
...
-if not isinstance(res, pd.DataFrame):
+if not isinstance(value, pd.DataFrame):
# Throw an error if the value is not a dataframe
- raise TypeError(f"Expected a pandas.DataFrame, got {type(res)}. ")
+ raise TypeError(f"Expected a pandas.DataFrame, got {type(value)}. ")
...
```
@@ -279,9 +271,9 @@ Finally, we return a dictionary of data that we want to pass to the client side.
```python
...
return {
- "data": res.values.tolist(),
- "columns": res.columns.tolist(),
- "type_hints": res.dtypes.astype(str).tolist(),
+ "data": value.values.tolist(),
+ "columns": value.columns.tolist(),
+ "type_hints": value.dtypes.astype(str).tolist(),
}
...
```
@@ -292,14 +284,36 @@ This returned value is then what gets sent to the client side and is available i
Now we have all the components neccesary to use our tabulator output component. Here's an app that uses it to render some number of rows of the indomitable `mtcars` dataset.
+::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+
+### Express
+
```{.python filename="app.py"}
-from shiny import ui, App
from pathlib import Path
import pandas as pd
+from shiny.express import input, ui
# Code for the custom output
...
+# App code
+ui.input_slider("n", "Number of rows to show", 1, 20, 10)
+
+@render_tabulator
+def tabulatorTable():
+ return pd.read_csv(Path(__file__).parent / "mtcars.csv").head(input.n())
+```
+
+### Core
+
+```{.python filename="app.py"}
+from pathlib import Path
+import pandas as pd
+from shiny import App, Inputs, ui
+
+# Code for the custom output: output_tabulator and render_tabulator
+...
+
# App code
app_ui = ui.page_fluid(
ui.input_slider("n", "Number of rows to show", 1, 20, 10),
@@ -307,15 +321,20 @@ app_ui = ui.page_fluid(
)
-def server(input, output, session):
+def server(input: Inputs):
@render_tabulator
def tabulatorTable():
- return pd.read_csv(Path(__file__).parent / "mtcars.csv").head(input.n())
+ csv_file = Path(__file__).parent / "mtcars.csv"
+ return pd.read_csv(csv_file).head(input.n())
app = App(app_ui, server)
```
+:::
+
+
+
Which results in the following app:
@@ -359,4 +378,4 @@ Which results in the following app:
:::
-To see the full app script, see `app.py` in the accompanying repo for this post [here.](https://github.com/posit-dev/pyshiny-output-binding-example/blob/main/app.py)
+To see the full app script, see `app.py` in the accompanying repo for this post [here.](https://github.com/posit-dev/py-shiny-output-binding-example/blob/main/app.py)
diff --git a/docs/custom-components-pkg.qmd b/docs/custom-components-pkg.qmd
index 5dd781a4..f7f14e7d 100644
--- a/docs/custom-components-pkg.qmd
+++ b/docs/custom-components-pkg.qmd
@@ -272,7 +272,7 @@ This is the actual UI function for our component. Aka the one that gets called b
Because `makeReactInput()` [works by creating a webcomponent](#srctsindex.tsx), to render our input we just need to pass the tag name we set up in the `tagName` argument to `makeReactInput().` Next, we pass the `fancy_color_picker_deps` html dependency we just made and the ID of the binding and we’re good to go!
::: {.callout-note}
-By using the `resolve_id(id)` function here when declaring our ID, we make sure that the component works [Shiny modules](docs/workflow-modules) where the ID of the component needs to be prefixed with the module name.
+By using the `resolve_id(id)` function here when declaring our ID, we make sure that the component works [Shiny modules](modules.qmd) where the ID of the component needs to be prefixed with the module name.
:::
@@ -282,22 +282,26 @@ By using the `resolve_id(id)` function here when declaring our ID, we make sure
Like with the JavaScript, the process for setting up the python code for an output binding is not too different. Although there is a bit of extra work because we need to build both the ui _and_ server components. Here's how we would do that for the color shower output binding we defined above:
```{.python filename="fancy_color_picker.py"}
-@output_transformer()
-async def render_color(
- _meta: TransformerMetadata,
- _fn: ValueFn[str | None],
-):
- res = await resolve_value_fn(_fn)
- if res is None:
- return None
+from shiny.render.renderer import Renderer, Jsonifiable
- if not isinstance(res, str):
- # Throw an error if the value is not a string
- raise TypeError(f"Expected a string, got {type(res)}. ")
+class render_color(Renderer[str]):
+ """
+ Render a color
+ """
+
+ # Express mode UI
+ def auto_output_ui(self, id: str) -> Tag:
+ return output_color(self.output_id)
- # Send the results to the client. Make sure that this is a serializable
- # object and matches what is expected in the JavaScript code.
- return {"value": res}
+ # Transform the app value into a JSONifiable object
+ async def transform(self, value: str) -> Jsonifiable:
+ if not isinstance(res, str):
+ # Throw an error if the value is not a string
+ raise TypeError(f"Expected a string, got {type(res)}. ")
+
+ # Send the results to the client. Make sure that this is a serializable
+ # object and matches what is expected in the JavaScript code.
+ return {"value": value}
def output_color(id: str):
@@ -338,6 +342,23 @@ This file is used to configure typescript, which we are using to write our compo
### `example-app/app.py`
+::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+
+#### Express
+
+```{.python}
+from fancy_color_picker import fancy_color_picker
+from shiny.express import render
+
+fancy_color_picker("myComponent")
+
+@render.text
+def valueOut():
+ return f"Value from input is {input.myComponent()}"
+```
+
+#### Core
+
```{.python}
from fancy_color_picker import fancy_color_picker
@@ -356,6 +377,7 @@ def server(input, output, session):
app = App(app_ui, server)
```
+:::
This is a simple example app that can be used to test the component while developing. It uses the `fancy_color_picker` function we defined in `fancy_color_picker.py` to add the component to the app. It also uses the `render.text` decorator to render the value of the input to the page.
@@ -369,6 +391,23 @@ This is a simple example app that can be used to test the component while develo
In our output binding example we defined an output that conveniently _displays_ colors. If we were packaging up two components like this we could/should modify the example app to showcase both of them.
+::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+
+#### Express
+
+```{.python filename="app.py"}
+from fancy_color_picker import fancy_color_picker, render_color
+import shiny.express
+
+fancy_color_picker("myComponent")
+
+@render_color
+def myColor():
+ return input.myComponent()
+```
+
+#### Core
+
```{.python filename="app.py"}
from fancy_color_picker import fancy_color_picker, output_color, render_color
@@ -389,6 +428,8 @@ app = App(app_ui, server)
:::
+:::
+
- 
- 
- 
- 
- 
- 
-