✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Stack


Below are two examples the different types of stack components vstack and hstack.
Example
Example
Example
Example
Example
rx.hstack(
    rx.box(
        "Example", bg="red", border_radius="md", width="10%"
    ),
    rx.box(
        "Example",
        bg="orange",
        border_radius="md",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="yellow",
        border_radius="md",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="lightblue",
        border_radius="md",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="lightgreen",
        border_radius="md",
        width="60%",
    ),
    width="100%",
)
Example
Example
Example
Example
Example
rx.vstack(
    rx.box(
        "Example", bg="red", border_radius="md", width="20%"
    ),
    rx.box(
        "Example",
        bg="orange",
        border_radius="md",
        width="40%",
    ),
    rx.box(
        "Example",
        bg="yellow",
        border_radius="md",
        width="60%",
    ),
    rx.box(
        "Example",
        bg="lightblue",
        border_radius="md",
        width="80%",
    ),
    rx.box(
        "Example",
        bg="lightgreen",
        border_radius="md",
        width="100%",
    ),
    width="100%",
)

Stack


Container to stack elements with spacing.


  • Base Event Triggers

Hstack


Stack items horizontally.


  • No props for Hstack.

  • Base Event Triggers

Vstack


Stack items vertically.


  • No props for Vstack.

  • Base Event Triggers

← SpacerWrap →

Copyright © 2023 Pynecone, Inc.