Introduction
Flexbox
widget in Supervisely is a widget that enables users to arrange other widgets in a flexible and responsive layout. Users can customize the layout by setting the gap between widgets and aligning them to the center. With the Flexbox
widget, users can easily create dynamic and adaptable layouts that can be optimized for different devices and screen sizes
Function signature
Copy Flexbox (
widgets = [ Input (), Input ()],
gap = 10 ,
center_content = False ,
widget_id = None ,
)
Parameters
Parameters
Type
Description
List if widgets to display in Flexbox
Gap between widgets in Flexbox
Determines whether to place widgets in the center of the window
widgets
Determine list of Widgets
to display in Flexbox
widget.
type: List[Widget]
Copy flexbox = Flexbox (widgets = [ Input (), Input ()])
gap
Determine gap between Widgets
on Flexbox
.
type: int
default value: 10
Copy flexbox = Flexbox (
widgets = [ Input (), Input ()],
gap = 25 ,
)
center_content
Determines whether to place widgets in the center of the window.
type: bool
default value: False
Copy flexbox = Flexbox (
widgets = [ Button (), Button ()],
center_content = 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/005_flexbox/src/main.py
Import libraries
Copy import os
import supervisely as sly
from dotenv import load_dotenv
from supervisely . app . widgets import Card , Container , Flexbox , ObjectClassView
Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
Copy load_dotenv ( "local.env" )
load_dotenv (os.path. expanduser ( "~/supervisely.env" ))
api = sly . Api ()
Initialize widgets we will use in UI
Copy obj_class_cat = sly . ObjClass (name = "cat" , geometry_type = sly.Bitmap, color = [ 255 , 0 , 0 ])
obj_class_dog = sly . ObjClass (name = "dog" , geometry_type = sly.Bitmap, color = [ 0 , 255 , 0 ])
obj_class_sheep = sly . ObjClass (name = "sheep" , geometry_type = sly.Bitmap, color = [ 0 , 0 , 255 ])
obj_class_horse = sly . ObjClass (name = "horse" , geometry_type = sly.Bitmap, color = [ 255 , 255 , 0 ])
obj_class_squirrel = sly . ObjClass (name = "squirrel" , geometry_type = sly.Bitmap, color = [ 255 , 0 , 255 ])
obj_classes = [
obj_class_cat ,
obj_class_dog ,
obj_class_sheep ,
obj_class_horse ,
obj_class_squirrel ,
]
obj_class_view_widgets = [ ObjectClassView (obj_class = obj_class) for obj_class in obj_classes]
Initialize Flexbox
widget
Copy flexbox = Flexbox (
widgets = obj_class_view_widgets,
gap = 100 ,
center_content = True ,
)
Create app layout
Prepare a layout for app using Card
widget with the content
parameter and place widget that we've just created in the Container
widget.
Copy card = Card (
title = "Flexbox" ,
content = flexbox,
)
layout = Container (widgets = [card])
Create app using layout
Create an app object with layout parameter.
Copy app = sly . Application (layout = layout)