EssenceUI.Components.AspectRatio (Essence UI v0.2.0)

Copy Markdown View Source

Themed aspect ratio wrapper that preserves layout proportions. Wraps EssenceUI.Primitives.AspectRatio.

Examples

<.aspect_ratio ratio={16/9}>
  <img src="..." />
</.aspect_ratio>

Props

  • ratio - The aspect ratio (float or string, e.g. 16/9 or "16:9"). Required.
  • class - Additional CSS classes.
  • style - Additional inline styles.
  • rest - Additional HTML attributes.
  • inner_block - Slot for children.

Summary

Functions

aspect_ratio(assigns)

Functions

aspect_ratio(assigns)

Attributes

  • ratio (:any) (required) - Aspect ratio as float (e.g. 16/9) or string (e.g. "16:9").
  • class (:string) - Additional CSS classes. Defaults to nil.
  • style (:string) - Additional inline styles. Defaults to nil.
  • Global attributes are accepted. Additional attributes for the root element.

Slots

  • inner_block (required)