ui.layout_sidebar

ui.layout_sidebar(
    sidebar,
    *args,
    fillable=True,
    fill=True,
    bg=None,
    fg=None,
    border=None,
    border_radius=None,
    border_color=None,
    gap=None,
    padding=None,
    height=None,
    **kwargs,
)

Sidebar layout

Create a sidebar layout component which can be dropped inside any Shiny UI page method (e.g. page_fillable) or card context.

Parameters

*args : TagChild | TagAttrs = ()

One argument needs to be of class Sidebar object created by sidebar. The remaining arguments will contain the contents to the main content area. Or tag attributes that are supplied to the resolved Tag object.

fillable : bool = True

Whether or not the main content area should be wrapped in a fillable container. See as_fillable_container for details.

fill : bool = True

Whether or not the sidebar layout should be wrapped in a fillable container. See as_fill_item for details.

bg : Optional[str] = None

A background or foreground color.

border : Optional[bool] = None

Whether or not to show a border around the sidebar layout.

border_radius : Optional[bool] = None

Whether or not to round the corners of the sidebar layout.

border_color : Optional[str] = None

A border color.

gap : Optional[CssUnit] = None

A CSS length unit defining the vertical gap (i.e., spacing) between elements provided to *args. This value will only be used if fillable is True.

padding : Optional[CssUnit | list[CssUnit]] = None

Padding within the sidebar itself. This can be a numeric vector (which will be interpreted as pixels) or a character vector with valid CSS lengths. padding may be one to four values. * If a single value, then that value will be used for all four sides. * If two, then the first value will be used for the top and bottom, while the second value will be used for left and right. * If three values, then the first will be used for top, the second will be left and right, and the third will be bottom. * If four, then the values will be interpreted as top, right, bottom, and left respectively.

height : Optional[CssUnit] = None

Any valid CSS unit to use for the height.

Returns

: CardItem

A Tag object.

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
import matplotlib.pyplot as plt
import numpy as np

from shiny import App, Inputs, Outputs, Session, render, ui

app_ui = ui.page_fluid(
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_slider("n", "N", min=0, max=100, value=20),
        ),
        ui.output_plot("plot"),
    ),
)


def server(input: Inputs, output: Outputs, session: Session):
    @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


app = App(app_ui, server)