Flux

Step ​

FluxFlowStep is a small marker that names a step. Place it in its own Node and wire it up like any other node, so the trunk of a flow runs straight through it while each step branches off to the side.

A single character keeps the marker square. Give it a word and it widens to fit, which suits a flow whose steps are named rather than numbered.

1

Props

value: number | string
What the marker shows. A digit or letter keeps it square; a word widens it to fit.

Examples ​

Numbered steps

The trunk runs from marker to marker; every marker points at the step it numbers.

1
Pull new orders
2
Ships from the EU
3
Notify the warehouse

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="step-1" :x="0" :y="13">
            <FluxFlowStep :value="1"/>
        </FluxFlowNode>

        <FluxFlowNode id="pull" :x="90" :y="0">
            <FluxFlowActionCard title="Pull new orders"/>
        </FluxFlowNode>

        <FluxFlowNode id="step-2" :x="0" :y="163">
            <FluxFlowStep :value="2"/>
        </FluxFlowNode>

        <FluxFlowNode id="route" :x="90" :y="150">
            <FluxFlowConditionCard title="Ships from the EU"/>
        </FluxFlowNode>

        <FluxFlowNode id="step-3" :x="0" :y="313">
            <FluxFlowStep :value="3"/>
        </FluxFlowNode>

        <FluxFlowNode id="notify" :x="90" :y="300">
            <FluxFlowActionCard title="Notify the warehouse"/>
        </FluxFlowNode>

        <FluxFlowConnection marker-start="none" from="step-1" to="pull"/>
        <FluxFlowConnection marker-start="none" from="step-1" to="step-2"/>
        <FluxFlowConnection marker-start="none" from="step-2" to="route"/>
        <FluxFlowConnection marker-start="none" from="step-2" to="step-3"/>
        <FluxFlowConnection marker-start="none" from="step-3" to="notify"/>
    </FluxFlow>
</template>

<script
    setup
    lang="ts">
    import { FluxFlow, FluxFlowActionCard, FluxFlowConditionCard, FluxFlowConnection, FluxFlowNode, FluxFlowStep } from '@flux-ui/flow';
</script>

Values

Digits, letters and words all sit in the same marker.

1
A
Start
Review

<template>
    <FluxFlex :gap="15">
        <FluxFlowStep :value="1"/>
        <FluxFlowStep value="A"/>
        <FluxFlowStep value="Start"/>
        <FluxFlowStep value="Review"/>
    </FluxFlex>
</template>

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

Used components ​