Module: Bootstrap::ComponentHelper

Included in:
BaseHelper
Defined in:
lib/bootstrap-component-helper.rb,
lib/bootstrap/component_helper/engine.rb,
app/helpers/bootstrap/component_helper.rb,
lib/generators/bootstrap/component_helper/install/install_generator.rb

Defined Under Namespace

Modules: Generators Classes: Engine

Instance Method Summary collapse

Instance Method Details

#badge(text, type: 'default', tag: 'span', **options) ⇒ Object Also known as: b

Public: Bootstrap badges.

text - String. badge text. type - String. A string of success, warning, important, info or inverse

( default: 'default' )

tag - Symbol or String. Html tag of the badge. ( default: ‘span’ ) options - Other options can be accepted by the tag specified.

Examples

b("I'm a badge")
# => <span class="badge badge-default">I'm a badge</span>

b("I'm a label", type: 'success')
# => <span class="badge badge-success">I'm a badge</span>

b("I'm a label", style: 'color: #999;')
# => <span class="badge badge-default" style="color: #999;">
       I'm a badge
     </span>

Returns the badge html.



242
243
244
 
# File 'app/helpers/bootstrap/component_helper.rb', line 242

def badge(text, type: 'default', tag: 'span', **options)
  content_tag(tag, text, merge_predef_class("badge badge-#{type.to_s}", options))
end

#btn_group(tag: :div, vertical: false, **options, &block) ⇒ Object Also known as: bg

Public: Button group, combine buttons as a group

tag - Symbol or String. Html tag of button group. ( default: :div ) vertical - Boolean. Buttons align vertically. ( default: false ) options - Other options can be accepted by the tag specified.

( default: {} )

block - The content of a button group, usually are several links with

button styles.

Examples

= bg do
  = link_to('button 1', '#', class: 'btn')
  = link_to('button 2', '#', class: 'btn')
  = link_to('button 3', '#', class: 'btn')

Returns the whole button group.



23
24
25
26
27
28
 
# File 'app/helpers/bootstrap/component_helper.rb', line 23

def btn_group(tag: :div, vertical: false, **options, &block)
  class_str = 'btn-group'
  class_str << ' btn-group-vertical' if vertical

  content_tag(tag, nil, merge_predef_class(class_str, options), &block)
end

#btn_toolbar(tag: :div, **options, &block) ⇒ Object Also known as: bt

Public: Button toolbar, combine button groups as a toolbar.

tag - Symbol or String. Html tag of the toolbar. ( default: :div ) options - Other options can be accepted by the tag specified.

( default: {} )

block - The content of the toolbar, usually are several button groups

or buttons.

Examples

= bt do
  = bg do
    = link_to('button 1', '#', class: 'btn')
    = link_to('button 2', '#', class: 'btn')
    = link_to('button 3', '#', class: 'btn')
  = bg do
    = link_to('button 4', '#', class: 'btn')
    = link_to('button 5', '#', class: 'btn')
    = link_to('button 6', '#', class: 'btn')

Return the whole button toolbar.



54
55
56
 
# File 'app/helpers/bootstrap/component_helper.rb', line 54

def btn_toolbar(tag: :div, **options, &block)
  content_tag(tag, nil, merge_predef_class('btn-toolbar', options), &block)
end

#f(message: '', type: :info, blocked: false, closable: true, **options, &block) ⇒ Object

Public: Bootstrap alerts. For success, warning, and error messages.

message - String. The message of alert. type - Symbol or String. Type of alerts: error, warning, success,

info. ( default: :info )

blocked - Boolean. Add padding-top and padding-bottom to alert.

( default: false )

closable - Boolean. Add a close button to alert. ( default: true ) options - Other options that can be accepted by div. block - Content of the alert. It can be a string or a HTML block.

Examples

f(message: 'Hello World')
# => <div class="alert alert-info">
       <a href="#" class="close" data-dismiss="alert">&times;</a>
       Hello World
     </div>

f(message: 'Hello World', type: :success, block: true)
# => <div class="alert alert-success alert-block">
       <a href="#" class="close" data-dismiss="alert">&times;</a>
       Hello World
     </div>

= f do
  %h3 Hello World
  %p foo bar
# => <div class="alert alert-info">
       <a href="#" class="close" data-dismiss="alert">&times;</a>
       <h3>Hello World</h3>
       <p>foo bar</p>
     </div>

Returns the whole alert.



341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
 
# File 'app/helpers/bootstrap/component_helper.rb', line 341

def f(message: '', type: :info, blocked: false, closable: true, **options, &block)
  flash_class = 'alert'
  flash_class << " alert-#{type.to_s}"
  flash_class << ' alert-block' if blocked

  content_tag(:div, nil, merge_predef_class(flash_class, options)) do
    content = ''
    content << '<a href="#" class="close" data-dismiss="alert">&times;</a>' if closable
    if block_given?
      content << capture(&block)
    else
      content << message if message.present?
    end
    content.html_safe
  end
