List can be used by two ways, one is passing a block, another is passing a collection as a parameter.

Unordered List

= list do |li|
  - li << link_to('list 1', 'javascript:;')
  - li << link_to('list 2', 'javascript:;')
  - li << 'list 3'
  - li << link_to('list 4', 'javascript:;')
  - li << content_tag(:span, 'list 5', class: 'text-warning')

Ordered List

= list(type: 'ordered') do |li|
  - li << link_to('list 1', 'javascript:;')
  - li << link_to('list 2', 'javascript:;')
  - li << 'list 3'
  - li << link_to('list 4', 'javascript:;')
  - li << content_tag(:span, 'list 5', class: 'text-warning')

Unstyled List

= list(type: 'unstyled') do |li|
  - li << link_to('list 1', 'javascript:;')
  - li << link_to('list 2', 'javascript:;')
  - li << 'list 3'
  - li << link_to('list 4', 'javascript:;')
  - li << content_tag(:span, 'list 5', class: 'text-warning')

Nested and with options

= list(type: 'ordered', style: 'background-color: #eeeeff', li_options: {style: 'color: #ff0000;'}) do |li|
  - li << link_to('list 1', 'javascript:;')
  - li << link_to('list 2', 'javascript:;')
  - li << link_to('list 3', 'javascript:;') + list(li_option: {style: 'color: #00ff00'}) do |nested_li|
        nested_li << 'list 3.1'
        nested_li << 'list 3.2'
        nested_li << 'list 3.3'
    end
  - li.add('list4', style: 'color: #00ff00')
  - li << content_tag(:span, 'list 5', class: 'text-warning')

Navbar helpers wraps the bootstrap navbar component.

Navbar with brand and nav and divider

= navbar do
  = link_to 'Title', 'javascript:;', class: 'brand'
  = nav do |n|
    - n.add link_to('nav1', 'javascript:;'), class: 'active'
    - n.add link_to('nav2', 'javascript:;')
    - n.add class: 'divider-vertical'
    - n.add link_to('nav3', 'javascript:;')

Tab helper will generate a tabs or a pills component in bootstrap way.

Default Tab

= tabs do |t|
  - t.tab('tab1') do
    I'm tab #1.
  - t.tab('tab2') do
    I'm tab #2.
  - t.tab('tab3') do
    I'm tab #3.

Tab with options

= tabs(id: 'tabs_10', position: 'below') do |t|
  - t.tab('tab1', disabled: true, clickable: false) do
    I'm tab #1.
  - t.tab('tab2') do
    I'm tab #2.
  - t.tab('tab3') do
    I'm tab #3.

Stacked Tab

= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t|
  - t.tab('tab1', disabled: true, clickable: false) do
    I'm tab #1.
  - t.tab('tab2') do
    I'm tab #2.
  - t.tab('tab3') do
    I'm tab #3.

Default Pill

= tabs(style: 'pill', id: 'tab_30') do |t|
  - t.tab('tab1') do
    I'm tab #1.
  - t.tab('tab2') do
    I'm tab #2.
  - t.tab('tab3') do
    I'm tab #3.

Table helper wraps bootstrap table. It combines objects from the controller and table.

It has multiple options

Fluid table

Generate a table with fluid layout, pass a collection, you can specify the method should be called by the object in a column or use a code block.

= table(collection: @orders, type: 'hover fluid') do |t|
  - t.column(width: 2, method: :order_number, align: 'center')
  - t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") }
  - t.column(width: 2, method: :customer_name)
  - t.column(width: 2, method: :status)
  - t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do
    = link_to 'show', '#table'
    |
    = link_to 'edit', '#table'
    |
    = link_to 'destroy', '#table', confirm: 'sure?'

Fixed table

The default table is a non-fluid table.

= table(collection: @orders) do |t|
  - t.column(width: 2, method: :order_number, align: 'center')
  - t.column(width: 2, method: :order_date) { |order| order.order_date.strftime("%d-%m-%Y") }
  - t.column(width: 2, method: :customer_name)
  - t.column(width: 2, method: :status)
  - t.column(width: 4, header_options: { text: 'Actions' }, align: 'center') do
    = link_to 'show', '#table'
    |
    = link_to 'edit', '#table'
    |
    = link_to 'destroy', '#table', confirm: 'sure?'

Table with options

