Skip to main content

Clip

Clip wraps one child and clips painting to that child's layout region.

This solves a practical problem: sometimes a child should keep rendering normally, but any overflow should be hidden. Common cases include scroll-like reveal effects, animated translations, image masks, or custom surfaces that should stay inside a card.

Use Clip when overflow is the problem. Do not use it as a substitute for sizing. If the real issue is padding, width, height, or aspect ratio, solve that first with layout widgets.

Example​

use fission::core::ui::{Clip, Container, Text};

let node = Clip::new(
    Container::new(Text::new("Sliding content").into_node())
        .width(200.0)
        .height(48.0)
        .into_node(),
)
.into_node();

This keeps the child inside its visible bounds even if another wrapper later translates or animates it.

Field table​

FieldTypeMeaningNotes / default behavior
idOption<NodeId>Stable node identity.Defaults to None.
pathOption<String>Optional clip path payload.Defaults to None. The current checked-in shell pipeline clips to rectangular bounds, so custom path behavior is not the portable default today.
childBox<Node>The node whose painting should be clipped.Required. Clip::default() uses an empty spacer child.

Layout and rendering behavior​

Clip does not change the child's layout size. It forwards the same constraints to the child and then applies clipping at the rendering layer. That makes it a good partner for Transform and Composite, where a child might visually move or fade without wanting to escape its frame.

The path field exists in the public type, but the current shell path is rectangular clipping by default. If you need guaranteed cross-platform clipping behavior today, design around rectangular bounds rather than assuming arbitrary path clipping.

Specific advice​

Clip as late as practical. If you clip too early, later wrappers may become harder to reason about. A common pattern is Container for size and styling, then Clip, then a moving or custom-painted child.

Container, Transform, Composite, and Scroll.