Flow

Read as Markdown

import { Flow, Text } from "@pibbl/core";

Flow uses FlowProps and FlowStyle to place recursive direct children in source order. Children retain their own local drawing geometry; the parent resolves only placement. Declare finite boxes when a child needs allocated space.

<Flow style={{ width: 220, height: 180, direction: "vertical", gap: 8 }}>
  <Text style={{ fill: "#0f172a", font: "16px sans-serif" }}>First</Text>
  <Text style={{ fill: "#0f172a", font: "16px sans-serif" }}>Second</Text>
</Flow>

See the Flow live example.

API details from source

Describes sequential flow layout for JSX or createElement authoring.

Flow: PibblPrimitiveComponent<FlowProps, PrimitiveInput<FlowProps, FlowStyle>>

Related API: Flow, PibblPrimitiveComponent, FlowProps, PrimitiveInput, FlowStyle.

Parameters

• props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

See also

FlowProps

FlowStyle

View source — packages/core/src/lib/layout/flow.ts:165

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Flow and flex layout: Stack a banner with a flexible row of marks. Plain source

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.