Class: Shadcn::AspectRatio::Component

Inherits:
Shadcn::ApplicationViewComponent show all
Defined in:
app/components/shadcn/aspect_ratio/component.rb

Overview

Port of registry/new-york-v4/ui/aspect-ratio.tsx

Radix wraps the content in a relatively positioned box whose bottom padding encodes the ratio, then absolutely positions the slot inside it.

Constant Summary

Constants inherited from Shadcn::ApplicationViewComponent

Shadcn::ApplicationViewComponent::CONTENTS_STYLE, Shadcn::ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from Shadcn::ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from Shadcn::ApplicationViewComponent

#css_classes, default_tag, #element_attributes, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(ratio: 1, **attributes) ⇒ Component

Returns a new instance of Component.



14
15
16
17
 
# File 'app/components/shadcn/aspect_ratio/component.rb', line 14

def initialize(ratio: 1, **attributes)
  @ratio = ratio
  super(**attributes)
end

Instance Attribute Details

#ratio ⇒ Object (readonly)

Returns the value of attribute ratio.



12
13
14
 
# File 'app/components/shadcn/aspect_ratio/component.rb', line 12

def ratio
  @ratio
end

Instance Method Details

#call ⇒ Object 



19
20
21
22
23
24
25
 
# File 'app/components/shadcn/aspect_ratio/component.rb', line 19

def call
  wrapper_style = "position:relative;width:100%;padding-bottom:#{100.0 / ratio}%"

  content_tag(:div, style: wrapper_style) do
    render_element(body: content, style: inner_style)
  end
end