Tabs

Introduction

Tabs is a graphical user interface tool in Supervisely that allows users to group related widgets into multiple tabs, providing a more organized and streamlined interface. Each tab contains a set of widgets specific to a particular task or category.

Function signature

border_tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
    type="border-card",
    widget_id=None,
)

Parameters

Parameters	Type	Description
labels	List[str]	List of the tabs labels
contents	List[Widget]	List of tabs content
type	Optional[Literal["card", "border-card"]]	Style of Tabs widget
widget_id	str	ID of the widget

labels

Determine list of the tabs labels.

type: List[str]

contents

Determine list of the tabs content.

type: List[Widget]

tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
)

type

Determine style of Tabs widget.

type: Optional[Literal["card", "border-card"]]

default value: "border-card"

tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
    type="card",
)

border_tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
    type="border-card",
)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set_active_tab(value: str)	Set active tab by title.
get_active_tab()	Return active tab title.
@click	Decorator for setting a callback function for the click event.

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/layouts and containers/012_tabs/src/main.py

Import libraries

import os

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

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 Tabs widgets

tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
    type="card",
)

border_tabs = Tabs(
    labels=["Info", "Success", "Warning", "Error"],
    contents=[
        Text("Info text", status="info"),
        Text("Success text", status="success"),
        Text("Warning text", status="warning"),
        Text("Error text", status="error"),
    ],
    type="border-card",
)

Initialize Text and Button widgets

button = Button("Show opened tab")
text = Text("")
text.hide()

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.

card = Card(
    title="Tabs (type 'card')",
    content=Container([tabs, button, text]),
)
border_card = Card(
    title="Tabs (type 'border-card')",
    content=border_tabs,
)

layout = Container(widgets=[card, border_card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widgets from python code

@button.click
def show_opened_tab():
    text.show()
    text.text = f"Opened tab: {tabs.get_active_tab()}"