Flux

Note ​

FluxFlowNote is an annotation on the canvas: the remark that explains why a step is there, or what the person reading the flow has to know about it.

A note is a full node rather than a decoration, so it gets an id through its Node like everything else and you hang it off the step it belongs to with a connector. A dashed line without markers reads as a remark rather than as a step in the flow.

Heads up The nightly window closes at 04:00, so a retry never runs twice.

Props

title?: string
A heading shown above the body of the note.

color?: FluxColor
The tint of the note.

Slots

default
The body of the note. Plain text, or any Flux component.

Examples ​

Annotating a flow

Two notes hang off the steps they explain. Dashed connectors without markers keep them out of the flow itself.

Nightly syncEvery day at 03:00
Import the orders
Heads up The window closes at 04:00, so a retry never runs twice.
Legacy SKUs are mapped in the importer, not here. 

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="sync" :x="0" :y="15">
            <FluxFlowTriggerCard title="Nightly sync" subtitle="Every day at 03:00"/>
        </FluxFlowNode>

        <FluxFlowNode id="import" :x="0" :y="195">
            <FluxFlowActionCard title="Import the orders" icon="database"/>
        </FluxFlowNode>

        <FluxFlowNode id="window" :x="390" :y="0">
            <FluxFlowNote title="Heads up" color="warning">
                The window closes at 04:00, so a retry never runs twice.
            </FluxFlowNote>
        </FluxFlowNode>

        <FluxFlowNode id="mapping" :x="390" :y="193">
            <FluxFlowNote>
                Legacy SKUs are mapped in the importer, not here.
            </FluxFlowNote>
        </FluxFlowNode>

        <FluxFlowConnection from="sync" to="import"/>
        <FluxFlowConnection from="window" to="sync" to-side="right" marker-start="none" marker-end="none" color="warning" dashed/>
        <FluxFlowConnection from="mapping" to="import" to-side="right" marker-start="none" marker-end="none" dashed/>
    </FluxFlow>
</template>

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

Used components ​