Card

A Card is a container for UI elements, offering a background and space to place components like buttons, inputs, and text within a CardContainer.

class Card

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

Nesting multiple Cards is prohibited.

Cards must be a direct children of the CardContainer.

Constructor

# Basic example
card = container.create_card() # Default type of "columns"

# Custom properties
container = tab.create_container(
    type="columns",
    height: "auto",
    width: "auto",
    vertical_align: "center",
    horizontal_align: "center",
    gap: 4,
    disallow_shrink=True
)

# Rows example
container = tab.create_container(type="rows")

Parameter	Description
type	Allowed: "columns" | "rows" Default: columns
height	Allowed: "auto" | "full" Default: "full"
width	Allowed: "auto" | "full" Default: "full"
vertical_align	Allowed: "start" | "center" | "end" Default: "start" Defines the alignment of the card's child elements (UI elements and Groups) along the vertical axis.
horizontal_align	Allowed: "start" | "center" | "end" Default: "start" Defines the alignment of the card's child elements (UI elements and Groups) along the horizontal axis.
gap	See Gap Default: 6
disallow_shrink	Allowed: True | False Default: False Prevents the card from shrinking when its width or height is set to auto. Useful when cards adjust their size to fit other elements in the tab. Set to True to disable shrinking. Leave it as default if no issues occur, as forcing this may cause unexpected layout behavior.

Methods

Method	Description
create_group(type, **kwargs)	Creates a Group instance within the card to organize and manage child elements as a single unit.
create_ui_element(element, **kwargs)	Creates a UI Element within the card.

Examples

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

container = tab.create_container(type="columns")
card = container.create_card(gap=2)

card.create_ui_element(UI.Text, content="Hello, World!", size="xl")
card.create_ui_element(UI.Text, content="Welcome from py.", size="base", color="#d5e0e6")

tab.render()

---

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

container = tab.create_container(type="columns")
card = container.create_card(vertical_align="start", horizontal_align="center", gap=2)

card.create_ui_element(UI.Text, content="Hello, World!", size="xl")
card.create_ui_element(UI.Text, content="Welcome from py.", size="base", color="#d5e0e6")

tab.render()

---

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")
email_input = card.create_ui_element(UI.Input, label="Email", margin="mb-4")
submit_button = card.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()