Flux

Group ​

FluxFlowGroup draws a labelled frame behind a set of nodes: a retry block, a stage of a pipeline, the part of a flow that runs on one machine. It names the nodes it encloses by id and measures the frame from them, so it follows along when they move.

A group is a backdrop, not a node. It renders behind every card on the canvas, never takes a pointer, and nothing anchors a connector to it.

Fetch the invoice
Verify the totals

TIP

An id that matches no node is skipped without a word, so a group survives a card that is only rendered under a condition.

Props

nodes: string[]
The ids of the nodes the frame encloses. An unknown id is ignored.

title?: string
The label shown inside the frame, at its top-left. The frame reaches further up to make room for it, so it never covers a node.

color?: FluxColor
The tint of the frame. Without one it is drawn in gray.

padding?: number
The space, in pixels, kept between the nodes and the frame.
Default: 21

Examples ​

Two stages

A frame per stage, each in its own tint. The frames grow with the cards inside them, so a chain that gains a step keeps its group.

Collect the readings
Drop the outliers
Render the report
Mail the subscribers

<template>
    <FluxFlow :padding="30">
        <FluxFlowChain :x="0" :y="0">
            <FluxFlowNode id="collect">
                <FluxFlowActionCard title="Collect the readings" icon="database"/>
            </FluxFlowNode>

            <FluxFlowNode id="clean">
                <FluxFlowActionCard title="Drop the outliers" icon="wand-magic-sparkles"/>
            </FluxFlowNode>
        </FluxFlowChain>

        <FluxFlowChain :x="411" :y="122">
            <FluxFlowNode id="report">
                <FluxFlowActionCard title="Render the report" icon="gauge"/>
            </FluxFlowNode>

            <FluxFlowNode id="mail">
                <FluxFlowActionCard title="Mail the subscribers" icon="paper-plane"/>
            </FluxFlowNode>
        </FluxFlowChain>

        <FluxFlowGroup
            title="Ingest"
            color="info"
            :nodes="['collect', 'clean']"/>

        <FluxFlowGroup
            title="Deliver"
            color="success"
            :nodes="['report', 'mail']"/>

        <FluxFlowConnection from="clean" to="report" from-side="right"/>
    </FluxFlow>
</template>

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

Used components ​