✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ 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
Copyright © 2023 Pynecone, Inc.