Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Layout

/

Inset

Applies a negative margin to allow content to bleed into the surrounding container.

Nesting an Inset component inside a Card will render the content from edge to edge of the card.

Reflex is a web framework that allows developers to build their app in pure Python.

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",
)

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.

The inset below uses a bottom side.

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",
)

This inset uses a right side, which requires a flex with direction row.

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",
)

This inset uses a left side, which also requires a flex with direction row.

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",
)

Applies a negative margin to allow content to bleed into the surrounding container.

PropTypeDescriptionValues
sideUnion

The side

clipUnion

How to clip the element's content: "border-box" | "padding-box"

pUnion

Padding

pxUnion

Padding on the x axis

pyUnion

Padding on the y axis

ptUnion

Padding on the top

prUnion

Padding on the right

pbUnion

Padding on the bottom

plUnion

Padding on the left

Event Triggers

See the full list of default event triggers
← GridSection →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting