public
Last active

A micro gem providing an accordion view helper and a tabs view helper that generate the proper markup for Twitter Bootstrap

  • Download Gist
README.markdown
Markdown

Twitter Bootstrap Components Helper

Provides an accordion helper and a tabs helper

In your Gemfile:

gem 'bootstrap-components-helpers', :git => 'git://gist.github.com/2117187.git'

Accordion helper:

= accordion do |accordion|
  = accordion.pane 'My first pane' do
    = render partial: 'my_first_pane'
  = accordion.pane 'My second pane' do
    = render partial: 'my_second_pane'

accordion method options :

  • :accordion_id : when you want more than one accordion on the same page.
  • :open : when you want the first pane to be open on load.

Tabs helper:

= tabs do |tabs|
  - tabs.pane 'My first pane' do
    = render partial: 'my_first_pane'
  - tabs.pane 'My second pane' do
    = render partial: 'my_second_pane'

tabs method options :

  • :direction : to control the positioning of the tabs. Valid values are below, left, right and above (default is above).
  • :style : tabs or pills (default is tabs).
accordion_helper.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
module BootstrapComponentsHelpers
module AccordionHelper
def accordion opts = {}
opts[:accordion_id] ||= 'accordion'
builder = AccordionBuilder.new opts, self
content_tag :div, :class => 'accordion', :id => opts[:accordion_id] do
yield builder
end
end
 
class AccordionBuilder
 
attr_reader :parent
delegate :capture, :content_tag, :link_to, :to => :parent
 
def initialize opts, parent
@first = true
@parent = parent
@opts = opts
end
 
def pane title, &block
css_class = (@first && @opts[:open]) ? 'in' : ''
@first = false
content_tag :div, :class => 'accordion-group' do
heading = content_tag :div, :class => 'accordion-heading' do
link_to title, "##{title.parameterize}_pane", :class => 'accordion-toggle', :'data-toggle' => 'collapse',
:'data-parent' => "##{@opts[:accordion_id]}"
end
body = content_tag :div, :class => "accordion-body collapse #{css_class}", :id => "#{title.parameterize}_pane" do
content_tag :div, :class => 'accordion-inner' do
capture(&block)
end
end
heading + body
end
end
end
end
end
 
ActionView::Base.send :include, BootstrapComponentsHelpers::AccordionHelper
bootstrap-components-helpers.gemspec
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Gem::Specification.new do |s|
s.name = 'bootstrap-components-helpers'
s.summary = 'Accordion view helper for Twitter Bootstrap'
s.description = 'A micro gem providing an accordion view helper that generates the proper markup for Twitter Bootstrap'
s.version = '0.0.1'
s.platform = Gem::Platform::RUBY
 
s.files = ['bootstrap-components-helpers.rb', 'accordion_helper.rb', 'tabs_helper.rb']
s.require_path = '.'
 
s.author = 'Ivan Schneider'
s.email = 'git@ivanschneider.fr'
s.homepage = 'https://dbinsights.herokuapp.com'
 
# s.test_file = '_spec.rb'
# s.add_development_dependency('rspec', ["~> 2.8"])
end
bootstrap-components-helpers.rb
Ruby
1 2
require 'accordion_helper'
require 'tabs_helper'
tabs_helper.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
module BootstrapComponentsHelpers
module TabsHelper
def tabs opts = {}
opts[:direction] ||= 'above'
opts[:style] ||= 'tabs'
builder = TabsBuilder.new self
yield builder
tabs = content_tag(:ul, builder.pane_handles.join("\n").html_safe, :class => "nav nav-#{opts[:style]}")
contents = content_tag(:div, builder.pane_contents.join("\n").html_safe, :class => 'tab-content')
css_direction = "tabs-#{opts[:direction]}" unless opts[:direction] == 'above'
content_tag :div, :class => "tabbable #{css_direction}" do
if opts[:direction] == 'below'
contents + tabs
else
tabs + contents
end
end
end
 
class TabsBuilder
 
attr_reader :parent, :pane_contents, :pane_handles
delegate :capture, :content_tag, :to => :parent
 
def initialize parent
@first = true
@parent = parent
@pane_handles = []
@pane_contents = []
end
 
def pane title, &block
css_class, @first = 'active', false if @first
link = content_tag(:a, title, :'data-toggle' => 'tab', :href => "##{title.parameterize}_tab")
@pane_handles << content_tag(:li, link, :class => css_class)
@pane_contents << (content_tag :div, :class => "tab-pane #{css_class}", :id => "#{title.parameterize}_tab" do
capture(&block)
end)
nil
end
 
end
end
end
 
ActionView::Base.send :include, BootstrapComponentsHelpers::TabsHelper

Hi, great code... thanks for sharing.

I am writing this comment in lieu of a pull request, since gists don't yet support pull requests.

I forked a forked copy of your repo and added the ability for users to specify the selected tab by passing an :active option. The person I forked it from added a similar feature, allowing users to specify the open accordion pane.

Please consider pulling in our simple additions.
https://gist.github.com/calebhaye/5105757

Hi,

I turned the micro gem into a gem that includes your additions ; https://github.com/isc/bootstrap-components-helpers

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.