Class: BulmaPhlex::MediaObject

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/media_object.rb

Overview

Renders a Bulma media object component.

Optional HTML attributes can be passed to the constructor as well as any of the three block methods, left, content, and right, to customize the rendered HTML elements.

Example

render BulmaPhlex::MediaObject.new do |media|
  media.left do
    p(class: "image is-64x64") do
      img(src: "/assets/images/placeholders/128x128.png")
    end
  end

  media.content do
    p { "This is the main content of the media object." }
  end

  media.right do
    button(class: "delete")
  end
end

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(**html_attributes) ⇒ MediaObject

Returns a new instance of MediaObject.



34
35
36
 
# File 'lib/bulma_phlex/media_object.rb', line 34

def initialize(**html_attributes)
  @html_attributes = html_attributes
end

Class Method Details

.new(**html_attributes) ⇒ Object

Parameters

  • **html_attributes — Additional HTML attributes for the wrapping article element


30
31
32
 
# File 'lib/bulma_phlex/media_object.rb', line 30

def self.new(**html_attributes)
  super
end

Instance Method Details

#content(**html_attributes, &block) ⇒ Object

Use a block to provide the main content, which will be wrapped in a div element. Additional HTML attributes can be passed to customize the element.



76
77
78
79
 
# File 'lib/bulma_phlex/media_object.rb', line 76

def content(**html_attributes, &block)
  @content_attributes = html_attributes
  @media_content = block
end

#image(src:, alt: nil, size: nil, rounded: false, **html_attributes) ⇒ Object

If the left content is an image, you can use this method to provide the image source, alt text, size, and whether it should be rounded. Additional HTML attributes can be passed to customize the figure element.



62
63
64
65
66
67
68
 
# File 'lib/bulma_phlex/media_object.rb', line 62

def image(src:, alt: nil, size: nil, rounded: false, **html_attributes)
  left(**html_attributes) do
    p(class: image_classes(size:)) do
      img(src:, alt:, class: ("is-rounded" if rounded))
    end
  end
end

#left(**html_attributes, &block) ⇒ Object

Use a block to provide the left content, which will be wrapped in a figure element. Additional HTML attributes can be passed to customize the element.



54
55
56
57
 
# File 'lib/bulma_phlex/media_object.rb', line 54

def left(**html_attributes, &block)
  @left_attributes = html_attributes
  @media_left = block
end

#right(**html_attributes, &block) ⇒ Object

Use a block to provide the right content, which will be wrapped in a div element. Additional HTML attributes can be passed to customize the element.



87
88
89
90
 
# File 'lib/bulma_phlex/media_object.rb', line 87

def right(**html_attributes, &block)
  @right_attributes = html_attributes
  @media_right = block
end

#view_template ⇒ Object 



38
39
40
41
42
43
44
45
46
 
# File 'lib/bulma_phlex/media_object.rb', line 38

def view_template(&)
  vanish(&)

  article(**mix({ class: "media" }, @html_attributes)) do
    render_media_left if @media_left
    render_media_content if @media_content
    render_media_right if @media_right
  end
end