Class: BulmaPhlex::Level

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

Overview

Renders the [Bulma level](bulma.io/documentation/layout/level/) component.

A flexible horizontal layout system. Items can be placed in the left section, the right section, or centered as standalone items. Content in each section is provided via ‘left`, `right`, and `item` block methods on the yielded component.

## Example:

render BulmaPhlex::Level.new do |level|
  level.left do
    button(class: "button") { "Left" }
  end

  level.right do
    button(class: "button") { "Right" }
  end
  level.right do
    button(class: "button") { "Right 2" }
  end
end

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(**html_attributes) ⇒ Level

Returns a new instance of Level.



32
33
34
35
36
37
 
# File 'lib/bulma_phlex/level.rb', line 32

def initialize(**html_attributes)
  @html_attributes = html_attributes
  @items = []
  @left = []
  @right = []
end

Class Method Details

.new(**html_attributes) ⇒ Object

Parameters

  • ‘**html_attributes` — Additional HTML attributes for the level element



28
29
30
 
# File 'lib/bulma_phlex/level.rb', line 28

def self.new(**html_attributes)
  super
end

Instance Method Details

#item(&content) ⇒ Object

Adds a centered item to the level. Can be called multiple times.

Expects a block that renders the item content.



58
59
60
 
# File 'lib/bulma_phlex/level.rb', line 58

def item(&content)
  @items << content
end

#left(&content) ⇒ Object

Adds an item to the left section of the level. Can be called multiple times.

Expects a block that renders the item content.



65
66
67
 
# File 'lib/bulma_phlex/level.rb', line 65

def left(&content)
  @left << content
end

#right(&content) ⇒ Object

Adds an item to the right section of the level. Can be called multiple times.

Expects a block that renders the item content.



72
73
74
 
# File 'lib/bulma_phlex/level.rb', line 72

def right(&content)
  @right << content
end

#view_template ⇒ Object 



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
# File 'lib/bulma_phlex/level.rb', line 39

def view_template(&)
  vanish(&)

  div(**mix({ class: "level" }, @html_attributes)) do
    div(class: "level-left") do
      @left.each { |item| level_item(item) }
    end

    @items.each { |item| level_item(item) }

    div(class: "level-right") do
      @right.each { |item| level_item(item) }
    end
  end
end