Flux

Appearance

Spacer ​

A component that fills remaining space in its parent container, helpful in creating evenly divided button rows in responsive layouts. Spacers are invisible elements and are made visible for demo purposes.

Examples ​

TIP

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

Horizontal

A horizontal spacer.

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

                <FluxSpacer class="spacer-example"/>

                <FluxSecondaryButton
                    label="Cancel"/>

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

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

Vertical

A vertical spacer.

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

                <FluxSpacer class="spacer-example"/>

                <FluxSecondaryButton
                    label="Cancel"/>

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

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