91 lines
2.1 KiB
Markdown
91 lines
2.1 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.inset
|
|
|
|
Inset: |
|
|
lambda **props: rx.radix.themes.card(
|
|
rx.radix.themes.inset(
|
|
rx.image(src="/reflex_banner.png", height="auto"),
|
|
**props,
|
|
),
|
|
width="500px",
|
|
)
|
|
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Inset
|
|
|
|
Applies a negative margin to allow content to bleed into the surrounding container.
|
|
|
|
## Basic Example
|
|
|
|
Nesting an Inset component inside a Card will render the content from edge to edge of the card.
|
|
|
|
```python demo
|
|
rx.card(
|
|
rx.inset(
|
|
rx.image(src="/reflex_banner.png", width="100%", height="auto"),
|
|
side="top",
|
|
pb="current",
|
|
),
|
|
rx.text("Reflex is a web framework that allows developers to build their app in pure Python."),
|
|
width="25vw",
|
|
)
|
|
```
|
|
|
|
## Other Directions
|
|
|
|
The `side` prop controls which side the negative margin is applied to. When using a specific side,
|
|
it is helpful to set the padding for the opposite side to `current` to retain the same padding the
|
|
content would have had if it went to the edge of the parent component.
|
|
|
|
```python demo
|
|
rx.card(
|
|
rx.text("The inset below uses a bottom side."),
|
|
rx.inset(
|
|
rx.image(src="/reflex_banner.png", width="100%", height="auto"),
|
|
side="bottom",
|
|
pt="current",
|
|
),
|
|
width="25vw",
|
|
)
|
|
```
|
|
|
|
```python demo
|
|
rx.card(
|
|
rx.flex(
|
|
rx.text("This inset uses a right side, which requires a flex with direction row."),
|
|
rx.inset(
|
|
rx.box(background="center/cover url('/reflex_banner.png')", height="100%"),
|
|
width="100%",
|
|
side="right",
|
|
pl="current",
|
|
),
|
|
direction="row",
|
|
width="100%",
|
|
),
|
|
width="25vw",
|
|
)
|
|
```
|
|
|
|
```python demo
|
|
rx.card(
|
|
rx.flex(
|
|
rx.inset(
|
|
rx.box(background="center/cover url('/reflex_banner.png')", height="100%"),
|
|
width="100%",
|
|
side="left",
|
|
pr="current",
|
|
),
|
|
rx.text("This inset uses a left side, which also requires a flex with direction row."),
|
|
direction="row",
|
|
width="100%",
|
|
),
|
|
width="25vw",
|
|
)
|
|
```
|