Struct RhythmFrame 

pub struct RhythmFrame { /* private fields */ }

Available on crate feature gpui only.

A container that fits fluid-width media — images, video, embeds, any content whose height follows its width instead of the rhythm — into a whole number of rhythm rows, so everything after it stays on the grid at any width.

The frame fills the parent’s width; its height is the content’s natural height (width / ratio) snapped to whole rhythm rows, recomputed in the layout pass whenever the width changes. ratio is width over height, matching gpui img’s aspect-ratio convention. Content lives in a box at its natural height: pinned to the frame’s top edge when padding, and centered behind the frame’s clipping mask when cropping. Style the child to fill it (.size_full(), plus .object_fit(ObjectFit::Cover) when the image itself has a different ratio). The box reserves its height even before an image loads — no layout shift.

By default the height rounds up and the leftover space — always under one rhythm unit — is left below the content (pad). Choose the mode with RhythmFrame::fit, or RhythmFrame::crop for the shorthand. With a known width the frame is unnecessary — size the block directly with RhythmGrid::snap_up.

The frame needs a parent that offers a definite width: a height that follows the width is unknowable under an intrinsic (min-/max-content) measurement, so the frame reports no size in that pass and contributes nothing to a shrink-to-fit parent. Give the frame’s container a resolved width — a full-width column or a sized panel — rather than asking a shrink-to-fit wrapper to derive its width from the frame.

Examples

use std::path::PathBuf;

use gpui::{img, prelude::*, px, ObjectFit};
use rhythm_gpui::{rhythm_frame, RhythmFit, RhythmGrid};

fn figure(grid: RhythmGrid, crop: bool) -> impl IntoElement {
    // Pad (default) keeps the whole image and leaves the sub-unit
    // remainder below it; crop splits the clipped remainder between the
    // top and bottom edges.
    rhythm_frame(grid, 16. / 9.)
        .fit(if crop { RhythmFit::Crop } else { RhythmFit::Pad })
        .child(
            img(PathBuf::from("photo.jpg"))
                .size_full()
                .object_fit(ObjectFit::Cover),
        )
}

Implementations

impl RhythmFrame

pub fn fit(self, fit: RhythmFit) -> Self

Choose how the height snaps to whole rhythm rows. Takes the mode as a value, so a runtime choice needs no rebinding: .fit(if crop { RhythmFit::Crop } else { RhythmFit::Pad }).

pub fn crop(self) -> Self

Shorthand for fit(RhythmFit::Crop): round the height down instead of up, so the natural-height content overfills the frame by less than one rhythm unit and is clipped evenly between the top and bottom edges instead of padded.

Trait Implementations

impl IntoElement for RhythmFrame

type Element = Component<RhythmFrame>

The specific type of element into which the implementing type is converted. Useful for converting other types into elements automatically, like Strings

fn into_element(self) -> Self::Element

Convert self into a type that implements Element.

fn into_any_element(self) -> AnyElement

Convert self into a dynamically-typed AnyElement.

impl ParentElement for RhythmFrame

fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>)

Extend this element’s children with the given child elements.

fn child(self, child: impl IntoElement) -> Self

where Self: Sized,

Add a single child element to this element.

fn children(self, children: impl IntoIterator<Item = impl IntoElement>) -> Self

where Self: Sized,

Add multiple child elements to this element.

impl RenderOnce for RhythmFrame

fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement

Render this component into an element tree. Note that this method takes ownership of self, as compared to Render::render() method which takes a mutable reference.