end

#l(text, type: 'default', tag: 'span', **options) ⇒ Object

Public: Bootstrap labels.

text - String. Label text. type - String. A string of success, warning, important, info or inverse

( default: 'default' )

tag - Symbol or String. Html tag of the label. ( default: ‘span’ ) options - Other options can be accepted by the tag specified.

Examples

l("I'm a label")
# => <span class="label label-default">I'm a label</span>

l("I'm a label", type: 'success')
# => <span class="label label-success">I'm a label</span>

l("I'm a label", style: 'color: #999;')
# => <span class="label label-default" style="color: #999;">
       I'm a label
     </span>

Returns the label html.



216
217
218
 
# File 'app/helpers/bootstrap/component_helper.rb', line 216

def l(text, type: 'default', tag: 'span', **options)
  content_tag(tag, text, merge_predef_class("label label-#{type.to_s}", options))
end

#modal(id, header_text, header: "<button type='button' data-dismiss='modal' class='close'>&times;</button><h3>#{header_text}</h3>", footer_text: nil, footer: "<button class='btn' data-dismiss='modal' type='button'>#{footer_text||'Close'}</button>", width: nil, static: true, fullwidth: false, long: false, **options, &block) ⇒ Object

Public: Bootstrap modal component, wraps bootstrap-modal-rails gem to

provide more features, see http://jschr.github.io/bootstrap-modal

id - String. HTML id attribute of the modal component. header_text - String. Text would be shown on the top of the modal. header - String. Header of modal, a html string replaces

default header.

footer_text - String. Text would be shown on the bottom button of

the modal. ( default: 'Close' )

footer - String. Footer of modal, a html string replaces default

footer.

width - Integer. Width of modal. static - Boolean. Static Background with Animation. ( default: true ) fullwidth - Boolean. Show full width modal. ( default: false ) long - Boolean. Show very long modal. ( default: false ) options - Other options can be accepted by div. block - HTML block shows the content of the modal.

Examples

Returns the whole modal.



465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
 
# File 'app/helpers/bootstrap/component_helper.rb', line 465

def modal(id,
          header_text,
          header: "<button type='button' data-dismiss='modal' class='close'>&times;</button><h3>#{header_text}</h3>",
          footer_text: nil,
          footer: "<button class='btn' data-dismiss='modal' type='button'>#{footer_text||'Close'}</button>",
          width: nil,
          static: true,
          fullwidth: false,
          long: false,
          **options,
          &block)

  options.merge!(:'data-backdrop' => 'static', :'data-keyboard' => 'false') if static
  options.merge!(:'data-replace' => 'true') if long
  options.merge!(:'data-width' => width) if width
  options.merge!(id: id)

  div(merge_predef_class("modal hide fade #{fullwidth ? 'container' : ''}", options)) do
    content = ''
    content << div(class: 'modal-header') do
      header.html_safe
    end
    content << div(class: 'modal-body') do
      capture(&block) if block_given?
    end
    content << div(class: 'modal-footer') do
      footer.html_safe
    end
    content.html_safe
  end
end

#modal_trigger(modal_id, text, type: 'a', icon: nil, **options) ⇒ Object

Public: Show a link which can toggle the modal.

modal_id - String. HTML id attribute of the modal which should be opened. text - String. Text of the trigger. type - String. ‘a’ or ‘b’, ‘a’ shows link style, ‘b’ shows button

style. ( default: 'a' )

icon - String or Array. Glyph icon of trigger. Just like glyph_icon

helper.

options - Other options can be accepted by link.

Examples

modal_trigger('modal', 'Click Me')
# => <a href="#modal" id="trigger-modal" data-toggle="modal">
       Click Me
     </a>

modal_trigger('modal', 'Click Me', type: 'b', icon: 'plus')
# => <a href="#modal" id="trigger-modal" data-toggle="modal"
        class="btn">
       <i class="icon-plus"></i>
       Click Me
     </a>

Returns a link which can open the modal.



522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
 
# File 'app/helpers/bootstrap/component_helper.rb', line 522

def modal_trigger(modal_id,
                  text,
                  type: 'a',
                  icon: nil,
                  **options)
  options.merge!(id: "trigger-#{modal_id}")
  options.merge!(:'data-toggle' => 'modal')

  merge_predef_class('btn', options) if type == 'b'

  link_to("##{modal_id}", options) do
    content = ''
    content << glyph_icon(icon) if icon
    content << text
    content.html_safe
  end
end

#modal_with_trigger(id, header_text, trigger_text, options = {}, trigger_options = {}, &block) ⇒ Object

