Class: Bulmacomp::TurboFrameComponent

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

Overview

Make an HTML [turbo Frame](turbo.hotwired.dev/handbook/frames) structure.

Examples:

empty turbo frame, on default when the compoent is have’t yield content, is added a lod icon

= render Layout::TurboFrameComponent.new

<turbo-frame>
  <span class="icon"><i class="fas fa-sync fa-spin fa-2x"></i></span>
</turbo-frame>

with id and src (to load remote content)

= render Layout::TurboFrameComponent.new(id: 'nav1', src: books_path )

<turbo-frame id='nav1' src='/books'>
  <span class="icon"><i class="fas fa-sync fa-spin fa-2x"></i></span>
</turbo-frame>

with no icon

= render Layout::TurboFrameComponent.new(icon: nil, id: 'nav1', src: books_path )

<turbo-frame id='nav1' src='/books'></turbo-frame>

with yield content

= render Layout::TurboFrameComponent.new do
  some text

<turbo-frame>some text</turbo-frame>

Instance Method Summary collapse

Constructor Details

#initialize(icon: default_icon, **opts) {|optional| ... } ⇒ TurboFrameComponent

Returns a new instance of TurboFrameComponent.

Parameters:

  • opts (Hash)

    options to generate content

  • icon (String) (defaults to: default_icon)

    text to add whe yield content is empty default: [default_icon]

Options Hash (**opts):

  • :* (String)

    each other key going as tag option

Yields:

  • (optional)

    turbo frame content



39
40
41
42
43
# File 'app/components/bulmacomp/turbo_frame_component.rb', line 39

def initialize(icon: default_icon, **opts)
  super
  @icon = icon
  @opts = opts
end

Instance Method Details

#callString

Returns html turbo frame.

Returns:

  • (String)

    html turbo frame



46
47
48
# File 'app/components/bulmacomp/turbo_frame_component.rb', line 46

def call
  ('turbo-frame', (content || @icon), **@opts)
end

#default_iconObject

default value for icon



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

def default_icon
  tag.span tag.i(class: 'fas fa-sync fa-spin fa-2x'), class: 'icon'
end