f7_bar_link

f7_bar_link - Bar Item Link

This renders an individual link component of a navbar/toolbar.

Usage

f7_bar_link title, options, &block
f7_bar_link options, &block

Supported options

As well as all the usual HTML options, you have these extra, helper specific options:

• :title - Optional, used if the options are the first parameter.
• :href - Optional, if omitted, a # is assumed (i.e. for javascript events).
• :icon - Optional, the class of the icon.
• :badge - Optional, text/hash for a badge. Hash values:
  • :text - Value to display in the badge.
  • :class - Optional, additional class for badge styling.

:title is only rendered in a toolbar or tabbar with labels.

Examples

If f7_bar_link is rendered inside a navbar/toolbar, it is decorated with the link class. If inside a tabbar, then it is decorated with a tab-link class.

Links

The quickest way to output a text link is to specify it's url on the bar item, and it's done.

Input

<%= f7_bar_link 'Profile', :href => '/profile' %>

Output

<a href="/profile" class="link">Profile</a>

Links with icons + text

Assuming the link is in a 'tab bar with labels'

Input

<%= f7_bar_link 'Me', :href => '/profile', :icon => :profile %>

Output

<a href="/profile" class="link">
    <i class="icon profile"></i>
    <span>Me</span>
</a>

Links with icons only

If you don't want any text, just leave out the title altogether, or set it to an empty string or nil. It will look a bit weird if inside a tab bar with labels'.

Input

<%= f7_bar_link :href => '/menu', :icon => :bars %>

Output

<a href="/menu" class="link icon-only">
    <i class="icon icon-bars"></i>
</a>

Links with badge (text value)

If you specify a non-hash value, it renders the value in a red badge.

Input

<%= f7_bar_link 'Mail', ':href => '/messages', :icon => :mail, :badge => 5 %> 

Output

<a href="/messages" class="link">
      <i class="icon mail">
          <span class="badge badge-red">5</span>
      </i>
      <span class="tabbar-label">Mail</span>
</a> 

Links with badge (hash)

If you need a bit more control, you can specify the badge as a hash.

Input

<%= f7_bar_link 'Mail', ':href => '/messages', :icon => :mail, :badge => { :text => 5, :class => red } %> 

Output

<a href="/messages" class="link">
      <i class="icon mail">
          <span class="badge red">5</span>
      </i>
      <span class="tabbar-label">Mail</span>
</a> 

---

Framework7 Documentation

Navbars & Toolbars