Class: UI::AspectRatio

Inherits:
Phlex::HTML
  • Object
show all
Includes:
AspectRatioBehavior
Defined in:
app/components/ui/aspect_ratio.rb

Overview

AspectRatio - Phlex implementation

Displays content within a desired aspect ratio. Uses AspectRatioBehavior module for shared styling logic.

Examples:

Basic usage with 16:9 ratio

render UI::AspectRatio.new(ratio: 16.0/9.0) do
  img src: "image.jpg", class: "h-full w-full object-cover"
end

Constant Summary

Constants included from AspectRatioBehavior

UI::AspectRatioBehavior::DEFAULT_RATIO

Instance Method Summary collapse

Methods included from AspectRatioBehavior

#aspect_ratio_classes, #aspect_ratio_content_attributes, #aspect_ratio_html_attributes, #aspect_ratio_padding, #aspect_ratio_padding_attributes

Constructor Details

#initialize(ratio: 1.0, classes: "", **attributes) ⇒ AspectRatio

Returns a new instance of AspectRatio.

Parameters:

  • ratio (Float) (defaults to: 1.0) —

    The desired aspect ratio (width/height, e.g., 16/9)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



18
19
20
21
22
 
# File 'app/components/ui/aspect_ratio.rb', line 18

def initialize(ratio: 1.0, classes: "", **attributes)
  @ratio = ratio
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



24
25
26
27
28
29
30
31
 
# File 'app/components/ui/aspect_ratio.rb', line 24

def view_template(&block)
  div(**aspect_ratio_html_attributes) do
    div(**aspect_ratio_padding_attributes)
    div(**aspect_ratio_content_attributes) do
      yield if block_given?
    end
  end
end