KISO Docs
KISO Docs

View Helpers

#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.
<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 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" }) %>
Contents