View Helpers

activatable_li_tag generates an <li> tag with the active class added if the url is the current one. Useful for navbar and dropdowns.

<%= activatable_li_tag users_path do |url| %>
  <%= link_to "Users", url %>
<% end %>

activatable_li_tag_with_link generates an <li> tag with the active class added if the url is the current one, with a link inside it pointing to that url. The following code produces the same as the example before.

<%= activatable_li_tag_with_link users_path %>

Both activatable_li_tag and activatable_li_tag_with_link can take an optional CSS class that will always be applied as the last parameter

dropdown_menu renders a dropdown menu that can be used inside navbars and tabs.

<%= dropdown_menu "Dropdown" do %>
  <%= activatable_li_tag_with_link "This page", "#{}" %>
  <%= activatable_li_tag_with_link "...", "..." %>
<% end %>

The previous code rendered inside a <ul class="nav nav-pills"> will produce the following.

<ul class="nav nav-pills">
  <li class="active"><%= link_to "Active link", '#' %></li>
  <%= dropdown_menu "Dropdown" do %>
    <%= activatable_li_tag_with_link "This page", "#" %>
    <%= activatable_li_tag_with_link "Fancy forms", "#" %>
    <%= activatable_li_tag_with_link "Classy tables", "#" %>
    <%= activatable_li_tag_with_link "Pricing table", "#" %>
  <% end %>
</ul>

dropdown_button renders a dropdown menu that can be used inside button groups.

<%= dropdown_button "Dropdown" do %>
  <%= activatable_li_tag_with_link "This page", "#" %>
  <%= activatable_li_tag_with_link "...", "..." %>
<% end %>

The previous code rendered inside a <div class="btn-group"> will produce the following.

Forms

error_notification renders error notifications on top of forms.

<%= form_for @user do |f|  %>
  <%= f.error_notification %>
  ...
<% end %>

If any error is present on the object the following message will be displayed.

3 errors prohibited this user from from being saved.

form_group can be used on form builders (inside form_for). It will handle displaying error messages next to fields and adding the proper classes to the wrapping <div class="form-group">.

<%= f.form_group :name do |f| %>
  <%= f.label :name, class: 'form-label' %>
  <div class="controls">
    <%= f.text_field :name %>
    <%= f.error_messages %>
  </div>
<% end %>

The form_group helper will also take an addition CSS class parameter to use when there are errors, allowing you to override th default error class to something else:

<%= f.form_group :name, 'has-error' do |f| %>
  <%= f.label :name, class: 'control-label' %>
  <div class="controls">
    <%= f.text_field :name %>
    <%= f.error_messages %>
  </div>
<% end %>

Icons

theme_icon_tag renders any available icon from Themify icons. Use without the ti- prefix.

<%= theme_icon_tag("search") %>

fa_icon_tag renders any available icon from FontAwesome. Use without the icon- prefix.

 <%= fa_icon_tag("heart") %>

ionicon_icon_tag renders any available icon from Ionicons. Use without the icon ion- prefix.

<%= ionicon_icon_tag("heart") %>

mdi_icon_tag renders any available icon from Material Design Icons.

<%= mdi_icon_tag("heart") %>

All Icon helpers can take an additional hash argument allowing you to specify further CSS classes to apply:

<%= fa_icon_tag("heart", { class: "fa-5x fa-fw" }) %>