Flux

Appearance

Placeholder ​

A placeholder is used for situations where the user should provide content, but it hasn't already. This component will display the steps the user has to take.

Props

icon?: FluxIconName
The icon that is used within the placeholder.

is-button?: boolean
If the placeholder is a button.

message?: string
The message in the placeholder.

title?: string
The title in the placeholder.

variant?: "extended" | "simple" | "small"
The variant of the placeholder.
Default: extended

Emits

click: [MouseEvent]
Triggered when the placeholder is clicked.

Slots

default
The content of the placeholder.

Examples ​

Basic

A basic placeholder.

<template>
    <FluxPlaceholder
        icon="files"
        title="No invoices"
        message="No invoices found for this month."/>
</template>

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

Clickable

A placeholder that can be clicked.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxDropZone
                v-slot="{ showPicker }"
                @select="onUploaded">
                <FluxPlaceholder
                    is-button
                    icon="files"
                    :title="uploadedFile ? uploadedFile.name : 'Upload invoice'"
                    message="Drop the invoice here or click to upload."
                    @click="showPicker">
                </FluxPlaceholder>
            </FluxDropZone>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxDropZone, FluxPane, FluxPaneBody, FluxPlaceholder, FluxSecondaryButton } from '@flux-ui/components';
    import { ref } from 'vue';

    const uploadedFile = ref<File|null>(null);

    function onUploaded(file: File) {
        uploadedFile.value = file;
    }
</script>

Button

A placeholder with a custom button inside.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxPlaceholder
                icon="files"
                title="No templates found!"
                message="There aren't any invoice templates yet.">

                <FluxSecondaryButton label="Create template"/>
            </FluxPlaceholder>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Used components ​