Flux

Appearance

Column ​

A column component arranges its children vertically with a configurable gap between them. Use it for simple vertical layouts where only the spacing needs to be controlled.

Props

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

Slots

default
The content that should be stacked vertically.

Examples ​

TIP

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

Basic

A basic column.

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

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