Flux

Tracker card segment ​

A single step in the bar of a Tracker card. Every segment takes an equal share of the width, so the bar reads as a step count rather than as a percentage.

FulfillmentPacked 3 of 8 items
Picked
Packing
Shipped

TIP

min, max and value only apply to an active segment; the other states are either full or empty. Leave them out and a running step is drawn halfway.

INFO

The segment exposes the ARIA listitem role. An active segment is marked with aria-current="step", and its label is used as the accessible name.

Props

state?: done | active | todo
The state of the step this segment represents. `active` fills the segment up to its own progress.
Default: todo

value?: number
The progress within an `active` segment.
Default: 50

min?: number
The value at which an `active` segment is empty.

max?: number
The value at which an `active` segment is full.
Default: 100

label?: string
A label shown above or below the segment, depending on the `labels` prop of the card.

color?: FluxColor | `#${string}`
The color of the filled segment. Accepts a FluxColor or a custom hex color.

Snippet ​

vue
<template>
    <Preview>
        <FluxStatisticsTrackerCard
            style="width: 100%; max-width: 450px"
            title="Fulfillment"
            subtitle="Packed 3 of 8 items"
            icon="box">
            <FluxStatisticsTrackerCardSegment
                label="Picked"
                state="done"/>

            <FluxStatisticsTrackerCardSegment
                label="Packing"
                state="active"
                :min="0"
                :max="8"
                :value="3"/>

            <FluxStatisticsTrackerCardSegment label="Shipped"/>
        </FluxStatisticsTrackerCard>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsTrackerCard, FluxStatisticsTrackerCardSegment } from '@flux-ui/statistics';
</script>