Flux

Tracker step ​

The work inside an Entry. Steps are wrapped in a FluxStatisticsTrackerSteps group; the tracker branches its rail into the group and rejoins it below the last step.

Fulfillment
In Progress
Items picked
Packing in progress
Handed to carrier

TIP

Steps are the detail level of a tracker. Keep the milestone itself in the Entry and put everything that happens within it here.

INFO

The group exposes the ARIA list role and its steps are listitems.

Required icons

circle-check

Props

state?: done | active | pending
The state of the step. `done` strikes the label through, `active` highlights it in the color of the entry.
Default: pending

label?: string
The label of the step. Ignored when the default slot is used.

Slots

default
The label of the step, for when plain text is not enough.

end
Shown after the label, for example the moment the step completed.

Snippet ​

vue
<template>
    <Preview>
        <FluxStatisticsTracker style="width: 100%; max-width: 450px">
            <FluxStatisticsTrackerEntry
                color="primary"
                icon="box"
                title="Fulfillment">
                <template #end>
                    <FluxBadge
                        colored
                        color="primary"
                        label="In Progress"/>
                </template>

                <FluxStatisticsTrackerSteps>
                    <FluxStatisticsTrackerStep
                        state="done"
                        label="Items picked"/>

                    <FluxStatisticsTrackerStep
                        state="active"
                        label="Packing in progress"/>

                    <FluxStatisticsTrackerStep label="Handed to carrier"/>
                </FluxStatisticsTrackerSteps>
            </FluxStatisticsTrackerEntry>
        </FluxStatisticsTracker>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxBadge } from '@flux-ui/components';
    import { FluxStatisticsTracker, FluxStatisticsTrackerEntry, FluxStatisticsTrackerStep, FluxStatisticsTrackerSteps } from '@flux-ui/statistics';
</script>

Used components ​