Ui XML Reference\VStack
Stacks children frames vertically. This frame type has a default size of 0 and expands to fit any children.
Note that Flex Layouts automatically arrange their children similar to an HStack. You can then change the flexDirection
attribute to column
to stack it vertically.
Example Usage
<!-- Legacy version -->
<VStack layout="legacy" spacing="10" padding="10" frameImage="frame01_blue">
<Frame height="80" width="80" frameImage="cart" />
<Frame height="90" width="90" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="110" width="110" frameImage="cart" />
</VStack>
<!-- Flex version -->
<Frame layout="flex" padding="10" frameImage="frame01_blue" flexDirection="column">
<Frame height="80" width="80" frameImage="cart" marginBottom="10" />
<Frame height="90" width="90" frameImage="cart" marginBottom="10" />
<Frame height="100" width="100" frameImage="cart" marginBottom="10" />
<Frame height="110" width="110" frameImage="cart" />
</Frame>
This XML produces the following UI:
Related Trigger Function(s):
Related UI XML Properties:
reverse
Value type: boolean
Supports data binding
Description
The reverse status of the VStack frame, where true
reverses the order in which child frames are added (the last created frame will be the first frame displayed) and false
displays child frames normally.
Only works in legacy layout. For the flex layout equivalent, see FlexDirection.
Example Usage
<VStack layout="legacy" spacing="10" padding="10" frameImage="frame01_blue" reverse="true">
<Frame height="80" width="80" frameImage="cart" />
<Frame height="90" width="90" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="110" width="110" frameImage="cart" />
</VStack>