/

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.

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

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.

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

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

API Reference

rx.inset

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

Prop	Type \| Values	Default	Interactive
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`	false
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`	false
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`	false
`tab_index`	`int`	`-`
`title`	`str`	`-`
`side`	`"x" \| "y" \| ...`	`-`
`clip`	`"border-box" \| "padding-box"`	`-`
`p`	`Union[int, str]`	`-`
`px`	`Union[int, str]`	`-`
`py`	`Union[int, str]`	`-`
`pt`	`Union[int, str]`	`-`
`pr`	`Union[int, str]`	`-`
`pb`	`Union[int, str]`	`-`
`pl`	`Union[int, str]`	`-`

Event Triggers

See the full list of default event triggers

Inset

Basic Example

Other Directions

API Reference

rx.inset

Event Triggers