f7_list_item

f7_list_item - List Item

This renders a single list item, which can be made up of quite a few components.

Usage

f7_list_item title, options, &block
f7_list_item options, &block

Supported options

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

• :title - Optional, some text to be displayed before the block.
• :href - Optional, where to go when item is clicked.
• :icon - Optional, icon to display on the left of list item.
• :after - Optional, allows you specify content for the right portion of the list item.

Examples

Simple List item

Input

<%= f7_list_item 'Item Title' %>

Output

<li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title">Item Title</div>
        </div>
    </div>
</li>

List item with a url

Input

<%= f7_list_item 'Username', :href => '#', :after => 'jbloggs' %>

Output

<li>
    <a class="item-content item-link">
        <div class="item-inner">
            <div class="item-title">Username</div>
            <div class="item-after">jbloggs</div>
        </div>
    </a>
</li>

List item with icon

Input

<%= f7_list_item 'Item Title', :icon => :'icon-f7' %>

Output

<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon icon-f7">
        </div>
        <div class="item-inner">
            <div class="item-title">Item Title</div>
        </div>
    </div>
</li>

List item with icon + after text

Input

<%= f7_list_item 'Item Title', :icon => :'my-icon', :after => 'Value' %>

Output

<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon my-icon">
        </div>
        <div class="item-inner">
            <div class="item-title">Item Title</div>
            <div class="item-after">Value</div>
        </div>
    </div>
</li>