Flux

Lane ​

FluxFlowLane is the swimlane of a flow: a band with a titled gutter that says who owns the part of the canvas standing on it. Client and server, the two teams a handover runs between, the machine a stage runs on.

A lane is a backdrop and nothing more. It never positions its content: the nodes keep their own absolute x and y, and the lane is the strip they happen to stand on.

Submit the form
Validate the payload
Write to the database

TIP

The pair of props you give picks the axis: y and height make a row, x and width make a column. The other axis is not yours to set, since a lane always spans the whole flow.

Props

y?: number
The top of the lane, in flow coordinates. Pair it with `height` for a lane that runs across the flow.

height?: number
The height of the lane. Giving it makes the lane a row.

x?: number
The left edge of the lane, in flow coordinates. Pair it with `width` for a lane that runs down the flow.

width?: number
The width of the lane. Giving it makes the lane a column.

title?: string
The label shown in the gutter at the head of the lane.

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

padding?: number
The space, in pixels, the lane reaches past the nodes on the axis it spans.
Default: 21

Examples ​

Columns

x and width turn the band on its side, so a handover between two teams reads left to right with the title above each column. The steps inside a column are placed by a Chain, which lines up pills of different widths that a lane would not.

Ticket raised
Triaged
Fix shipped

<template>
    <FluxFlow :padding="21">
        <FluxFlowLane title="Support" :x="-21" :width="210"/>
        <FluxFlowLane title="Engineering" color="primary" :x="231" :width="210"/>

        <FluxFlowNode id="ticket" :x="0" :y="0">
            <FluxFlowPill icon="bell" label="Ticket raised" color="warning"/>
        </FluxFlowNode>

        <FluxFlowChain :x="252" :y="0" :gap="45">
            <FluxFlowNode id="triage">
                <FluxFlowPill icon="user-check" label="Triaged" color="info"/>
            </FluxFlowNode>

            <FluxFlowNode id="fix">
                <FluxFlowPill icon="rocket" label="Fix shipped" color="success"/>
            </FluxFlowNode>
        </FluxFlowChain>

        <FluxFlowConnection from="ticket" to="triage" from-side="right" to-side="left"/>
    </FluxFlow>
</template>

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

Used components ​