Row

A row component arranges its children horizontally with a configurable gap between them. Use it for simple horizontal 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 horizontally.

Examples

TIP

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

Basic

A basic row.

Preview

Code

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

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