Flux

Appearance

Spacing ​

The spacing component adds a div within its parent flex container with a predefined size. It works in both column and row flex containers. The sizes are predefined. Spacings are invisible elements and are made visible for demo purposes.

Props

size: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17
The size of the spacing. This value is not the actual size, but a reference to it.

Examples ​

TIP

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

Horizontal

A horizontal spacing.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxButtonStack>
                <FluxSecondaryButton
                    label="More info"/>

                <FluxSpacing
                    class="spacing-example"
                    :size="17"/>

                <FluxSecondaryButton
                    label="Cancel"/>

                <FluxPrimaryButton
                    icon-leading="circle-check"
                    label="Save"/>
            </FluxButtonStack>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Vertical

A vertical spacing.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxButtonStack direction="vertical">
                <FluxSecondaryButton
                    label="More info"/>

                <FluxSpacing
                    class="spacing-example"
                    :size="10"/>

                <FluxSecondaryButton
                    label="Cancel"/>

                <FluxPrimaryButton
                    icon-leading="circle-check"
                    label="Save"/>
            </FluxButtonStack>
        </FluxPaneBody>
    </FluxPane>
</template>

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