Class: BulmaPhlex::Hero

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

Overview

Renders a [Bulma Hero](bulma.io/documentation/layout/hero/) component.

Supports color and size options. There are three ways to provide content:

  1. **Title/subtitle params** — pass ‘title:` and/or `subtitle:` to the constructor; no block needed.

  2. **Direct body block** — pass a block to ‘render`; call Phlex HTML methods on the yielded component and they are rendered inside the `hero-body` div.

  3. **Building blocks** — call ‘head`, `body`, and `foot` on the yielded component to populate each of Bulma’s three hero regions independently:

    • ‘hero-head` — typically a navbar or branding bar

    • ‘hero-body` — main content area

    • ‘hero-foot` — bottom tabs or action bar

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(title: nil, subtitle: nil, color: nil, size: nil, **html_attributes) ⇒ Hero

Returns a new instance of Hero.



28
29
30
31
32
33
34
 
# File 'lib/bulma_phlex/hero.rb', line 28

def initialize(title: nil, subtitle: nil, color: nil, size: nil, **html_attributes)
  @title = title
  @subtitle = subtitle
  @color = color
  @size = size
  @html_attributes = html_attributes
end

Class Method Details

.new(title: nil, subtitle: nil, color: nil, size: nil, **html_attributes) ⇒ Object

Parameters

  • ‘title` — Main title text for the hero body

  • ‘subtitle` — Subtitle text displayed below the title

  • ‘color` — Hero color (e.g. `“primary”`, `“info”`, `“success”`, `“warning”`, `“danger”`)

  • ‘size` — Hero size: `“small”`, `“medium”`, `“large”`, `“halfheight”`, `“fullheight”`

  • ‘**html_attributes` — Additional HTML attributes for the hero `<section>` element



24
25
26
 
# File 'lib/bulma_phlex/hero.rb', line 24

def self.new(title: nil, subtitle: nil, color: nil, size: nil, **html_attributes)
  super
end

Instance Method Details

#body(&block) ⇒ Object 



40
41
42
 
# File 'lib/bulma_phlex/hero.rb', line 40

def body(&block)
  @body = block
end

#foot(&block) ⇒ Object 



44
45
46
 
# File 'lib/bulma_phlex/hero.rb', line 44

def foot(&block)
  @foot = block
end

#head(&block) ⇒ Object 



36
37
38
 
# File 'lib/bulma_phlex/hero.rb', line 36

def head(&block)
  @head = block
end

#view_template ⇒ Object 



48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
# File 'lib/bulma_phlex/hero.rb', line 48

def view_template(&)
  output = capture(&)

  section(**mix({ class: hero_classes }, @html_attributes)) do
    if @body.nil?
      div(class: "hero-body") do
        if output.empty?
          title_and_subtitle
        else
          raw safe(output)
        end
      end
    else
      building_blocks(&)
    end
  end
end