From 5ab7a3bca4e089ad03e73db439495db1c851f74b Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 10:50:33 -0400 Subject: [PATCH 1/8] Nav example --- shiny/api-examples/nav_panel/app-express.py | 10 +++++++++ .../api-examples/navset_hidden/app-express.py | 22 +++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 shiny/api-examples/nav_panel/app-express.py create mode 100644 shiny/api-examples/navset_hidden/app-express.py diff --git a/shiny/api-examples/nav_panel/app-express.py b/shiny/api-examples/nav_panel/app-express.py new file mode 100644 index 000000000..7342ff279 --- /dev/null +++ b/shiny/api-examples/nav_panel/app-express.py @@ -0,0 +1,10 @@ +from shiny.express import ui + +ui.page_opts(title="Basic Nav Examples") + + +with ui.navset_tab(): + with ui.nav_panel("One"): + "First tab content" + with ui.nav_panel("Two"): + "Second tab content" diff --git a/shiny/api-examples/navset_hidden/app-express.py b/shiny/api-examples/navset_hidden/app-express.py new file mode 100644 index 000000000..5fc22bd2a --- /dev/null +++ b/shiny/api-examples/navset_hidden/app-express.py @@ -0,0 +1,22 @@ +from shiny import reactive +from shiny.express import input, ui + +with ui.sidebar(): + ui.input_radio_buttons("controller", "Controller", ["1", "2", "3"], selected="1") + + +with ui.navset_hidden(id="hidden_tabs"): + with ui.nav_panel(None, value="panel1"): + "Panel 1 content" + with ui.nav_panel(None, value="panel2"): + "Panel 2 content" + with ui.nav_panel(None, value="panel3"): + "Panel 3 content" + with ui.nav_panel(None, value="panel4"): + "Panel 4 content" + + +@reactive.Effect +@reactive.event(input.controller) +def update_navs(): + ui.update_navs("hidden_tabs", selected="panel" + str(input.controller())) From a42d3271cfc8ecc907da9e84251e7c2719e09071 Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 11:14:20 -0400 Subject: [PATCH 2/8] Accordion examples --- shiny/api-examples/accordion/app-express.py | 31 +++++++++++++++++++++ shiny/api-examples/accordion/app.py | 18 ++++++------ 2 files changed, 41 insertions(+), 8 deletions(-) create mode 100644 shiny/api-examples/accordion/app-express.py diff --git a/shiny/api-examples/accordion/app-express.py b/shiny/api-examples/accordion/app-express.py new file mode 100644 index 000000000..a0c85d2ee --- /dev/null +++ b/shiny/api-examples/accordion/app-express.py @@ -0,0 +1,31 @@ +from shiny import reactive +from shiny.express import input, render, ui + +with ui.card(): + ui.card_header("Single selction accordion") + with ui.accordion(multiple=False, id="acc_single"): + with ui.accordion_panel("Section 1"): + "Some text for Section 1" + with ui.accordion_panel("Section 2"): + "More things on Section 2" + with ui.accordion_panel("Section 3"): + "Another great section" + + @render.text + def acc_single_val(): + return "Selected accordion: " + str(input.acc_single()) + + +with ui.card(): + ui.card_header("Multiple selction accordion") + with ui.accordion(multiple=True, id="acc_multiple"): + with ui.accordion_panel("Section 1"): + "Some text for Section 1" + with ui.accordion_panel("Section 2"): + "More things on Section 2" + with ui.accordion_panel("Section 3"): + "Another great section" + + @render.text + def acc_multiple_val(): + return "Selected accordions: " + str(input.acc_multiple()) diff --git a/shiny/api-examples/accordion/app.py b/shiny/api-examples/accordion/app.py index 5f278f6d6..6f1a95c83 100644 --- a/shiny/api-examples/accordion/app.py +++ b/shiny/api-examples/accordion/app.py @@ -22,14 +22,16 @@ def make_items(): app_ui = ui.page_fluid( - ui.markdown("#### Accordion: (`multiple=False`)"), - # Provide an id to create a shiny input binding - ui.accordion(*make_items(), id="acc_single", multiple=False), - ui.output_text_verbatim("acc_single_val", placeholder=True), - ui.tags.br(), - ui.markdown("#### Accordion: (`multiple=True`)"), - ui.accordion(*make_items(), id="acc_multiple"), - ui.output_text_verbatim("acc_multiple_val", placeholder=True), + ui.card( + ui.card_header("Single selection accordion"), + ui.accordion(*make_items(), id="acc_single", multiple=False), + ui.output_text_verbatim("acc_single_val", placeholder=True), + ), + ui.card( + ui.card_header("Multiple selection accordion"), + ui.accordion(*make_items(), id="acc_multiple"), + ui.output_text_verbatim("acc_multiple_val", placeholder=True), + ), ) From 7ee1b36563667bec0fc5395dcc93ee25a4ccc38d Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 11:17:23 -0400 Subject: [PATCH 3/8] Accordion_panel --- shiny/api-examples/accordion_panel/app-express.py | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 shiny/api-examples/accordion_panel/app-express.py diff --git a/shiny/api-examples/accordion_panel/app-express.py b/shiny/api-examples/accordion_panel/app-express.py new file mode 100644 index 000000000..c01659714 --- /dev/null +++ b/shiny/api-examples/accordion_panel/app-express.py @@ -0,0 +1,12 @@ +from shiny.express import input, render, ui + +ui.card_header("Single selection accordion") +with ui.accordion(multiple=False, id="acc"): + for letter in "ABCDE": + with ui.accordion_panel(f"Section {letter}"): + f"Some narrative for section {letter}" + + +@render.text +def acc_val(): + return "input.acc(): " + str(input.acc()) From b54edc56159f0cd36ed1a9b5028060d52b45327b Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 11:56:18 -0400 Subject: [PATCH 4/8] card_examples cards --- shiny/api-examples/card/app-express.py | 7 +++++ shiny/api-examples/card_footer/app-express.py | 7 +++++ shiny/api-examples/card_header/app-express.py | 7 +++++ .../showcase_bottom/app-express.py | 31 +++++++++++++++++++ .../showcase_left_center/app-express.py | 31 +++++++++++++++++++ .../showcase_top_right/app-express.py | 31 +++++++++++++++++++ shiny/api-examples/value_box/app-express.py | 31 +++++++++++++++++++ shiny/api-examples/value_box/app.py | 2 +- 8 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 shiny/api-examples/card/app-express.py create mode 100644 shiny/api-examples/card_footer/app-express.py create mode 100644 shiny/api-examples/card_header/app-express.py create mode 100644 shiny/api-examples/showcase_bottom/app-express.py create mode 100644 shiny/api-examples/showcase_left_center/app-express.py create mode 100644 shiny/api-examples/showcase_top_right/app-express.py create mode 100644 shiny/api-examples/value_box/app-express.py diff --git a/shiny/api-examples/card/app-express.py b/shiny/api-examples/card/app-express.py new file mode 100644 index 000000000..fb8eb3e70 --- /dev/null +++ b/shiny/api-examples/card/app-express.py @@ -0,0 +1,7 @@ +from shiny.express import ui + +with ui.card(full_screen=True): + ui.card_header("This is the header") + ui.p("This is the body") + ui.p("This is still the body.") + ui.card_footer("This is the footer") diff --git a/shiny/api-examples/card_footer/app-express.py b/shiny/api-examples/card_footer/app-express.py new file mode 100644 index 000000000..fb8eb3e70 --- /dev/null +++ b/shiny/api-examples/card_footer/app-express.py @@ -0,0 +1,7 @@ +from shiny.express import ui + +with ui.card(full_screen=True): + ui.card_header("This is the header") + ui.p("This is the body") + ui.p("This is still the body.") + ui.card_footer("This is the footer") diff --git a/shiny/api-examples/card_header/app-express.py b/shiny/api-examples/card_header/app-express.py new file mode 100644 index 000000000..fb8eb3e70 --- /dev/null +++ b/shiny/api-examples/card_header/app-express.py @@ -0,0 +1,7 @@ +from shiny.express import ui + +with ui.card(full_screen=True): + ui.card_header("This is the header") + ui.p("This is the body") + ui.p("This is still the body.") + ui.card_footer("This is the footer") diff --git a/shiny/api-examples/showcase_bottom/app-express.py b/shiny/api-examples/showcase_bottom/app-express.py new file mode 100644 index 000000000..32880cf72 --- /dev/null +++ b/shiny/api-examples/showcase_bottom/app-express.py @@ -0,0 +1,31 @@ +from icons import piggy_bank + +from shiny.express import ui + +with ui.layout_columns(): + with ui.value_box( + showcase=piggy_bank, theme="bg-gradient-orange-cyan", full_screen=True + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" + + with ui.value_box( + showcase=piggy_bank, + theme="text-green", + showcase_layout="top right", + full_screen=True, + ): + "KPI Title", + "$1 Billion Dollars", + "Up 30% VS PREVIOUS 30 DAYS", + + with ui.value_box( + showcase=piggy_bank, + theme="purple", + showcase_layout="bottom", + full_screen=True, + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" diff --git a/shiny/api-examples/showcase_left_center/app-express.py b/shiny/api-examples/showcase_left_center/app-express.py new file mode 100644 index 000000000..32880cf72 --- /dev/null +++ b/shiny/api-examples/showcase_left_center/app-express.py @@ -0,0 +1,31 @@ +from icons import piggy_bank + +from shiny.express import ui + +with ui.layout_columns(): + with ui.value_box( + showcase=piggy_bank, theme="bg-gradient-orange-cyan", full_screen=True + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" + + with ui.value_box( + showcase=piggy_bank, + theme="text-green", + showcase_layout="top right", + full_screen=True, + ): + "KPI Title", + "$1 Billion Dollars", + "Up 30% VS PREVIOUS 30 DAYS", + + with ui.value_box( + showcase=piggy_bank, + theme="purple", + showcase_layout="bottom", + full_screen=True, + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" diff --git a/shiny/api-examples/showcase_top_right/app-express.py b/shiny/api-examples/showcase_top_right/app-express.py new file mode 100644 index 000000000..32880cf72 --- /dev/null +++ b/shiny/api-examples/showcase_top_right/app-express.py @@ -0,0 +1,31 @@ +from icons import piggy_bank + +from shiny.express import ui + +with ui.layout_columns(): + with ui.value_box( + showcase=piggy_bank, theme="bg-gradient-orange-cyan", full_screen=True + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" + + with ui.value_box( + showcase=piggy_bank, + theme="text-green", + showcase_layout="top right", + full_screen=True, + ): + "KPI Title", + "$1 Billion Dollars", + "Up 30% VS PREVIOUS 30 DAYS", + + with ui.value_box( + showcase=piggy_bank, + theme="purple", + showcase_layout="bottom", + full_screen=True, + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" diff --git a/shiny/api-examples/value_box/app-express.py b/shiny/api-examples/value_box/app-express.py new file mode 100644 index 000000000..32880cf72 --- /dev/null +++ b/shiny/api-examples/value_box/app-express.py @@ -0,0 +1,31 @@ +from icons import piggy_bank + +from shiny.express import ui + +with ui.layout_columns(): + with ui.value_box( + showcase=piggy_bank, theme="bg-gradient-orange-cyan", full_screen=True + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" + + with ui.value_box( + showcase=piggy_bank, + theme="text-green", + showcase_layout="top right", + full_screen=True, + ): + "KPI Title", + "$1 Billion Dollars", + "Up 30% VS PREVIOUS 30 DAYS", + + with ui.value_box( + showcase=piggy_bank, + theme="purple", + showcase_layout="bottom", + full_screen=True, + ): + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" diff --git a/shiny/api-examples/value_box/app.py b/shiny/api-examples/value_box/app.py index 1d5416ba7..804e0f957 100644 --- a/shiny/api-examples/value_box/app.py +++ b/shiny/api-examples/value_box/app.py @@ -3,7 +3,7 @@ from shiny import App, ui app_ui = ui.page_fluid( - ui.layout_column_wrap( + ui.layout_columns( ui.value_box( "KPI Title", "$1 Billion Dollars", From 44d626bcc77433601912c5a05bb769401d21d68f Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 12:32:14 -0400 Subject: [PATCH 5/8] Trailing commas --- .../insert_accordion_panel/app-express.py | 24 +++++++++++++++++++ .../showcase_bottom/app-express.py | 11 ++++----- .../showcase_left_center/app-express.py | 11 ++++----- .../showcase_top_right/app-express.py | 11 ++++----- shiny/api-examples/value_box/app-express.py | 11 ++++----- 5 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 shiny/api-examples/insert_accordion_panel/app-express.py diff --git a/shiny/api-examples/insert_accordion_panel/app-express.py b/shiny/api-examples/insert_accordion_panel/app-express.py new file mode 100644 index 000000000..27a9c6d72 --- /dev/null +++ b/shiny/api-examples/insert_accordion_panel/app-express.py @@ -0,0 +1,24 @@ +import random + +from shiny import reactive +from shiny.express import expressify, input, ui + + +@expressify +def make_panel(id: str): + with ui.accordion_panel(f"Section {id}"): + f"Some narrative for section {id}" + + +with ui.sidebar(): + ui.input_action_button("add_panel", "Add random panel", class_="mt-3 mb-3"), + +with ui.accordion(multiple=False, id="acc"): + for letter in "ABCDE": + make_panel(letter) + + +@reactive.Effect +@reactive.event(input.add_panel) +def _(): + ui.insert_accordion_panel("acc", make_panel("foo")) diff --git a/shiny/api-examples/showcase_bottom/app-express.py b/shiny/api-examples/showcase_bottom/app-express.py index 32880cf72..9b2e644bc 100644 --- a/shiny/api-examples/showcase_bottom/app-express.py +++ b/shiny/api-examples/showcase_bottom/app-express.py @@ -16,15 +16,12 @@ showcase_layout="top right", full_screen=True, ): - "KPI Title", - "$1 Billion Dollars", - "Up 30% VS PREVIOUS 30 DAYS", + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" with ui.value_box( - showcase=piggy_bank, - theme="purple", - showcase_layout="bottom", - full_screen=True, + showcase=piggy_bank, theme="purple", showcase_layout="bottom", full_screen=True ): "KPI Title" "$1 Billion Dollars" diff --git a/shiny/api-examples/showcase_left_center/app-express.py b/shiny/api-examples/showcase_left_center/app-express.py index 32880cf72..9b2e644bc 100644 --- a/shiny/api-examples/showcase_left_center/app-express.py +++ b/shiny/api-examples/showcase_left_center/app-express.py @@ -16,15 +16,12 @@ showcase_layout="top right", full_screen=True, ): - "KPI Title", - "$1 Billion Dollars", - "Up 30% VS PREVIOUS 30 DAYS", + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" with ui.value_box( - showcase=piggy_bank, - theme="purple", - showcase_layout="bottom", - full_screen=True, + showcase=piggy_bank, theme="purple", showcase_layout="bottom", full_screen=True ): "KPI Title" "$1 Billion Dollars" diff --git a/shiny/api-examples/showcase_top_right/app-express.py b/shiny/api-examples/showcase_top_right/app-express.py index 32880cf72..9b2e644bc 100644 --- a/shiny/api-examples/showcase_top_right/app-express.py +++ b/shiny/api-examples/showcase_top_right/app-express.py @@ -16,15 +16,12 @@ showcase_layout="top right", full_screen=True, ): - "KPI Title", - "$1 Billion Dollars", - "Up 30% VS PREVIOUS 30 DAYS", + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" with ui.value_box( - showcase=piggy_bank, - theme="purple", - showcase_layout="bottom", - full_screen=True, + showcase=piggy_bank, theme="purple", showcase_layout="bottom", full_screen=True ): "KPI Title" "$1 Billion Dollars" diff --git a/shiny/api-examples/value_box/app-express.py b/shiny/api-examples/value_box/app-express.py index 32880cf72..9b2e644bc 100644 --- a/shiny/api-examples/value_box/app-express.py +++ b/shiny/api-examples/value_box/app-express.py @@ -16,15 +16,12 @@ showcase_layout="top right", full_screen=True, ): - "KPI Title", - "$1 Billion Dollars", - "Up 30% VS PREVIOUS 30 DAYS", + "KPI Title" + "$1 Billion Dollars" + "Up 30% VS PREVIOUS 30 DAYS" with ui.value_box( - showcase=piggy_bank, - theme="purple", - showcase_layout="bottom", - full_screen=True, + showcase=piggy_bank, theme="purple", showcase_layout="bottom", full_screen=True ): "KPI Title" "$1 Billion Dollars" From b1b329874f9030db85a486e4686ebbcaa4216c80 Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 13:57:51 -0400 Subject: [PATCH 6/8] Update shiny/api-examples/insert_accordion_panel/app-express.py Co-authored-by: Carson Sievert --- .../insert_accordion_panel/app-express.py | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/shiny/api-examples/insert_accordion_panel/app-express.py b/shiny/api-examples/insert_accordion_panel/app-express.py index 27a9c6d72..00562bd2c 100644 --- a/shiny/api-examples/insert_accordion_panel/app-express.py +++ b/shiny/api-examples/insert_accordion_panel/app-express.py @@ -4,21 +4,24 @@ from shiny.express import expressify, input, ui -@expressify -def make_panel(id: str): - with ui.accordion_panel(f"Section {id}"): - f"Some narrative for section {id}" - - with ui.sidebar(): ui.input_action_button("add_panel", "Add random panel", class_="mt-3 mb-3"), -with ui.accordion(multiple=False, id="acc"): +with ui.accordion(id="acc", multiple=True): for letter in "ABCDE": - make_panel(letter) + with ui.accordion_panel(f"Section {letter}"): + f"Some narrative for section {letter} " + "more narrative" -@reactive.Effect +@reactive.effect @reactive.event(input.add_panel) +@expressify def _(): - ui.insert_accordion_panel("acc", make_panel("foo")) + letter = str(random.randint(0, 10000)) + with ui.hold() as panel: + with ui.accordion_panel(f"Section {letter}"): + f"Some narrative for section {letter} " + "more narrative" + + ui.insert_accordion_panel("acc", panel[0]) From 029c95ea5199f7f4e6d31d21fab3c7be952b05b9 Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 14:05:52 -0400 Subject: [PATCH 7/8] lints --- shiny/api-examples/accordion/app-express.py | 1 - shiny/api-examples/insert_accordion_panel/app-express.py | 1 - 2 files changed, 2 deletions(-) diff --git a/shiny/api-examples/accordion/app-express.py b/shiny/api-examples/accordion/app-express.py index a0c85d2ee..10aeb7c00 100644 --- a/shiny/api-examples/accordion/app-express.py +++ b/shiny/api-examples/accordion/app-express.py @@ -1,4 +1,3 @@ -from shiny import reactive from shiny.express import input, render, ui with ui.card(): diff --git a/shiny/api-examples/insert_accordion_panel/app-express.py b/shiny/api-examples/insert_accordion_panel/app-express.py index 00562bd2c..70cff7b33 100644 --- a/shiny/api-examples/insert_accordion_panel/app-express.py +++ b/shiny/api-examples/insert_accordion_panel/app-express.py @@ -3,7 +3,6 @@ from shiny import reactive from shiny.express import expressify, input, ui - with ui.sidebar(): ui.input_action_button("add_panel", "Add random panel", class_="mt-3 mb-3"), From 36684ff9b8d3b50d6e0e6fb41c7aab92ef79a6d0 Mon Sep 17 00:00:00 2001 From: Gordon Shotwell Date: Thu, 25 Jan 2024 14:48:37 -0400 Subject: [PATCH 8/8] linting --- shiny/api-examples/insert_accordion_panel/app-express.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shiny/api-examples/insert_accordion_panel/app-express.py b/shiny/api-examples/insert_accordion_panel/app-express.py index 70cff7b33..fcad947f0 100644 --- a/shiny/api-examples/insert_accordion_panel/app-express.py +++ b/shiny/api-examples/insert_accordion_panel/app-express.py @@ -4,7 +4,7 @@ from shiny.express import expressify, input, ui with ui.sidebar(): - ui.input_action_button("add_panel", "Add random panel", class_="mt-3 mb-3"), + ui.input_action_button("add_panel", "Add random panel", class_="mt-3 mb-3") with ui.accordion(id="acc", multiple=True): for letter in "ABCDE":