Expressify api-example apps

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

@@ -0,0 +1,18 @@
+import shiny
+from shiny.express import ui
+
+a_card = shiny.ui.card("A simple card")
+
+# Always has 2 columns (on non-mobile)
+with ui.layout_column_wrap(width=1 / 2):
+    a_card
+    a_card
+    a_card
+
+ui.hr()
+
+# Has three columns when viewport is wider than 750px
+with ui.layout_column_wrap(width="250px"):
+    a_card
+    a_card
+    a_card

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

@@ -0,0 +1,35 @@
+from model_plots import *  # model plots and cards
+
+from shiny import render
+from shiny.express import input, ui
+
+ui.page_opts(title="Model Dashboard")
+
+ui.markdown("Using `ui.layout_columns()` for the layout.")
+
+
+with ui.layout_columns(
+    col_widths={"sm": (5, 7, 12)},
+    # row_heights=(2, 3),
+    # height="700px",
+):
+    with ui.card(full_screen=True):
+        ui.card_header("Loss Over Time")
+
+        @render.plot
+        def loss_over_time():
+            return plot_loss_over_time()
+
+    with ui.card(full_screen=True):
+        ui.card_header("Accuracy Over Time")
+
+        @render.plot
+        def accuracy_over_time():
+            return plot_accuracy_over_time()
+
+    with ui.card(full_screen=True):
+        ui.card_header("Feature Importance")
+
+        @render.plot
+        def feature_importance():
+            return plot_feature_importance()

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

@@ -0,0 +1,18 @@
+import matplotlib.pyplot as plt
+import numpy as np
+
+from shiny import render
+from shiny.express import input, ui
+
+with ui.layout_sidebar():
+    with ui.sidebar():
+        ui.input_slider("n", "N", min=0, max=100, value=20)
+
+    @render.plot(alt="A histogram")
+    def plot() -> object:
+        np.random.seed(19680801)
+        x = 100 + 15 * np.random.randn(437)
+
+        fig, ax = plt.subplots()
+        ax.hist(x, input.n(), density=True)
+        return fig

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

@@ -0,0 +1,13 @@
+from shiny.express import input, ui
+
+ui.markdown(
+    """
+    # Hello World
+
+    This is **markdown** and here is some `code`:
+
+    ```python
+    print('Hello world!')
+    ```
+    """
+)

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

@@ -0,0 +1,20 @@
+import matplotlib.pyplot as plt
+import numpy as np
+
+from shiny import render
+from shiny.express import input, ui
+
+ui.page_opts(page_fn=page_fixed)
+
+with ui.sidebar():
+    ui.input_slider("n", "N", min=0, max=100, value=20)
+
+
+@render.plot(alt="A histogram")
+def plot() -> object:
+    np.random.seed(19680801)
+    x = 100 + 15 * np.random.randn(437)
+
+    fig, ax = plt.subplots()
+    ax.hist(x, input.n(), density=True)
+    return fig

shiny/api-examples/page_sidebar/app.py

@@ -14,7 +14,6 @@
 
 
 def server(input: Inputs, output: Outputs, session: Session):
-    @output
     @render.plot(alt="A histogram")
     def plot() -> object:
         np.random.seed(19680801)

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

@@ -0,0 +1,8 @@
+from shiny.express import ui
+
+ui.h2("A basic absolute panel example")
+
+with ui.panel_absolute(draggable=True, width="300px", right="50px", top="25%"):
+    with ui.panel_well():
+        "Drag me around!"
+        ui.input_slider("n", "N", min=0, max=100, value=20)

shiny/api-examples/panel_absolute/app.py

@@ -9,7 +9,7 @@
         draggable=True,
         width="300px",
         right="50px",
-        top="50%",
+        top="25%",
     ),
 )
 

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

@@ -0,0 +1,12 @@
+from shiny.express import input, ui
+
+ui.input_checkbox("show", "Show radio buttons", False)
+
+with ui.panel_conditional("input.show"):
+    ui.input_radio_buttons("radio", "Choose ", ["slider", "select"])
+
+with ui.panel_conditional("input.show && input.radio === 'slider'"):
+    ui.input_slider("slider", None, min=0, max=100, value=50)
+
+with ui.panel_conditional("input.show && input.radio === 'select'"):
+    ui.input_select("slider", None, ["A", "B", "C"])

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

@@ -0,0 +1,43 @@
+from shiny import render
+from shiny.express import input, ui
+
+ui.page_opts(fillable=True)
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(id="sidebar_left", open="desktop"):
+            "Left sidebar content"
+
+        @render.text
+        def state_left():
+            return f"input.sidebar_left(): {input.sidebar_left()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(id="sidebar_right", position="right", open="desktop"):
+            "Right sidebar content"
+
+        @render.text
+        def state_right():
+            return f"input.sidebar_right(): {input.sidebar_right()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(id="sidebar_closed", open="closed"):
+            "Closed sidebar content"
+
+        @render.text
+        def state_closed():
+            return f"input.sidebar_closed(): {input.sidebar_closed()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(id="sidebar_always", open="always"):
+            "Always sidebar content"
+
+        @render.text
+        def state_always():
+            return f"input.sidebar_always(): {input.sidebar_always()}"