About SuperviselyEcosystemContact usSlack

Cascader

Introduction

Cascader is a dropdown list with hierarchical options.

Function signature

Cascader(
    items=None,
    filterable=False,
    placeholder="select",
    size=None,
    expand_trigger="click",
    disabled=False,
    clearable=False,
    show_all_levels=True,
    change_on_select=False,
    selected_options=None,
    widget_id=None,
)

Example of input data we will use.

pussy_black_cat = Cascader.Item(value="pussy cat", label="pussy cat")
smooth_haired_cat = Cascader.Item(value="smooth-haired cat", label="smooth-haired cat")
black_cat = Cascader.Item(
    value="black cat", label="black cat", children=[pussy_black_cat, smooth_haired_cat]
)
white_cat = Cascader.Item(value="white cat", label="white cat")
red_cat = Cascader.Item(value="red cat", label="red cat")

angry_dog = Cascader.Item(value="angry dog", label="angry dog", disabled=True)
kind_dog = Cascader.Item(value="kind dog", label="kind dog")

animals = [
    Cascader.Item(value="cat", label="cat", children=[black_cat, white_cat, red_cat]),
    Cascader.Item(value="dog", label="dog", children=[angry_dog, kind_dog]),
    Cascader.Item(value="horse", label="horse"),
    Cascader.Item(value="sheep", label="sheep"),
]

select_items = Cascader(items=animals)

Parameters

Parameters
Type
Description

items

List[Cascader.Item]

Input Cascader data

filterable

bool

Whether the options can be searched

placeholder

str

Input placeholder

size

Literal["large", "small", "mini", None]

Size of input

expand_trigger

Literal["click", "hover"]

Trigger mode of expanding current item

clearable

bool

Whether selected value can be cleared

show_all_levels

bool

Whether to display all levels of the selected value in the input

change_on_select

bool

Whether selecting an option of any level is permitted

selected_options

List[str]

Current selected option

widget_id

str

ID of the widget

items

Determine input Cascader data.

type: List[Cascader.Item]

default value: None

filterable

Determine whether the options can be searched.

type: bool

default value: False

select_items = Cascader(items=animals, filterable=True)

placeholder

Determine input placeholder.

type: str

default value: select

select_items = Cascader(items=animals, placeholder="Choose the pet")

size

Determine size of input.

type: Literal["large", "small", "mini", None]

default value: None

select_items = Cascader(items=animals)
select_items_mini = Cascader(items=animals, size="mini")
select_items_small = Cascader(items=animals, size="small")
select_items_large = Cascader(items=animals, size="large")

expand_trigger

Trigger mode of expanding current item.

type: Literal["click", "hover"]

default value: "click"

select_items = Cascader(items=animals, expand_trigger="hover")

clearable

Determine whether selected value can be cleared.

type: bool

default value: False

select_items = Cascader(items=animals, clearable=True)

show_all_levels

Determine whether to display all levels of the selected value in the input.

type: bool

default value: True

select_items = Cascader(items=animals, show_all_levels=False)

change_on_select

Determine whether selecting an option of any level is permitted.

type: bool

default value: False

select_items = Cascader(items=animals, change_on_select=True)

selected_options

Determine current selected option.

type: List[str]

default value: None

select_items = Cascader(items=animals, selected_options=["horse"])

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods
Description

get_value()

Return Cascader selected value.

set_value(value: List[str])

Set Cascader selected value.

get_items()

Return Cascader items.

get_item()

Return Cascader.Item item.

set_items(value: List[Cascader.Item])

Set Cascader items.

add_items(value: List[Cascader.Item])

Add items in Cascader.

expand_to_hover()

Set expand_trigger to hover mode.

expand_to_click()

Set expand_trigger to click mode.

@value_changed

Decorator function to handle selected value change.

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/selection/015_cascader/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Cascader, 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()

Prepare items for cascader

pussy_black_cat = Cascader.Item(value="pussy cat", label="pussy cat")
smooth_haired_cat = Cascader.Item(value="smooth-haired cat", label="smooth-haired cat")
black_cat = Cascader.Item(
    value="black cat", label="black cat", children=[pussy_black_cat, smooth_haired_cat]
)
white_cat = Cascader.Item(value="white cat", label="white cat")
red_cat = Cascader.Item(value="red cat", label="red cat")

angry_dog = Cascader.Item(value="angry dog", label="angry dog", disabled=True)
kind_dog = Cascader.Item(value="kind dog", label="kind dog")

animals = [
    Cascader.Item(value="cat", label="cat", children=[black_cat, white_cat, red_cat]),
    Cascader.Item(value="dog", label="dog", children=[angry_dog, kind_dog]),
    Cascader.Item(value="horse", label="horse"),
    Cascader.Item(value="sheep", label="sheep"),
]

Initialize Cascader and Text widgets

select_items = Cascader(items=animals)

text = Text()

Create app layout

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

card = Card(
    title="Cascader",
    content=Container(widgets=[select_items, text]),
)
layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=card)

Add functions to control widgets from python code

@select_items.value_changed
def show_item(res):
    info = f"You choise: {'/'.join(str(x) for x in res)} item"
    text.set(text=info, status="info")
PreviousDropdownNextClassesListSelector

Last updated

Was this helpful?