Skip to main content

Clipped

Clips this component to its bounding frame.

modifier Clipped

Example​

import { Clipped, Image, Frame } from ui

// load an image larger than 50x50
export var main = Image("my_image.png") with {
    Frame(width: 50, height: 50)
    Clipped() // the image is clipped to the frame size
}

Anything that extends beyond the component's frame is cut off. The dashed outline marks the image's full size; only the region inside the frame (solid) remains visible:

Content clipped to its frame, with the overflow cut off

Constructor​

constructor(_ clip: Bool = true)
_ clip: Bool = true

Whether or not the component should clip.

Layout Behavior​

None.