Flux

Terminal ​

FluxFlowTerminal is the start and the end of a flow: the capsule a classic flowchart opens and closes with. Place it in its own Node and connect it like any other node.

Where a Pill names a step on a raised surface, a terminal is one solid tinted capsule, so an endpoint never reads as another step in the chain.

Start

TIP

An endpoint has nothing before or after it, so drop the marker on that side of its connector: marker-start="none" on the line leaving a start, marker-end="none" on the line reaching an end.

Props

label: string
The text of the terminal.

icon?: FluxIconName
An icon shown before the label.

color?: FluxColor
The tint of the capsule.

Examples ​

In a flow

A start terminal heads the flow and an end terminal closes it, with the steps in between.

Start
Collect the readings
Mail the report
Done

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="start" :x="105" :y="0">
            <FluxFlowTerminal icon="play" label="Start" color="success"/>
        </FluxFlowNode>

        <FluxFlowNode id="collect" :x="0" :y="120">
            <FluxFlowActionCard title="Collect the readings" icon="database"/>
        </FluxFlowNode>

        <FluxFlowNode id="report" :x="0" :y="300">
            <FluxFlowActionCard title="Mail the report" icon="envelope"/>
        </FluxFlowNode>

        <FluxFlowNode id="end" :x="104" :y="480">
            <FluxFlowTerminal icon="circle-check" label="Done"/>
        </FluxFlowNode>

        <FluxFlowConnection from="start" to="collect" marker-start="none"/>
        <FluxFlowConnection from="collect" to="report"/>
        <FluxFlowConnection from="report" to="end" marker-end="none"/>
    </FluxFlow>
</template>

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

Colors

A terminal accepts any FluxColor, which is enough to tell a clean finish from a failed one.

Start
Start
Done
Failed
Waiting
Cancelled

<template>
    <div style="display: flex; padding: 12px 0; flex-wrap: wrap; justify-content: center; gap: 12px">
        <FluxFlowTerminal icon="play" label="Start"/>
        <FluxFlowTerminal icon="play" label="Start" color="success"/>
        <FluxFlowTerminal icon="circle-check" label="Done" color="primary"/>
        <FluxFlowTerminal icon="circle-xmark" label="Failed" color="danger"/>
        <FluxFlowTerminal icon="bell" label="Waiting" color="warning"/>
        <FluxFlowTerminal label="Cancelled" color="info"/>
    </div>
</template>

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

Used components ​