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()
PreviousTabNextCard

Last updated

Was this helpful?