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.
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.
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.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
side | "x""y""top""bottom""right""left" | The side. |
clip | "border-box""padding-box" | How to clip the element's content: "border-box" | "padding-box". |
p | Union[int, str] | Padding. |
px | Union[int, str] | Padding on the x axis. |
py | Union[int, str] | Padding on the y axis. |
pt | Union[int, str] | Padding on the top. |
pr | Union[int, str] | Padding on the right. |
pb | Union[int, str] | Padding on the bottom. |
pl | Union[int, str] | Padding on the left. |