Stepper

Introduction

Stepper widget in Supervisely is a graphical user interface tool that allows users to navigate through a sequence of widgets step by step. It is particularly useful for inspecting large size content in apps. The widget offers navigation option to set active step from code. Overall, Stepper widget is a helpful tool for navigating through complex interfaces and exploring large sets of data.

Function signature

Stepper(
    titles=[],
    widgets=[],
    active_step=1,
    widget_id=None,
)

Parameters

Parameters	Type	Description
titles	list	Widgets titles
widgets	list	List of widgets provided in Stepper
active_step	int	Set active step
widget_id	str	ID of the widget

titles

Determine widgets titles.

type: list

default value: []

text_info = Text(text="My info text", status="info")
card_info = Card(title="Info text", content=text_info)

stepper = Stepper(
    titles=["Title_1"],
    widgets=[card_info],
)

widgets

Determine widgets provided in Stepper.

type: list

default value: []

text_info = Text(text="My info text", status="info")
text_success = Text(text="My success text", status="success")

card_info = Card(title="Info text", content=text_info)
card_success = Card(title="Success text", content=text_success)

stepper = Stepper(widgets=[card_info, card_success])

active_step

Set active step.

type: int

default value: 1

text_info = Text(text="My info text", status="info")
text_success = Text(text="My success text", status="success")

card_info = Card(title="Info text", content=text_info)
card_success = Card(title="Success text", content=text_success)

stepper = Stepper(widgets=[card_info, card_success], active_step=2)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set_active_step(value: int)	Set active step value.
get_active_step()	Returns active step value.

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/layouts and containers/010_stepper/src/main.py

Import libraries

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

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 Card widgets we will use

text_info = Text(text="My info text", status="info")
text_success = Text(text="My success text", status="success")
text_warning = Text(text="My warning text", status="warning")

card_info = Card(title="Info text", content=text_info)
card_success = Card(title="Success text", content=text_success)
card_warning = Card(title="Warning text", content=text_warning)

Initialize Stepper widget

stepper = Stepper(
    widgets=[card_info, card_success, card_warning],
    titles=["Text step", "Success step", "Warning step"],
)

card = Card(
    title="Stepper",
    content=stepper,
)

Initialize Button widgets we will use to increase and decrease Stepper steps

button_increase = Button(text="Increase step")
button_decrease = Button(text="Decrease step")

buttons_container = Container(widgets=[button_increase, button_decrease])

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.

buttons_card = Card(content=buttons_container)
layout = Container(widgets=[card, buttons_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_increase.click
def click_button():
    curr_step = stepper.get_active_step()
    curr_step += 1
    stepper.set_active_step(curr_step)


@button_decrease.click
def click_button():
    curr_step = stepper.get_active_step()
    curr_step -= 1
    stepper.set_active_step(curr_step)