Skip to content

Instantly share code, notes, and snippets.

@isc

isc/README.markdown

Created March 19, 2012 15:58
Show Gist options
  • Save isc/2117187 to your computer and use it in GitHub Desktop.
Save isc/2117187 to your computer and use it in GitHub Desktop.
Download ZIP
A micro gem providing an accordion view helper and a tabs view helper that generate the proper markup for Twitter Bootstrap
Raw
README.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).
Raw
accordion_helper.rb
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
Raw
bootstrap-components-helpers.gemspec
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 = '[email protected]'
s.homepage = 'https://dbinsights.herokuapp.com'
# s.test_file = '_spec.rb'
# s.add_development_dependency('rspec', ["~> 2.8"])
end
Raw
bootstrap-components-helpers.rb
require 'accordion_helper'
require 'tabs_helper'
Raw
tabs_helper.rb
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
@calebhaye
Copy link

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

@isc
Copy link
Author

isc commented Mar 15, 2013

Hi,

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment