Sidebar
Introduction
Sidebar
widget from Supervisely is a tool that provides quick access to important information and features in Supervisely apps. Sidebar
is a vertical panel that appears on the left side of the app interface and includes widget user will placed in. Sidebar
widget is a useful tool for streamlining workflows and improving user productivity in the apps.
Function signature
Sidebar(
left_content=Button(),
right_content=Card("Input", content=Input()),
width_percent=25,
widget_id=None,
)

Parameters
left_content
Widget
Widget to display in left part of Sidebar
right_content
Widget
Widget to display in right part of Sidebar
width_percent
int
Width of the left part of Sidebar
in %
height
str
Height of sidebar, can be set in px, % or hv
standalone
bool
Add paddings for full screen apps
widget_id
str
Id of the widget
left_content
Determine Widget
to display in left part of Sidebar
.
type: Widget
right_content
Determine Widget
to display in right part of Sidebar
.
type: Widget
left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right)

width_percent
Determines width of the left part of Sidebar
in %.
type: int
default value: 25
left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, width_percent=75)

height
Height of sidebar, can be set in px
,%
or hv
.
type: str
left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, height="250px")
standalone
Add paddings for full screen apps.
type: bool
default value: False
left = Button(text="Left Button")
right = Button(text="Right Button")
sidebar = Sidebar(left_content=left, right_content=right, height="350px", standalone=True)
widget_id
ID of the widget.
type: str
default value: None
Mini App Example
You can find this example in our Github repository:
ui-widgets-demos/layouts and containers/009_sidebar/src/main.py
Import libraries
import os
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Select, Sidebar, Text
Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
Initialize left and right widgets
left = Text(text="left part", status="success")
items = [
Select.Item(label="CPU", value="cpu"),
Select.Item(label="GPU 0", value="cuda:0"),
Select.Item(value="option3"),
]
right = Select(items=items, filterable=True, placeholder="select me")
Initialize Sidebar
widget
Sidebar
widgetsidebar = Sidebar(left_content=left, right_content=right)
Create app using layout
Create an app object with layout parameter.
app = sly.Application(layout=sidebar)

Last updated
Was this helpful?