Flux

Appearance

Stack ​

A stack component is a layout component that arranges child elements in a stack along a specified axis, with a configurable gap between elements. The axis property defines the direction in which the elements are stacked (e.g. horizontally or vertically), while the gap property sets the size of the space between elements. Stacks can be used to organize content in a compact and organized manner and are commonly used to create simple and flexible layouts in web and mobile applications.

Props

direction?: string
The direction in which the elements are stacked.
Default: vertical

gap?: number
The gap between each element.
Default: 30

is-centered?: boolean
If the elements should be centered.

is-fill?: boolean
If the elements should fill the available space.

is-wrapping?: boolean
If the elements should wrap when there is not enough space.

tag?: keyof HTMLElementTagNameMap
The HTML tag to use for the stack.
Default: div

Slots

default
The content that should be stacked.

Available stacks ​

Examples ​

TIP

The class column-example is used in the documentation to display the columns.

Horizontal

A horizontal stack.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxStack
                direction="horizontal"
                :gap="10">
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
            </FluxStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxStack } from '@flux-ui/components';
</script>

Vertical

A vertical stack.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxStack
                :gap="10">
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
            </FluxStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxStack } from '@flux-ui/components';
</script>