Overlay

Read as Markdown

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

Overlay uses OverlayProps and OverlayStyle to allocate recursive direct children against one declared box. Source order remains paint order, so later children appear over earlier children. It performs no drawing-command retention or implicit intrinsic measurement.

<Overlay style={{ width: 180, height: 100 }}>
  <Rectangle style={{ width: 180, height: 100, fill: "#1d4ed8" }} />
  <Text style={{ left: 18, top: 58, fill: "white", font: "20px sans-serif" }}>
    Overlay
  </Text>
</Overlay>

See the Absolute and Overlay live example.

API details from source

Describes overlay layout for JSX or createElement authoring.

Overlay: PibblPrimitiveComponent<OverlayProps, PrimitiveInput<OverlayProps, OverlayStyle>>

Related API: Overlay, PibblPrimitiveComponent, OverlayProps, PrimitiveInput, OverlayStyle.

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

OverlayProps

OverlayStyle

View source — packages/core/src/lib/layout/overlay.ts:110

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

• Absolute and overlay layout: Position a block absolutely and center content within an overlay. Plain source

Documentation version

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