Public: Show a link which can toggle the modal and the modal itself.

id - String. HTML id attribute of the modal which should be

opened.

header_text - String. Text would be shown on the top of the modal. trigger_text - String. Text of the trigger. options - Options can be accepted by modal, see modal helper. trigger_options - Options can be accepted by modal trigger, see

modal_trigger helper.

block - HTML block shows the content of the modal.

Examples

Returns a link with a modal would be opened by this link.



555
556
557
558
559
560
561
562
563
564
565
566
567
568
 
# File 'app/helpers/bootstrap/component_helper.rb', line 555

def modal_with_trigger(id,
  header_text,
  trigger_text,
  options = {},
  trigger_options = {},
  &block)

  content = modal(id, header_text, options) do
    capture(&block) if block_given?
  end

  content << modal_trigger(id, trigger_text, trigger_options)
  content.html_safe
end

#nav(type: '', stacked: false, **options, &block) ⇒ Object

Public: Bootstrap navigator that can be used in navbar or used as

tabs or pills. It wraps the list helper. Generate ul and li tags
as navigator.

type - String. Represent the type of the nav. If it’s nil or an

empty string, the nav would be a common nav, usually be used
in a navbar. If it's tabs or pills, then the nav has its own
style. ( default: '' )

stacked - Boolean. Shows whether the nav is sorted stacked.

( default: false )

li_options - Default options of all li tag. options - Other options can be accepted by ul. block - The content of a nav.

Examples

= nav do |item|
  = item.add(link_to('link 1', '#'))
  = item.add(link_to('link 2', '#'))
  = item.add(link_to('link 3', '#'))
# => <ul class="nav nav-">
       <li><a href="#">link 1</a></li>
       <li><a href="#">link 2</a></li>
       <li><a href="#">link 3</a></li>
     </ul>

= nav(type: 'tabs') do |item|
  = item.add(link_to('link 1', '#'))
  = item.add(link_to('link 2', '#'))
  = item.add(link_to('link 3', '#'))
# => <ul class="nav nav-tabs">
       <li><a href="#">link 1</a></li>
       <li><a href="#">link 2</a></li>
       <li><a href="#">link 3</a></li>
     </ul>

Returns the whole nav.



101
102
103
104
105
106
107
108
109
110
111
112
113
 
# File 'app/helpers/bootstrap/component_helper.rb', line 101

def nav(type: '', stacked: false, **options, &block)
  nav_class = 'nav'

  if type.blank? || %w(tabs pills).include?(type)
    nav_class << " nav-#{type}"
  else
    raise "Error nav type, must be in tabs and pills."
  end

  nav_class << ' nav-stacked' if stacked

  list(merge_predef_class(nav_class, options), &block)
end

#navbar(fluid: true, inverse: false, fixed: true, **options, &block) ⇒ Object

Public: Bootstrap navbar. Only implements the navbar at the top of the

page.

fixed - Boolean. If set to false, the navbar wouldn’t be shown at the

top of the page always while scrolling the page.
( default: true )

fluid - Boolean. If set to false, the navbar uses a fixed layout for its

content. ( default: true )

inverse - Boolean. Whether inverses the background color of the navbar. options - Other options can be accepted by navbar. block - the content of a navbar, usually are navs and logos.

Examples

= navbar do
  = link_to('Title', '#', class: 'brand')
  = nav do
    = link_to('link 1', '#')
    = link_to('link 2', '#')
    = link_to('link 3', '#')
# => <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <a href="#" class="brand">Title</a>
         <ul class="nav nav-">
           <li><a href="#">link 1</a></li>
           <li><a href="#">link 2</a></li>
           <li><a href="#">link 3</a></li>
         </ul>
       </div>
     </div>

= navbar(fluid: false) do
  = link_to('Title', '#', class: 'brand')
  = nav do
    = link_to('link 1', '#')
    = link_to('link 2', '#')
    = link_to('link 3', '#')
# => <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
           <a href="#" class="brand">Title</a>
           <ul class="nav nav-">
             <li><a href="#">link 1</a></li>
             <li><a href="#">link 2</a></li>
             <li><a href="#">link 3</a></li>
           </ul>
         </div>
       </div>
     </div>

Return the whole navbar



167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
# File 'app/helpers/bootstrap/component_helper.rb', line 167

def navbar(fluid: true, inverse: false, fixed: true, **options, &block)
  navbar_class = %w(navbar)

  if fixed
    navbar_class << 'navbar-fixed-top'
  else
    navbar_class << 'navbar-static-top'
  end

  navbar_class << 'navbar-inverse' if inverse


  div(merge_predef_class(navbar_class.join(' '), options)) do
    div(class: 'navbar-inner') do
      if fluid
        capture(&block) if block_given?
      else
        div(class: 'container') do
          capture(&block) if block_given?
        end
      end
    end
  end
