#View Helpers
#Dropdowns
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 parameterdropdown_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.<div class="btn-group"> <%= dropdown_button "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 %> </div>
#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.
<div class="alert alert-danger"> <%= fa_icon_tag("remove") %> 3 errors prohibited this user from from being saved. </div>
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 the 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("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" }) %>