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
30
 
# File 'app/components/bulmacomp/card_component.rb', line 24

def initialize(title: nil, image: nil, footer: nil, **opts)
  super
  @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



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

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>


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

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>


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

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>


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

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



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

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