47 lines
1.0 KiB
Markdown
47 lines
1.0 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Box
|
|
---
|
|
|
|
# Box
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
Box is a generic container component that can be used to group other components.
|
|
|
|
```python demo
|
|
rx.chakra.vstack(
|
|
rx.chakra.box("Example", bg="yellow", border_radius="sm", width="20%"),
|
|
rx.chakra.box("Example", bg="orange", border_radius="md", width="40%"),
|
|
rx.chakra.box("Example", bg="red", border_radius="md", width="60%"),
|
|
rx.chakra.box("Example", bg="lightblue", border_radius="lg", width="80%"),
|
|
rx.chakra.box("Example", bg="lightgreen", border_radius="xl", width="100%"),
|
|
width="100%",
|
|
)
|
|
```
|
|
|
|
Below is an example of how a box component can contain other components.
|
|
|
|
```python demo
|
|
rx.chakra.box(
|
|
rx.chakra.button("Click Me"),
|
|
bg="lightgreen",
|
|
border_radius="15px",
|
|
border_color="green",
|
|
border_width="thick",
|
|
padding=5,
|
|
)
|
|
```
|
|
|
|
Box can also compose videos and iframe elements.
|
|
|
|
```python demo
|
|
rx.chakra.box(
|
|
element= "iframe",
|
|
src="https://www.youtube.com/embed/9bZkp7q19f0",
|
|
width = "100%",
|
|
)
|
|
```
|