-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
List Item Vue Component
List Item Components
There are following components included:
f7-list-item
- main list item elementf7-list-item-row
- list item row element for custom layoutf7-list-item-cell
- list item cell element for custom layout
List Item Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-list-item> properties | |||
title | string | List item title | |
subtitle | string | List item subtitle (only for Media List) | |
text | string | List item text (only for Media List) | |
header | string | List item header text | |
footer | string | List item footer text | |
media | string | List item media image URL | |
after | string | List item label | |
badge | string number |
List item Badge | |
badge-color | string | List item Badge color. One of the default colors | |
media-item | boolean | Enables Media list item for the current list item | |
divider | boolean | Converts list item to list item divider | |
group-title | boolean | Converts list item to list group title | |
no-fast-click | boolean | Disables fast click | |
target | boolean | List item link target attribute | |
<f7-list-item> Form inputs specific properties | |||
inline-label | boolean | false | Enables inline-styled labels for Form Inputs. By default inherirt inline-labels prop on parent <f7-list> |
item-input | boolean | false | Enables additional styling for Form Inputs inside. By default will try to detect based on content |
item-input-with-info | boolean | false | Enables additional styling for Form Inputs with additional info. By default will try to detect based on content |
<f7-list-item> Swipeout specific properties | |||
swipeout | boolean | Converts list item to swipeout list item | |
<f7-list-item> Accordion specific properties | |||
accordion-item | boolean | false | Converts list item to accordion list item |
accordion-item-opened | boolean | false | Makes accordion item opened |
<f7-list-item> Smart Select specific properties | |||
smart-select | boolean | false | Enables Smart Select behavior |
smart-select-params | object | Object with Smart Select Parameters | |
<f7-list-item> Checkboxes & Radios specific properties | |||
checkbox | boolean | false | Enables checkbox-item |
radio | boolean | false | Enables radio-item |
checked | boolean | false | Whether the checkbox/radio input is checked |
name | string | Checkbox/radio input name | |
value | string number |
Checkbox/radio input value | |
readonly | boolean | false | Whether the checkbox/radio input is readonly |
disabled | boolean | false | Whether the checkbox/radio input is disabled |
required | boolean | false | Whether the checkbox/radio input is required |
<f7-list-item> navigation/router related properties | |||
link | boolean string |
Enables link and link URL if specified as string. Same as href prop |
|
href | string boolean |
# | URL of the page to load. In case of boolean href="false" it won't add href tag |
view | string | CSS selector of the View to load the page | |
external | boolean | Enable to bypass Framework7's link click handler | |
back | boolean | Enables back navigation link | |
force | boolean | Force page to load and ignore previous page in history (use together with back prop) |
|
reload-current | boolean | Reloads new page instead of the currently active one | |
reload-previous | boolean | Replace the previous page in history with the new one from route | |
reload-all | boolean | Load new page and remove all previous pages from history and DOM | |
animate | boolean | Disables pages animation | |
ignore-cache | boolean | Ignores caching | |
page-name | string | Name of the page to load | |
route-tab-id | string | Routable Tab id |
List Item Events
Event | Description |
---|---|
<f7-list-item> events | |
click | Event will be triggeres when user clicks on list item |
change | Event will be triggeres when "change" event occurs on list item input (radio or checkbox) |
swipeout | Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage |
swipeout:open | Event will be triggered when swipeout element starts its opening animation |
swipeout:opened | Event will be triggered after swipeout element completes its opening animation |
swipeout:close | Event will be triggered when swipeout element starts its closing animation |
swipeout:closed | Event will be triggered after swipeout element completes its closing animation |
swipeout:delete | Event will be triggered after swipeout element starts its delete animation |
swipeout:deleted | Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM |
accordion:open | Event will be triggered when accordion content starts its opening animation. |
accordion:opened | Event will be triggered after accordion content completes its opening animation. |
accordion:close | Event will be triggered when accordion content starts its closing animation. |
accordion:closed | Event will be triggered after accordion content completes its closing animation. |
List Item Slots
List Item Vue component (<f7-list-item>
) has additional slots for custom elements:
root-start
- element will be inserted in the beginning of<li>
elementroot
/root-end
- element will be inserted in the end of<li>
elementcontent-start
- element will be inserted in the beginning of<div class="item-content">
elementcontent
/content-end
- element will be inserted in the end of<div class="item-content">
elementinner-start
- element will be inserted in the beginning of<div class="item-inner">
elementdefault
/inner
/inner-end
- element will be inserted in the end of<div class="item-inner">
elementmedia
- element will be inserted inside of<div class="item-media">
elementbefore-title
- element will be inserted before<div class="item-title">
elementtitle
- element will be inserted inside of<div class="item-title">
elementafter-title
- element will be inserted after<div class="item-title">
elementsubtitle
- element will be inserted inside of<div class="item-subtitle">
elementtext
- element will be inserted inside of<div class="item-text">
elementheader
- element will be inserted inside of<div class="item-header">
elementfooter
- element will be inserted inside of<div class="item-footer">
elementafter-start
- element will be inserted in the beginning of<div class="item-after">
elementafter
/after-end
- element will be inserted in the end of<div class="item-after">
element
<f7-list media-list>
<f7-list-item
link="/home/"
title="Item Title"
subtitle="Item Subtitle"
text="Text"
after="Read more"
>
<img src="path-to-my-image.jpg" slot="media">
<div slot="root-start">Root Start</div>
<div slot="root">Root End</div>
<div slot="content-start">Content Start</div>
<div slot="content">Content End</div>
<div slot="media-start">Media Start</div>
<div slot="media">Media</div>
<span slot="after-start">After Start</span>
<span slot="after">After End</span>
<div slot="inner-start">Inner Start</div>
<div slot="inner">Inner End</div>
<div slot="before-title">Before Title</div>
<div slot="after-title">After Title</div>
</f7-list-item>
</f7-list>
<!-- Renders to: -->
<div class="list media-list">
<ul>
<li>
<div>Root Start</div>
<a href="/home/" class="item-link">
<div class="item-content">
<div>Content Start</div>
<div class="item-media">
<img src="path-to-my-image.jpg">
</div>
<div class="item-inner">
<div>Inner Start</div>
<div class="item-title-row">
<div>Before Title</div>
<div class="item-title">Item Title</div>
<div>After Title</div>
<div class="item-after">
<span>After Start</span>
<span>Read more</span>
<span>After End</span>
</div>
</div>
<div class="item-subtitle">Item Subtitle</div>
<div class="item-text">Text</div>
<div>Inner End</div>
</div>
<div>Content End</div>
</div>
</a>
<div>Root End</div>
</li>
</ul>
</div>
Examples
Minimal Layout
<f7-list>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
</f7-list>
<!-- Renders to: -->
<div class="list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</li>
</ul>
</div>
With Badges And Divider
<f7-list>
<f7-list-item title="Item 1" badge="5" badge-color="red"></f7-list-item>
<f7-list-item title="Item 2" badge="3" badge-color="red"></f7-list-item>
<f7-list-item title="Items Divider" divider></f7-list-item>
<f7-list-item title="Item 3"></f7-list-item>
...
</f7-list>
<!-- Renders to: -->
<div class="list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
<div class="item-after">
<span class="badge color-red">5</span>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
<div class="item-after">
<span class="badge color-red">3</span>
</div>
</div>
</li>
<li class="item-divider"><span>Items Divider</span></li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</li>
</ul>
</div>
Links Items
<f7-list>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/contacts/" title="Contacts"></f7-list-item>
</f7-list>
<!-- Renders to: -->
<div class="list">
<ul>
<li>
<a href="/about/" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</div>
</a>
</li>
<li>
<a href="/contacts/" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Contacts</div>
</div>
</div>
</a>
</li>
</ul>
</div>
Media List Items
<f7-list media-list>
<f7-list-item
link="/item/"
media="path/to/image.jpg"
title="Item Title"
subtitle="Item Subtitle"
text="Some text"
after="Read more"
></f7-list-item>
</f7-list>
<!-- Renders to: -->
<div class="list media-list">
<ul>
<li>
<a href="/item/" class="item-link">
<div class="item-content">
<div class="item-media">
<img src="path/to/image.jpg">
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Item Title</div>
<div class="item-after">Read more</div>
</div>
<div class="item-subtitle">Item Subtitle</div>
<div class="item-text">Some text</div>
</div>
</div>
</a>
</li>
</ul>
</div>
Custom Table-like Elements
<f7-list-item>
<f7-list-item-cell>
<f7-list-item-row>
<f7-list-item-cell>Cell 1-1</f7-list-item-cell>
<f7-list-item-cell>Cell 1-2</f7-list-item-cell>
<f7-list-item-cell>Cell 1-3</f7-list-item-cell>
</f7-list-item-row>
<f7-list-item-row>
<f7-list-item-cell>Cell 2-1</f7-list-item-cell>
<f7-list-item-cell>Cell 2-2</f7-list-item-cell>
</f7-list-item-row>
<f7-list-item-row>
<f7-list-item-cell>Cell 3-1</f7-list-item-cell>
<f7-list-item-cell>
<f7-list-item-row>
Cell 3-2
</f7-list-item-row>
<f7-list-item-row>
Cell 3-3
</f7-list-item-row>
</f7-list-item-cell>
</f7-list-item-row>
</f7-list-item-cell>
</f7-list-item>