Tile

Overview

Tile is a widget Layout. It’s the core element of any pysepal app. It inherits from the SepalWidget class. Any argument from the original Card ipyvuetify class can be used to complement it.

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()],
    output = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)
tile

/home/docs/checkouts/readthedocs.org/user_builds/sepal-ui/envs/latest/lib/python3.10/site-packages/google/api_core/_python_version_support.py:273: FutureWarning: You are using a Python version (3.10.19) which Google will stop supporting in new releases of google.api_core once it reaches its end of life (2026-10-04). Please upgrade to the latest Python version, or at least Python 3.11, to continue receiving updates for google.api_core past that date.
  warnings.warn(message, FutureWarning)

Tip

The best way to use the tiles in a pysepal framework is to use Tile as an abstract tile and build specific Tiles adapted to your need in the component/tile package. Everything is shown following this tutorial.

Methods

nest

Prepare the tile to be used as a nested component in a tile. The elevation will be set to 0 and the title remove from children. The mount_id will also be changed to “nested”.

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()],
    alert = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)

tile.nest()

set_content

Replace the current content of the tile with the provided inputs. it will keep the output and btn widget if existing.

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()],
    alert = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)

tile.set_content([sw.PasswordField()])

set_title

Replace the current title and activate it. If no title is provided, the title is removed from the tile content.

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()],
    alert = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)

tile.set_title("A custom title")

get_title

Return the current title of the tile

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()],
    alert = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)

tile.get_title()

'My first tile'

toggle_inputs

Display only the widgets that are part of the input_list. the widget_list is the list of all the widgets of the tile.

from pysepal import sepalwidgets as sw
import ipyvuetify as v

# correct colors for the documentation
# set to dark in SEPAL by default
v.theme.dark = False

inputs = [sw.Markdown('lorem ipsum'), v.Select(), v.TextField()]

tile = sw.Tile(
    id_ = "tile",
    title = "My first tile",
    inputs = inputs,
    alert = sw.Alert().add_msg('lorem ipsum'),
    btn = sw.Btn()
)

tile.toggle_inputs([inputs[2]], inputs)

Note

More information can be found here.