Usage

Import the component from its dedicated entry. The component loads its structural styles.

Import the theme in your application entry:

import '@astryx-vue/themes/neutral.css'

Component usage:

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

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 direction and space-distribution configurations.

Stack — Direction

Horizontal

FirstSecondThird

Vertical

FirstSecondThird

With horizontal, children flow from left to right. With vertical, they flow from top to bottom. Stack uses vertical by default.

HStack — Basic

First itemSecond itemThird item

HStack always uses a horizontal direction and is equivalent to Stack with direction set to horizontal.

VStack — Basic

First itemSecond itemThird item

VStack always uses a vertical direction and is equivalent to Stack with direction set to vertical.

StackItem — Size

Static

Fill remaining space

StackItem uses static sizing by default. Set it to fill to occupy the remaining space in the stack.