Flux

Port ​

FluxFlowPort marks a named point inside a Node. Put one next to the row it belongs to and reference it from a connector with from-port or to-port: the connector lands on the node's edge at the height of that row, instead of on the node's icon.

That turns a condition card into a real branching point. Every outcome gets its own row and its own port, so the two branches leave the card where their outcome is written rather than both leaving from the same corner.

A port renders nothing and takes no space of its own: it is a zero sized marker riding the middle of the row it sits in, so adding one never moves the content around it. Only the connector shows where it is.

Review order
Approved
Rejected
Ship order
Refund

TIP

The port fixes where along the side the connector lands, side fixes which edge. A connector that names a port therefore ignores from-align / to-align, and a from-port that no port answers to falls back to the node's own anchor.

Props

id: string
The name of the port. A connector points at it with from-port or to-port.

side?: 'top' | 'right' | 'bottom' | 'left'
The edge of the node a connector using this port lands on. Without one the port takes the edge it sits closest to.

Examples ​

Named branches

Every outcome of a condition gets a row and a port, so each branch leaves the card at its own answer.

Route ticketBy queue
Billing
Technical
Anything else
Notify finance
Page on-call
Park in the inbox

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="route" :x="0" :y="60">
            <FluxFlowConditionCard title="Route ticket" subtitle="By queue">
                <div style="display: flex; align-items: center; justify-content: space-between">
                    Billing
                    <FluxFlowPort id="billing" side="right"/>
                </div>

                <div style="display: flex; align-items: center; justify-content: space-between">
                    Technical
                    <FluxFlowPort id="technical" side="right"/>
                </div>

                <div style="display: flex; align-items: center; justify-content: space-between">
                    Anything else
                    <FluxFlowPort id="other" side="right"/>
                </div>
            </FluxFlowConditionCard>
        </FluxFlowNode>

        <FluxFlowNode id="finance" :x="390" :y="0">
            <FluxFlowActionCard title="Notify finance" icon="envelope"/>
        </FluxFlowNode>

        <FluxFlowNode id="oncall" :x="390" :y="153">
            <FluxFlowActionCard title="Page on-call" icon="bell" color="warning"/>
        </FluxFlowNode>

        <FluxFlowNode id="inbox" :x="390" :y="300">
            <FluxFlowActionCard title="Park in the inbox" icon="box" color="gray"/>
        </FluxFlowNode>

        <FluxFlowConnection from="route" from-port="billing" to="finance"/>
        <FluxFlowConnection from="route" from-port="technical" to="oncall" color="warning"/>
        <FluxFlowConnection from="route" from-port="other" to="inbox" color="gray" dashed/>
    </FluxFlow>
</template>

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

Sides

Leave side out and the port takes the edge it sits closest to, which is the right one for a port at the end of a row. Name a side for the rest, for example a port in a footer that should leave through the bottom of the card.

Build image
Artifact ready
Cached
Publish to registry
Report the build

<template>
    <FluxFlow :padding="21">
        <FluxFlowNode id="build" :x="0" :y="0">
            <FluxFlowActionCard title="Build image" icon="box">
                <div style="display: flex; align-items: center; justify-content: space-between">
                    Artifact ready
                    <FluxFlowPort id="artifact"/>
                </div>

                <template #footer>
                    <FluxTag icon="circle-check" label="Cached"/>
                    <FluxFlowPort id="done" side="bottom" style="margin-left: auto"/>
                </template>
            </FluxFlowActionCard>
        </FluxFlowNode>

        <FluxFlowNode id="publish" :x="390" :y="42">
            <FluxFlowActionCard title="Publish to registry" icon="rocket"/>
        </FluxFlowNode>

        <FluxFlowNode id="report" :x="360" :y="240">
            <FluxFlowActionCard title="Report the build" icon="envelope" color="info"/>
        </FluxFlowNode>

        <FluxFlowConnection from="build" from-port="artifact" to="publish" label="Nearest edge"/>
        <FluxFlowConnection from="build" from-port="done" to="report" to-side="left" label="Bottom"/>
    </FluxFlow>
</template>

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

Used components ​