Class: PlaceholderComponent

Inherits:
Component show all
Defined in:
app/components/placeholder_component.rb

Overview

Placeholder — skeleton/placeholder content while loading.

Usage:

Placeholder { |c|
  c.header(image: true) {
    c.line
    c.line
  }
  c.paragraph {
    c.line :medium
    c.line :short
  }
}

Placeholder { |c|
  c.image :square
}

Placeholder { |c|
  c.line :full
  c.line :very_long
  c.line :long
  c.line :medium
  c.line :short
  c.line :very_short
}

Constant Summary

Constants inherited from Component

Component::HTML_OPTIONS

Instance Method Summary collapse

Methods inherited from Component

default, #initialize, #render_in, slot

Constructor Details

This class inherits a constructor from Component

Instance Method Details

#header(image: false, &block) ⇒ Object 



39
40
41
42
 
# File 'app/components/placeholder_component.rb', line 39

def header(image: false, &block)
  css = class_names({ "image" => image }, "header")
  @view_context.output_buffer << tag.div(class: css) { @view_context.capture(self, &block) }
end

#image(ratio = nil) ⇒ Object 



48
49
50
51
 
# File 'app/components/placeholder_component.rb', line 48

def image(ratio = nil)
  css = class_names(ratio, "image")
  @view_context.output_buffer << tag.div(class: css)
end

#line(length = nil) ⇒ Object 



34
35
36
37
 
# File 'app/components/placeholder_component.rb', line 34

def line(length = nil)
  css = class_names(length&.to_s&.tr("_", " "), "line")
  @view_context.output_buffer << tag.div(class: css)
end

#paragraph(&block) ⇒ Object 



44
45
46
 
# File 'app/components/placeholder_component.rb', line 44

def paragraph(&block)
  @view_context.output_buffer << tag.div(class: "paragraph") { @view_context.capture(self, &block) }
end

#to_s ⇒ Object 



53
54
55
56
57
58
59
60
61
62
 
# File 'app/components/placeholder_component.rb', line 53

def to_s
  classes = class_names(
    "ui",
    { "fluid" => fluid,
      "inverted" => inverted },
    "placeholder"
  )

  tag.div(**merge_html_options(class: classes)) { @content }
end