Group

class Group

A Group is a UI element that can only exist as a child of a Card. It is used to organize multiple UI Elements into a single unit for easier alignment and positioning.

Do not create Group instances directly. Instead, use the create_group() method of the Card class to genereate them.

Nesting multiple Groups is allowed.

Constructor

# Basic example
group = card.create_group(type="columns")

# Setting extra attributes
group = card.create_group(
    type="columns",
    horizontal_align="center",
    vertical_align="center",
    gap=2,
    full_width=True
)

# Type of rows
group = card.create_group(type="rows")

# Nesting groups
group1 = card.create_group(type="columns")
group2 = group1.create_group(type="rows")

Parameter	Description
type	Allowed: "columns" | "rows" Default: columns
vertical_align	Allowed: "start" | "center" | "end" Default: "start" Defines the alignment of the group's child elements (UI elements and Groups) along the vertical axis.
horizontal_align	Allowed: "start" | "center" | "end" Default: "start" Defines the alignment of the group's child elements (UI elements and Groups) along the horizontal axis.
gap	See Gap. Default: 6
full_width	Allowed: True | False Default: False Forces the group to occupy the entire available width. Use this if the group appears smaller than expected. Note: It may require setting the parent elements (such as containers and cards) to full width as well.

Methods

Method	Description
create_group(type, **kwargs)	Creates a nested Group instance within the current Group.
create_ui_element(element, **kwargs)	Creates a UI Element within the Group.

Examples

Improved version of the last example from the previous section (Card). Here, Group is used to place the button next to the input.

tab = Tab(name='My Custom Tab')

container = tab.create_container(type="columns")

card = container.create_card(gap=2, vertical_align="center", horizontal_align="center")
card.create_ui_element(UI.Text, content="Input email", size="base")

group = card.create_group(type="columns", gap=2, vertical_align="center")

email_input = group.create_ui_element(UI.Input, label="Email")
submit_button = group.create_ui_element(UI.Button, label="Submit", variant="cta")

def on_submit():
    print(f"{email_input.value} submitted")

submit_button.onClick = on_submit

tab.render()