37 lines
1.1 KiB
Markdown
37 lines
1.1 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Stack
|
|
- rx.chakra.Hstack
|
|
- rx.chakra.Vstack
|
|
---
|
|
|
|
# Stack
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
Below are two examples the different types of stack components vstack and hstack for ordering items on a page.
|
|
|
|
```python demo
|
|
rx.chakra.hstack(
|
|
rx.chakra.box("Example", bg="red", border_radius="md", width="10%"),
|
|
rx.chakra.box("Example", bg="orange", border_radius="md", width="10%"),
|
|
rx.chakra.box("Example", bg="yellow", border_radius="md", width="10%"),
|
|
rx.chakra.box("Example", bg="lightblue", border_radius="md", width="10%"),
|
|
rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="60%"),
|
|
width="100%",
|
|
)
|
|
```
|
|
|
|
```python demo
|
|
rx.chakra.vstack(
|
|
rx.chakra.box("Example", bg="red", border_radius="md", width="20%"),
|
|
rx.chakra.box("Example", bg="orange", border_radius="md", width="40%"),
|
|
rx.chakra.box("Example", bg="yellow", border_radius="md", width="60%"),
|
|
rx.chakra.box("Example", bg="lightblue", border_radius="md", width="80%"),
|
|
rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="100%"),
|
|
width="100%",
|
|
)
|
|
```
|