f7_bar_item

f7_bar_item - Bar Item

This renders an individual item for a navbar/toolbar.

Usage

f7_bar_item title, options, &block
f7_bar_item 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.
• :position - Optional, where the item is placed. Either :left, :centre or :right. (Default: :left)
• :transition - Optional
• :href - Optional, causes the navigation item to be rendered as a clickable link.
• :icon - Optional, the class of the icon.
• :badge - Optional, text/hash for a badge, same as for f7_bar_link.

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

Examples

For page titles

Input

<%= f7_bar_item 'Page Name', :position => :center, :transition => :sliding %>

Output

<div class="center sliding">Page Name</div>

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_item 'Menu', :href => '/menu', :position => :right %>

Output

<div class="right">
    <a href="/menu" class="link">Menu</a>
</div>

Multiple Links

You can only use a block if you need to render multiple links, in conjunction with the f7_bar_link helper. Additional options and usage information for links can be found on the f7_bar_link helper page.

Input

<%= f7_bar_item :position => :left do %>
    <%= f7_bar_link 'Link 1' %>
    <%= f7_bar_link 'Link 2' %>
<% end %>

Output

<div class="left">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
</div>

Tab bar item

Input

<%= f7_toolbar :type => :tabbar_labels do %>
    <%= f7_bar_item 'Camera', :href => '/camera', :icon => :camera, :badge => 5 %>
<% end %>

Output

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a class="tab-link" href="/camera">
        	<i class="icon camera">
        	    <span class="badge badge-red">5</span>
        	</i>
            <span class="tabbar-label">Camera</span>
        </a>
    </div>
</div>

---

Framework7 Documentation

Navbars & Toolbars