Class: Bulmacomp::CardComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/bulmacomp/card_component.rb

Overview

Make an html structure for a bulma card

Examples:

empty card

render Bulmacomp::BreadcrumbComponent.new()

<div class="card"></div>

cart with title and yeld content

render Bulmacomp::BreadcrumbComponent.new(title: 'test') do
  <p>test content</p>
end

<div class="card">
  <div class="card-header">
    <div class="cart-header-title">test</div>
  </div>
  <div class="card-content">
    <div class="content"><p>test content</p>
  </div>
</div>

Instance Method Summary collapse

Constructor Details

#initialize(title: nil, image: nil, footer: nil, **opts) ⇒ CardComponent

Returns a new instance of CardComponent.



24
25
26
27
28
29
 
# File 'app/components/bulmacomp/card_component.rb', line 24

def initialize(title: nil, image: nil, footer: nil, **opts)
  @title = title
  @image = image
  @footer = footer
  @opts = { class: "card" }.merge(opts)
end

Instance Method Details

#call ⇒ String

Returns html_safe card.

Returns:

  • (String) —

    html_safe card



32
33
34
 
# File 'app/components/bulmacomp/card_component.rb', line 32

def call
  tag.div safe_join([ card_title, card_image, card_content, card_footer ]), **@opts
end

#card_content ⇒ Object

return [String] content section if yield is present

Examples:

Bulmacomp::BreadcrumbComponent.new().title do
  test content
end

<div class="card-content"><div class="content"><p>test content</p></div>


61
62
63
 
# File 'app/components/bulmacomp/card_component.rb', line 61

def card_content
  tag.div(tag.div(content, class: "content"), class: "card-content") if content
end

#card_footer ⇒ Object

return [String] footer section if a footer is present

Examples:

Bulmacomp::BreadcrumbComponent.new(footer: 'test').footer

<div class='card-footer'>test</div>


70
71
72
 
# File 'app/components/bulmacomp/card_component.rb', line 70

def card_footer
  tag.div @footer, class: "card-footer" if @footer
end

#card_image ⇒ Object

return [String] image section if :image is set

Examples:

Bulmacomp::BreadcrumbComponent.new(title: 'test', image: 'test.jpg').image

<div class='card-image'><img src='test.jpg' alt='test'></div>


50
51
52
 
# File 'app/components/bulmacomp/card_component.rb', line 50

def card_image
  tag.div(tag.figure(image_tag(@image, alt: @title), class: "image"), class: "card-image") if @image
end

#card_title ⇒ String

Returns title section if :title is set.

Examples:

Bulmacomp::BreadcrumbComponent.new(title: 'test').title

<div class='card-header'><div class='card-header-title'>test</div></div>

Returns:

  • (String) —

    title section if :title is set



41
42
43
 
# File 'app/components/bulmacomp/card_component.rb', line 41

def card_title
  tag.div(tag.div(@title, class: "card-header-title"), class: "card-header") if @title
end