Docs

Searchv0.6.0 (main)
Getting started
OverviewInstallationThemesChangelog
Hooks
use_pressuse_moveuse_hoveruse_buttonuse_overlayuse_anchor_link
Atoms
ButtonPopoverAnchorLink
Components
Layout
StackGridSeparatorSkeletonApp BarDrawerTabsTableCollapsible
Input
ButtonInputTiptap editorDate & TimeSliderSelectCheckboxRadioToggleColor Picker
Feedback
AlertToastModalProgressPopoverChipKbd
General
TypographyIconLinkCallback

Stack#

Vertical stacks#

Use a stack to create a container displaying its list of children one after the other while spacing them out by a predefined distance.

<Stack spacing=Size::Em(0.6)> <Skeleton animated=false>"Item 1"</Skeleton> <Skeleton animated=false>"Item 2"</Skeleton> <Skeleton animated=false>"Item 3"</Skeleton> </Stack> Item 1Item 2Item 3

Horizontal stacks#

A stacks default orientation is StackOrientation::Vertical. You can explicitly set the orientation to be StackOrientation::Horizontal to let the stack display its children horizontally.

<Stack orientation=StackOrientation::Horizontal spacing=Size::Em(0.6)> <Skeleton animated=false>"Item 1"</Skeleton> <Skeleton animated=false>"Item 2"</Skeleton> <Skeleton animated=false>"Item 3"</Skeleton> </Stack> Item 1Item 2Item 3