Skip to content

ActiveView Helper for creating tabs with Bootstrap

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE.txt
MIT
MIT-LICENSE
Notifications You must be signed in to change notification settings

telecta/tabs_for

TabsFor

Build Status Code Climate Test Coverage Gem Version Dependency Status

ActiveView Helper for creating tabs with Bootstrap.

Installation

Add this line to your application's Gemfile:

gem 'tabs_for'

And then execute:

$ bundle

Or install it yourself as:

$ gem install tabs_for

The gem depends on Bootstrap 3 to create the tabs. Bring bootstrap into your project by using Bootstrap for Sass or you preferred method.

Preferred icon and CSS framework is Font Awesome and the help option uses Font Awesome to display the help icon. This dependency could easily be removed in the future. Bring Font Awesome into your project by using font-awesome-rails or your preferred method.

Screenshot

Screenshot

Sample Application

Sample application using tabs_for can be found here.

Usage

Generate the tabs with corresponding panes using the API below. tab takes two arguments and a block. If a symbol is used and the symbol is an attribute on the model it will get translated, else the string will be used directly. tab requires a block, this will be used as content in the tabs pane.

<%= tabs_for @project do |b| %>
  <%= b.tab :tasks, icon: "tasks", size: @project.tasks.size, active: true do %>
    <%= render partial: "tasks/table", locals: { tasks: @project.tasks } %>
  <% end %>
  <%= b.tab :people, icon: "users", size: @project.people.size, label: "Members", help: "Only showing active users." do %>
    <%= render partial: "people/table", locals: { people: @project.people } %>
  <% end %>
  <%= b.tab :statistics, icon: "bar-chart" do %>
    <%= render "statistics", object: @project %>
  <% end %>
  <%= b.tab :settings, icon: "cogs" do %>
    <%= render "settings", object: @project %>
  <% end %>
<% end %>

Options

Supported options for tab:

  • :active - Active tab, the contents will be shown upon rendering.
  • :label - Use custom label text in tab header.
  • :icon - Icon used next to tab header text
  • :size - Number of entires in tab pane. Use if tab pane contains table or list.
  • :id - Override element's ID.
  • :help - Add help text shown on top of tab pane.

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake rspec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/blacktangent/tabs_for. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Testing

To test against all supported Rails versions, run:

appraisal rake test

To update all supported Rails to latest patch version:

appraisal update

License

The gem is available as open source under the terms of the MIT License.