= table(collection: @orders,
        type: 'fluid striped bordered condensed',
        caption: 'Orders',
        caption_options: { style: 'color: red; font-size: 16px;' },
        default_row_options: { style: 'background-color: #999;' }) do |t|
  - t.column(align: 'center', width: 2, method: :order_number)
  - t.column(header_options: { text: 'Date' }, width: 2, align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') }
  - t.column(width: 2, method: :customer_name)
  - t.column(align: 'center', width: 2, method: :status)
  - t.column(align: 'center', width: 4, header_options: { text: 'Actions' }) do
    = link_to 'show', '#table'
    |
    = link_to 'edit', '#table'
    |
    = link_to 'destroy', '#table', confirm: 'sure?'
 

Table with complex header

= table(collection: @orders,
        type: "hover fluid bordered") do |t|
  - t.header_row do |r|
    - r.header(colspan: 2, align: 'center') { "Order, as to #{Date.today}" }
    - r.header(text: 'Customer', width: 3, rowspan: 2)
    - r.header(text: 'Status', width: 1, rowspan: 2, align: 'center')
    - r.header(text: 'Actions', width: 3, colspan: 3, align: 'center')
 
  - t.header_row do |r|
    - r.header(text: 'Number', width: 2, align: 'center')
    - r.header(text: 'Date', width: 3, align: 'center')
    - r.header(text: 'show', width: 1, align: 'center')
    - r.header(text: 'edit', width: 1, align: 'center')
    - r.header(text: 'destroy', width: 1, align: 'center')
 
  - t.column(align: 'center', method: :order_number)
  - t.column(align: 'center') { |order| order.order_date.strftime('%d-%m-%Y') }
  - t.column(method: :customer_name)
  - t.column(align: 'center', method: :status)
  - t.column(align: 'center') { link_to 'show', '#table' }
  - t.column(align: 'center') { link_to 'edit', '#table' }
  - t.column(align: 'center') { link_to 'destroy', '#table', confirm: 'sure?' }

Thumbnails helpers wraps bootstrap thumbnails component.

Thumbnails

= tns do
  = th(3) do
    = tn do
      = image_tag 'holder.js/300x200'
      %h3 Title
      %p Description
  = th(3) do
    = tn do
      = image_tag 'holder.js/300x200'
      %h3 Title
      %p Description
  = th(3) do
    = tn do
      = image_tag 'holder.js/300x200'
      %h3 Title
      %p Description
  = th(6) do
    = tn do
      = image_tag 'holder.js/600x200'
      %h3 Title
      %p Description
  = th(6) do
    = tn do
      = image_tag 'holder.js/600x200'
      %h3 Title
      %p Description

Flash helpers wraps bootstrap alerts component.

Default

= f(message: 'warning')

With options

= f(message: 'error', type: :error)
= f(message: 'success', type: :success)
= f(message: 'info', type: :info)
= f(type: :info, block: true, closable: false) do
  %h4 This is an Info
  %p The information here is a demo with block and without close button.

Modal uses bootstrap original modal component and bootstrap-modal gem extending the original modal.

Default modal

= modal('test', 'This is a modal') do
  .row
    .span6
      %h4 Some Input
      %input{type: "text", class: "span5"}
      %input{type: "text", class: "span5"}
      %input{type: "text", class: "span5"}
 
= modal_trigger('test', 'Trigger', type: 'b', icon: 'search')
= modal_trigger('test', 'Trigger 2', icon: 'search')

Modal with trigger

= modal_with_trigger('test2', 'This is a modal', 'Trigger', {},
type: 'b', icon: %w(search white), class: 'btn-primary') do
  .row
    .span6
      %h4 Some Input
      %input{type: "text", class: "span5"}
      %input{type: "text", class: "span5"}
      %input{type: "text", class: "span5"}

Modal with width

= modal_with_trigger('test3', 'This is a modal', 'Trigger', { width: 760 },
type: 'b', icon: %w(search white), class: 'btn-primary') do
  .row
    .span7
      %h4 Some Input
      %input{type: "text", class: "span7"}
      %input{type: "text", class: "span7"}
      %input{type: "text", class: "span7"}

Modal with full width

= modal_with_trigger('test4', 'This is a modal', 'Trigger', { fullwidth: true },
type: 'b', icon: %w(search white), class: 'btn-primary') do
  .row
    .span12
      %h4 Some Input
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}

Long modal

= modal_with_trigger('test5', 'This is a modal', 'Trigger', { width: 760, long: true },
type: 'b', icon: %w(search white), class: 'btn-primary') do
  .row-fluid
    .span12
      %h4 Some Input
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}
      %input{type: "text", class: "span11"}

Progress bar helpers wraps bootstrap progress bar component.

Non stacked bar

= pg(percentage: 25, content: 'Done: 25%')
= pg(striped: true, percentage: 25, content: 'Done: 25%')
= pg(active: true, striped: true, percentage: 25, content: 'Done: 25%', type: :success)
= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :warning)
= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :danger)
= pg(in_table: true, percentage: 25, content: 'Done: 25%', type: :info)

Stacked bar

= pg(striped: true, active: true) do
  = pb(percentage: 25, type: :success)
  = pb(percentage: 25, content: 'Done: 25%', type: :warning)

Typographic helpers includes bootstrap label, badge, hero unit, page header.

Label

= l('this is a label text')
= l('this is a label text', type: :success)
= l('this is a label text', type: :warning)
= l('this is a label text', type: :important)
= l('this is a label text', type: :info)
= l('this is a label text', type: :inverse)

Badge

= b('this is a badge text')
= b('this is a badge text', type: :success)
= b('this is a badge text', type: :warning)
= b('this is a badge text', type: :important)
= b('this is a badge text', type: :info)
= b('this is a badge text', type: :inverse)

Image helpers includes bootstrap glyph icon helper and image style helper.

Rounded border image

= r_image_tag('holder.js/300x300')

Circle image

= c_image_tag('holder.js/300x300')

Polaroid image

= p_image_tag('holder.js/300x300')

Glyph icon

= glyph_icon(:plus)

= glyph_icon(:align_justify, :white)
= glyph_icon(*%w(plus white))