CardContainer

The CardContainer class is used to group single or multiple Card elements. Each container can either be of type columns or rows, which determines the layout of the cards.

class CardContainer

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

At least one CardContainer is required within a Tab element.

A Tab can hold multiple CardContainer objects. Nesting CardContainer objects inside each other is allowed, meaning you can create complex layouts with nested containers. However, we do not recommend nesting more than 3 CardContainer objects, as it may result in a poorly structured UI that looks disorganized or cluttered.

Constructor

# Basic example
container = tab.create_container() # Default type of "columns" and variants of {"height": "full","width": "full"} will be used

# Custom parameters
container = tab.create_container(
    type="columns",
    height="full",
    width="auto",
    gap=8
)

# Rows example
container = tab.create_container(
    type="rows",
    height="full",
    width="auto",
    gap=8
)

Parameter	Description
type	Allowed: "columns" | "rows" Default: "columns"
width	Allowed: "auto" | "full" Default: "full"
height	Allowed: "auto" | "full" Default: "full"
gap	See Gap Default: 6

Methods

Method	Description
create_container(type, **kwargs)	Creates a nested CardContainer.
create_card(**kwargs)	Creates and adds the Card to the CardContainer.

Examples

The following examples demonstrate how to create layouts using CardContainers and Cards.

Simple example with just one card

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

# this container holds only one card, type does not matter
container = tab.create_container(type="columns")
card = container.create_card()

tab.render()

---

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

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

left_card = container.create_card()
right_card = container.create_card()

tab.render()

---

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

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

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

# this container holds only one card, type does not matter
bottom_container = tab.create_container(type="columns") 

bottom_card = bottom_container.create_card()


tab.render()

---

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

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

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

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

bottom_left_card = bottom_container.create_card()
bottom_right_card = bottom_container.create_card()


tab.render()

---

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

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

left_container = wrapper_container.create_container(type="rows")
top_card = left_container.create_card()
bottom_card = left_container.create_card()

# this container holds only one card, type does not matter
right_container = wrapper_container.create_container(type="columns")
right_card = right_container.create_card()

tab.render()