Flux

Appearance

Statistic ​

The statistic component is a Vue component that displays a data statistic, such as the number of leads generated by a website, in an eye-catching and customizable way. It includes an icon, label, and value, and can also display a change icon and value with a customizable color.

LabelValue
LabelValue
Active users this month750
10%
New users this month20
5%

Props

change-color?: FluxColor
The color of the statistic change.
Default: gray

change-icon?: FluxIconName
The icon for the statistic change.

change-value?: string
The change value.

color?: FluxColor
The color of the icon.
Default: gray

direction?: FluxDirection
The direction of the statistic.
Default: horizontal

icon?: FluxIconName
The icon of the statistic.

is-loading?: boolean
Mark the statistic as loading.

label: string
The label of the statistic.

value: string
The value of the statistic.

image-src?: string
The image of the statistic.

image-alt?: string
The alt tag for the image.

Examples ​

Basic

A basic statistic.

LabelValue

<template>
    <FluxStatistic style="max-width: 350px"
        color="info"
        icon="circle"
        label="Label"
        value="Value"/>
</template>

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

Vertical

A vertical statistic.

LabelValue

<template>
    <FluxStatistic style="max-width: 350px"
        direction="vertical"
        color="info"
        icon="circle"
        label="Label"
        value="Value"/>
</template>

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

Change

A statistic with change details.

New users this month20
5%

<template>
    <FluxStatistic style="max-width: 350px"
        icon="user-plus"
        color="success"
        label="New users this month"
        value="20"
        change-color="success"
        change-value="5%"
        change-icon="arrow-trend-up"/>
</template>

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

Image

A statistic with an image.

LabelValue

<template>
    <FluxStatistic style="max-width: 350px"
        label="Label"
        value="Value"
        image-src="https://avatars.githubusercontent.com/u/978257?v=4"/>
</template>

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

Used components ​