express.ui.sidebar
express.ui.sidebar(position='left', open=None, width=250, id=None, title=None, bg=None, fg=None, class_=None, max_height_mobile=None, gap=None, padding=None, **kwargs)
Context manager for sidebar element
This function wraps sidebar.
Parameters
width:
CssUnit
= 250-
A valid CSS unit used for the width of the sidebar.
position: Literal[‘left’, ‘right’] = ‘left’
-
Where the sidebar should appear relative to the main content, one of
"left"
or"right"
. open: Optional[
SidebarOpenSpec
|SidebarOpenValue
| Literal[‘desktop’]] = None-
The initial state of the sidebar. If a string, the possible values are:
"open"
: the sidebar starts open"closed"
: the sidebar starts closed"always"
: the sidebar is always open and cannot be closed
Alternatively, you can provide a dictionary with keys
"desktop"
and"mobile"
to set different initial states for desktop and mobile. For example, when{"desktop": "open", "mobile": "closed"}
the sidebar is initialized in the open state on desktop screens or in the closed state on mobile screens. id: Optional[str] = None
-
A character string. Required if wanting to reactively read (or update) the
collapsible
state in a Shiny app. title: TagChild | str = None
-
A character title to be used as the sidebar title, which will be wrapped in a
<div>
element with classsidebar-title
. You can also provide a custom Tag for the title element, in which case you’ll likely want to give this elementclass = "sidebar-title"
. bg: Optional[str] = None
-
A background or foreground color.
class_: Optional[str] = None
-
CSS classes for the sidebar container element, in addition to the fixed
.sidebar
class. max_height_mobile: Optional[str | float] = None
-
A CSS length unit (passed through
as_css_unit
) defining the maximum height of the horizontal sidebar when viewed on mobile devices. Only applies to always-open sidebars on mobile, where by default the sidebar container is placed below the main content container on mobile devices. gap: Optional[
CssUnit
] = None-
A CSS length unit defining the vertical
gap
(i.e., spacing) between elements provided to*args
. 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.
**kwargs: TagAttrValue = {}
-
Named attributes are supplied to the sidebar content container.
Examples
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400
## file: app.py
from shiny.express import input, render, 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.code
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.code
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.code
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.code
def state_always():
return f"input.sidebar_always(): {input.sidebar_always()}"