Usage

Stack arranges items in a row or column with consistent spacing. Use the gap prop to control the space between items.

import { VStack } from '@astryx-vue/core/Stack'

VStack is Stack with the direction fixed to a column, so the same props work without repeating direction. gap takes a step from the spacing scale and is the only spacing the column needs: do not add margins to the children.

vAlign places the items along the column — start, center, end, between, around, or evenly. hAlign sets how the items sit against each other horizontally, and justify is a shorter alias for it.

<script setup lang="ts">
import { Heading } from '@astryx-vue/core/Heading'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <VStack :gap="3">
    <Heading :level="5">
      Weekly Report
    </Heading>
    <Text type="body" color="secondary">
      VStack arranges its children in a vertical column.
    </Text>
  </VStack>
</template>

Anatomy

Element	Description
Stack container	Layout container that arranges content along one flex axis.
Item	Optional StackItem wrapper that controls one item in the stack.
Content	Caller-supplied content rendered by a Stack or StackItem.

Best practices

Guidance	Practices
Do	Use the gap prop for spacing between items; don't add margins manually.
Do	Use StackItem with size="fill" to make one item stretch and fill the leftover space.
Don't	Nest stacks inside stacks; try wrap="wrap" first to let items flow to the next line.

Examples

Common configurations, variations, and states.

Basic

Weekly Report

VStack arranges its children in a vertical column. The gap prop controls the spacing between each item.

A heading and paragraphs stacked vertically with a consistent gap. Use VStack whenever siblings should flow top to bottom with even spacing.