Expressify navigation other cards

shiny/api-examples/accordion/app-express.py

@@ -0,0 +1,30 @@
+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())

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),
+    ),
 )
 
 

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())

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")

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")

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")

shiny/api-examples/insert_accordion_panel/app-express.py

@@ -0,0 +1,26 @@
+import random
+
+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")
+
+with ui.accordion(id="acc", multiple=True):
+    for letter in "ABCDE":
+        with ui.accordion_panel(f"Section {letter}"):
+            f"Some narrative for section {letter} "
+            "more narrative"
+
+
+@reactive.effect
+@reactive.event(input.add_panel)
+@expressify
+def _():
+    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])

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"

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()))

shiny/api-examples/showcase_bottom/app-express.py

@@ -0,0 +1,28 @@
+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"

shiny/api-examples/showcase_left_center/app-express.py

@@ -0,0 +1,28 @@
+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"

shiny/api-examples/showcase_top_right/app-express.py

@@ -0,0 +1,28 @@
+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"

shiny/api-examples/value_box/app-express.py

@@ -0,0 +1,28 @@
+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"

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",