end

#progress(type: '', percentage: 0, content: '', bar_options: {}, active: false, striped: false, in_table: false, **options, &block) ⇒ Object Also known as: pg

Public: Bootstrap progress bars.

type - String. Type of progress bar. It can be success, warning,

danger, info. ( default: '' )

percentage - Integer. Progress of the progress bar. 0 - 100.

( default: 0 )

conent - String. Text of the progress bar. It will be shown in the

center of the bar. ( default: '' )

bar_options - Other options can be accepted by div. striped - Boolean. Uses a gradient to create a striped effect. Not

available in IE7-8. ( default: false )

active - Boolean. Add .active to .progress-striped to animate the

stripes right to left. Not available in all versions of IE.
( default: false )

in_table - Boolean. If progress is in a table, set the margin-bottom

to zero. ( default: false )

options - Other options that can be acctpted by div. block - The content of the progress. If a block has been passed,

the arguments of type, percentage, content, bar_options
would be ignored. The block should contain one or more
progress bars.

Examples

pg(type: 'success', percentage: 25, striped: true)
# => <div class="progress progress-striped">
       <div class="bar bar-success" style="width: 25%">
       </div>
     </div>

= pg do
  = pb(type: 'success', percentage: 25)
  = pb(type: 'info', percentage: 25)
# => <div class="progress">
       <div class="bar bar-success" style="width: 25%">
       </div>
       <div class="bar bar-info" style="width: 25%">
       </div>
     </div>

Return the whole progress component.



399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
 
# File 'app/helpers/bootstrap/component_helper.rb', line 399

def progress(type: '',
             percentage: 0,
             content: '',
             bar_options: {},
             active: false,
             striped: false,
             in_table: false,
             **options,
             &block)

  progress_class = "progress"
  progress_class << " progress-striped" if striped
  progress_class << " active" if active

  options[:style] ||= ""
  options[:style] << "margin-bottom: 0;" if in_table

  div(merge_predef_class(progress_class, options)) do
    content = ''
    if block_given?
      content << capture(&block)
    else
      content << progress_bar(bar_options.reverse_merge!(type: type,
        percentage: percentage, content: content))
    end
    content.html_safe
  end
end

#progress_bar(type: '', percentage: 0, content: '', **options) ⇒ Object Also known as: pb 



430
431
432
433
434
435
436
 
# File 'app/helpers/bootstrap/component_helper.rb', line 430

def progress_bar(type: '', percentage: 0, content: '', **options)
  bar_class = "bar bar-#{type.to_s}"

  options[:style] ||= ""
  options[:style] << "width: #{percentage.to_i}%;"
  content_tag('div', content, merge_predef_class(bar_class, options))
end

#thumbnail(tag: :div, **options, &block) ⇒ Object Also known as: tn

Public: Thumbnail element.

tag - Symbol or String. HTML tag of thumbnail. ( default: :div ) options - Options can be accepted by the tag specified.



296
297
298
299
300
 
# File 'app/helpers/bootstrap/component_helper.rb', line 296

def thumbnail(tag: :div, **options, &block)
  content_tag(tag, nil, merge_predef_class('thumbnail', options)) do
    capture(&block)
  end
end

#thumbnail_holder(span = 12, options = {}, &block) ⇒ Object Also known as: th

Public: Thumbnail holders, represented by li, used in thumbnails helper.

span - Integer. Width of thumbnail, 1-12. ( default: 12 ) options - Options can be accepted by li. block - The content of thumbnail holder, usually is a thumbnail.

Examples

See thumbnails helper.



286
287
288
289
290
 
# File 'app/helpers/bootstrap/component_helper.rb', line 286

def thumbnail_holder(span = 12, options = {}, &block)
  content_tag('li', nil, merge_predef_class("span#{span}", options)) do
    capture(&block) if block_given?
  end
end

#thumbnails(options = {}, &block) ⇒ Object Also known as: tns

Public: Thumbnails grids of images, videos, text, and more.

options - Options can be accepted by ul. block - The content of thumbnails, usually are several thumbnail holders

Example

= tns do
  = th(3) do
    = tn do
      = image_tag('hello.png')
      %h3 Title
      %p Description
# => <ul class="thumbnails">
       <li class="span3">
         <div class="thumbnail">
           <img src="/assets/hello.png">
           <h3>Title</h3>
           <p>Description</p>
         </div>
       </li>
     </ul>

Returns the whole thumbnails



272
273
274
275
276
 
# File 'app/helpers/bootstrap/component_helper.rb', line 272

def thumbnails(options = {}, &block)
  content_tag('ul', nil, merge_predef_class('thumbnails', options)) do
    capture(&block) if block_given?
  end
end