Stack
Stack is a layout component used to group elements together and apply a space between them.
vstack is used to stack elements in the vertical direction.
hstack is used to stack elements in the horizontal direction.
stack is used to stack elements in the vertical or horizontal direction.
These components are based on the flex component and therefore inherit all of its props.
The stack component can be used with the flex_direction prop to set to either row or column to set the direction.
ExpandCollapse
Hstack
ExpandCollapse
Vstack
ExpandCollapse
Real World Example
Saving Money
Saving money is an art that combines discipline, strategic planning, and the wisdom to foresee future needs and emergencies. It begins with the simple act of setting aside a portion of one's income, creating a buffer that can grow over time through interest or investments.
Spending Money
Spending money is a balancing act between fulfilling immediate desires and maintaining long-term financial health. It's about making choices, sometimes indulging in the pleasures of the moment, and at other times, prioritizing essential expenses.
ExpandCollapse
API Reference
rx.stack
A stack component.
directionalignjustifyProps
| 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. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
direction | "row""column""row-reverse""column-reverse" | How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse". |
align | "start""center""end""baseline""stretch" | The alignment of the stack items. |
justify | "start""center""end""between" | Alignment of children along the cross axis: "start" | "center" | "end" | "between". |
wrap | "nowrap""wrap""wrap-reverse" | Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse". |
spacing | "0""1""2""3""4""5""6""7""8""9" | The spacing between each stack item. |
Event Triggers
See the full list of default event triggersrx.hstack
A horizontal stack component.
directionalignjustifyProps
| 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. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
direction | "row""column""row-reverse""column-reverse" | The direction of the stack. |
align | "start""center""end""baseline""stretch" | The alignment of the stack items. |
justify | "start""center""end""between" | Alignment of children along the cross axis: "start" | "center" | "end" | "between". |
wrap | "nowrap""wrap""wrap-reverse" | Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse". |
spacing | "0""1""2""3""4""5""6""7""8""9" | The spacing between each stack item. |
Event Triggers
See the full list of default event triggersrx.vstack
A vertical stack component.
directionalignjustifyProps
| 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. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
direction | "row""column""row-reverse""column-reverse" | The direction of the stack. |
align | "start""center""end""baseline""stretch" | The alignment of the stack items. |
justify | "start""center""end""between" | Alignment of children along the cross axis: "start" | "center" | "end" | "between". |
wrap | "nowrap""wrap""wrap-reverse" | Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse". |
spacing | "0""1""2""3""4""5""6""7""8""9" | The spacing between each stack item. |