VStack Edit
VStack
(or Vertical Stack) is a layout component that arranges child elements in a vertical line.
Usage Usage
VStack
can render anything inside.
import { __experimentalText as Text, __experimentalVStack as VStack, } from '@wordpress/components'; function Example() { return ( <VStack> <Text>Code</Text> <Text>is</Text> <Text>Poetry</Text> </VStack> ); }
Props Props
alignment
Type: HStackAlignment
,CSS['alignItems']
Determines how the child elements are aligned.
top
: Aligns content to the top.topLeft
: Aligns content to the top/left.topRight
: Aligns content to the top/right.left
: Aligns content to the left.center
: Aligns content to the center.right
: Aligns content to the right.bottom
: Aligns content to the bottom.bottomLeft
: Aligns content to the bottom/left.bottomRight
: Aligns content to the bottom/right.edge
: Aligns content to the edges of the container.stretch
: Stretches content to the edges of the container.
direction
Type: FlexDirection
The direction flow of the children content can be adjusted with direction
. column
will align children vertically and row
will align children horizontally.
expanded
Type: boolean
Expands to the maximum available width (if horizontal) or height (if vertical).
justify
Type: CSS['justifyContent']
Horizontally aligns content if the direction
is row
, or vertically aligns content if the direction
is column
.
In the example below, flex-start
will align the children content to the left.
spacing
Type: CSS['width']
The amount of space between each child element. Spacing in between each child can be adjusted by using spacing
.
The value of spacing
works as a multiplier to the library’s grid system (base of 4px
).
wrap
Type: boolean
Determines if children should wrap.
Spacer Spacer
When a Spacer
is used within an VStack
, the Spacer
adaptively expands to take up the remaining space.
import { __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, } from '@wordpress/components'; function Example() { return ( <VStack> <Text>Code</Text> <Spacer> <Text>is</Text> </Spacer> <Text>Poetry</Text> </VStack> ); }
Spacer
can also be used in-between items to push them apart.
import { __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalVStack as VStack, } from '@wordpress/components'; function Example() { return ( <VStack> <Text>Code</Text> <Spacer /> <Text>is</Text> <Text>Poetry</Text> </VStack> ); }