animaltrack/docs/vendor/monsterui/api_ref/docs_layout.md

Layout (Flex and Grid) API Reference

This page covers Grids, which are often used for general structure, Flex which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page

Grid

See Source

See Output

Column 1 Item 1

Column 1 Item 2

Column 1 Item 3

Column 2 Item 1

Column 2 Item 2

Column 2 Item 3

Column 3 Item 1

Column 3 Item 2

Column 3 Item 3

[code]

def ex_grid():
    return Grid(
        Div(
            P("Column 1 Item 1"), 
            P("Column 1 Item 2"), 
            P("Column 1 Item 3")),
        Div(
            P("Column 2 Item 1"), 
            P("Column 2 Item 2"), 
            P("Column 2 Item 3")),
        Div(
            P("Column 3 Item 1"), 
            P("Column 3 Item 2"), 
            P("Column 3 Item 3")))

[/code]

Grid

Source

[code]

Grid(*div, cols_min: int = 1, cols_max: int = 4, cols_sm: int = None, cols_md: int = None, cols_lg: int = None, cols_xl: int = None, cols: int = None, cls='gap-4', **kwargs) -> fastcore.xml.FT

[/code]

Creates a responsive grid layout with smart defaults based on content

Params

• div Div components to put in the grid

• cols_min Minimum number of columns at any screen size

• cols_max Maximum number of columns allowed at any screen size

• cols_sm Number of columns on small screens

• cols_md Number of columns on medium screens

• cols_lg Number of columns on large screens

• cols_xl Number of columns on extra large screens

• cols Number of columns on all screens

• cls Additional classes on the grid (tip: gap provides spacing for grids)

• kwargs

Returns: Responsive grid component

Practical Grid Example

See Source

See Output

Laptop

$999

Add to Cart

Smartphone

$599

Add to Cart

Headphones

$199

Add to Cart

Smartwatch

$299

Add to Cart

Tablet

$449

Add to Cart

Camera

$799

Add to Cart

[code]

def ex_product_grid():
    products = [
        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
    ]
    
    product_cards = [
        Card(
            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
            H4(p["name"], cls="mt-2"),
            P(p["price"], cls=TextPresets.bold_sm),
            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
        ) for p in products
    ]
    
    return Grid(*product_cards, cols_lg=3)

[/code]

Flex

Play Flex Box Froggy to get an understanding of flex box.

DivFullySpaced

Source

[code]

DivFullySpaced(*c, cls='w-full', **kwargs)

[/code]

Creates a flex div with it's components having as much space between them as possible

Params

• c Components

• cls Classes for outer div (w-full makes it use all available width)

• kwargs

See Source

See Output

LeftCenterRight

[code]

def ex_fully_spaced_div():
    return DivFullySpaced(
        Button("Left", cls=ButtonT.primary),
        Button("Center", cls=ButtonT.secondary),
        Button("Right", cls=ButtonT.destructive)
    )

[/code]

DivCentered

Source

[code]

DivCentered(*c, cls='space-y-4', vstack=True, **kwargs) -> fastcore.xml.FT

[/code]

Creates a flex div with it's components centered in it

Params

• c Components

• cls Classes for outer div (space-y-4 provides spacing between components)

• vstack Whether to stack the components vertically

• kwargs

Returns: Div with components centered in it

See Source

See Output

Centered Title

This content is centered both horizontally and vertically.

[code]

def ex_centered_div():
    return DivCentered(
        H3("Centered Title"),
        P("This content is centered both horizontally and vertically.")
    )

[/code]

DivLAligned

Source

[code]

DivLAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

[/code]

Creates a flex div with it's components aligned to the left

Params

• c Components

• cls Classes for outer div

• kwargs

Returns: Div with components aligned to the left

See Source

See Output

Left Aligned Title

Some text that's left-aligned with the title and image.

[code]

def ex_l_aligned_div():
    return DivLAligned(
        Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
        H4("Left Aligned Title"),
        P("Some text that's left-aligned with the title and image.")
    )

[/code]

DivRAligned

Source

[code]

DivRAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

[/code]

Creates a flex div with it's components aligned to the right

Params

• c Components

• cls Classes for outer div

• kwargs

Returns: Div with components aligned to the right

See Source

See Output

Action

Right-aligned text

[code]

def ex_r_aligned_div():
    return DivRAligned(
        Button("Action", cls=ButtonT.primary),
        P("Right-aligned text"),
        Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
    )

[/code]

DivVStacked

Source

[code]

DivVStacked(*c, cls='space-y-4', **kwargs) -> fastcore.xml.FT

[/code]

Creates a flex div with it's components stacked vertically

Params

• c Components

• cls Additional classes on the div (tip: space-y-4 provides spacing between components)

• kwargs

Returns: Div with components stacked vertically

See Source

See Output

Vertical Stack

First paragraph in the stack

Second paragraph in the stack

Action Button

[code]

def ex_v_stacked_div():
    return DivVStacked(
        H2("Vertical Stack"),
        P("First paragraph in the stack"),
        P("Second paragraph in the stack"),
        Button("Action Button", cls=ButtonT.secondary)
    )

[/code]

DivHStacked

Source

[code]

DivHStacked(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

[/code]

Creates a flex div with it's components stacked horizontally

Params

• c Components

• cls Additional classes on the div (space-x-4 provides spacing between components)

• kwargs

Returns: Div with components stacked horizontally

See Source

See Output

Column 1

Content for column 1

Column 2

Content for column 2

Column 3

Content for column 3

[code]

def ex_h_stacked_div():
    return DivHStacked(
        Div(H4("Column 1"), P("Content for column 1")),
        Div(H4("Column 2"), P("Content for column 2")),
        Div(H4("Column 3"), P("Content for column 3"))
    )

[/code]

---

FlexT

Flexbox modifiers using Tailwind CSS

Option	Value	Option	Value	Option	Value	Option	Value
block	flex	inline	inline-flex	left	justify-start	center	justify-center
right	justify-end	between	justify-between	around	justify-around	stretch	items-stretch
top	items-start	middle	items-center	bottom	items-end	row	flex-row
row_reverse	flex-row-reverse	column	flex-col	column_reverse	flex-col-reverse	nowrap	flex-nowrap
wrap	flex-wrap	wrap_reverse	flex-wrap-reverse