Container

Introduction

Container widget in Supervisely is a flexible tool that allows for organizing other widgets within it. It can be used to group related widgets, change the layout of widgets, and adjust the sizing of widgets. Container widget supports both horizontal and vertical layout options.

However, Container widget does not have any specific functionality on its own but serves as a wrapper for other widgets.

Function signature

container = Container(
    widgets=[],
    direction="vertical",
    gap=10,
    fractions=None,
    widget_id=None
)

Parameters

Parameters	Type	Description
widgets	List[Widget]	List of widgets
direction	Literal["vertical", "horizontal"]	Container direction (vertical or horizontal)
gap	int	Gap between widgets in container
fractions	List[int]	Fractions for container splitting
widget_id	str	Widget ID

widgets

List of widgets

type: List[Widget]

default []

container = Container(widgets=[Input(), Input(), Input()])

direction

Container direction (vertical or horizontal)

type: Literal["vertical", "horizontal"]

default "vertical"

container = Container(
    widgets=[Input(), Input(), Input()],
    direction="horizontal",
)

gap

Gap between widgets in container

type: int

default 10

container = Container(
    widgets=[Input(), Input(), Input()],
    gap=25,
)

fractions

Fractions for container splitting. direction parameter have to be horizontal

type: List[int]

default None

container = Container(
    widgets=[Input(), Input(), Input()],
    direction="horizontal",
    fractions=[3, 2, 5],
)

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/layouts and containers/002_container/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Input

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

Prepare widgets for Container widget

button = Button("Button")

input_1 = Input()
input_2 = Input()
input_3 = Input()

Initialize Container widget

inputs_container = Container(
    widgets=[input_1, input_2, input_3],
    direction="horizontal",
    fractions=[3, 2, 5],
    gap=20,
)
container = Container(widgets=[inputs_container, button])

Create app layout

Prepare a layout for app using Card widget with the content parameter.

layout = Card(title="Container card", content=container)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=card)