<List>
<ListItem title="Item 1"></ListItem>
<ListItem title="Item 2"></ListItem>
</List>
Renders to:
<div class="list-block">
<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>
<List>
<ListItem title="Item 1" badge="5" badgeColor="red"></ListItem>
<ListItem title="Item 2" badge="3" badgeColor="red"></ListItem>
<ListItem title="Items Divider" divider></ListItem>
<ListItem title="Item 3"></ListItem>
...
</List>
Renders to:
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
<div class="item-after">
<span class="badge bg-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 bg-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>
<List>
<ListItem link="/about/" title="About"></ListItem>
<ListItem link="/contacts/" title="Contacts"></ListItem>
</List>
Renders to:
<div class="list-block">
<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>
<List mediaList>
<ListItem
link="/item/"
media="<img src='image.jpg'>"
title="Item Title"
subtitle="Item Subtitle"
text="Some text"
after="Read more"
></ListItem>
</List>
Renders to:
<div class="list-block media-list">
<ul>
<li>
<a href="/item/" class="item-link">
<div class="item-content">
<div class="item-media">
<img src='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>
List Item React component (<ListItem>) has additional slot properties for custom elements:
<List mediaList>
<ListItem
link="/home/"
media="<img src='image.jpg'>"
title="Item Title"
subtitle="Item Subtitle"
text="Text"
after="Read more"
rootStartSlot={<div>Root Start</div>}
rootSlot={<div>Root</div>}
contentStartSlot={<div>Content Start</div>}
contentSlot={<div>Content</div>}
mediaStartSlot={<div>Media Start</div>}
mediaSlot={<div>Media</div>}
afterStartSlot={<span>After Start</span>}
afterSlot={<span>After</span>}
innerStartSlot={<div>Inner Start</div>}
innerSlot={<div>Inner</div>}
>
</ListItem>
</List>
Renders to:
<div class="list-block 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">
<div>Media Start</div>
<img src="image.jpg">
<div>Media</div>
</div>
<div class="item-inner">
<div>Inner Start</div>
<div class="item-title-row">
<div class="item-title">Item Title</div>
<div class="item-after">
<span>After Start</span>
<span>Read more</span>
<span>After</span>
</div>
</div>
<div class="item-subtitle">Item Subtitle</div>
<div class="item-text">Text</div>
<div>Inner</div>
</div>
<div>Content</div>
</div>
</a>
<div>Root</div>
</li>
</ul>
</div>
Prop | Type | Default | Description |
---|---|---|---|
title | string | List item title | |
subtitle | string | List item subtitle (only for Media List) | |
text | string | List item text (only for Media List) | |
media | string | List item media (icon, image, etc) | |
after | string | List item label | |
badge | string/number | List item Badge | |
badgeColor | string | List item Badge color. One of default colors | |
mediaItem | boolean | Enables Media list item for the current list item | |
divider | boolean | Converts list item to list item divider | |
groupTitle | boolean | Converts list item to list group title | |
swipeout | boolean | Converts list item to swipeout list item | |
accordionItem | boolean | Converts list item to accordion list item | |
Smart Select properties | |||
smartSelect | boolean | Converts list item to smart select list item | |
smartSelectSearchbar | boolean | Enables search bar for smart select page | |
smartSelectSearchnarPlaceholder | string | "Search" | Smart select search bar search field placeholder text |
smartSelectSearchbarCancel | string | "Cancel" | Smart select search bar Cancel button text |
smartSelectPageTitle | string | Smart select page title. Defaults to title prop |
|
smartSelectBackText | boolean | "Back" | Smart select page back-link text. |
smartSelectBackOnSelect | boolean | Will close Smart Select page automatically after user selects any option | |
smartSelectOpenIn | string | "page" | Defines how to open smart select: "page", "popup" or "picker" |
smartSelectVirtualList | boolean | Enables Virtual list for smart select | |
smartSelectVirtualListHeight | number | Allows to specify virtual list item height | |
smartSelectNavbarTheme | string | Smart select navbar color theme. One of default colors | |
smartSelectFormTheme | string | Smart select form color theme. One of default colors | |
Checkboxes & Radios properties | |||
checkbox | boolean | Enables checkbox-item | |
radio | boolean | Enables radio-item | |
checked | boolean | Whether the checkbox/radio input is checked | |
name | string | Checkbox/radio input name | |
value | string/number | Checkbox/radio input value | |
readonly | boolean | Whether the checkbox/radio input is readonly | |
disabled | boolean | Whether the checkbox/radio input is disabled | |
required | boolean | Whether the checkbox/radio input is required | |
Link properties | |||
link | boolean/string | Enables link and link URL if specified as string | |
linkOpenPanel | string/boolean | Defines panel to open. Can be "left" or "right" | |
linkClosePanel | boolean | Closes panel on click | |
linkOpenPopup | string/boolean | CSS selector of the popup to open on click | |
linkClosePopup | string/boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
linkOpenPopover | string/boolean | CSS selector of the popover to open on click | |
linkClosePopover | string/boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
linkOpenPicker | string/boolean | CSS selector of the picker to open on click | |
linkClosePicker | string/boolean | CSS selector of the picker to close on click. Or boolean property to close currently opened picker | |
linkOpenLoginScreen | string/boolean | CSS selector of the login screen to open on click | |
linkCloseLoginScreen | string/boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
linkView | string | CSS selector of the View to load the page | |
linkNoFastclick | boolean | Disables fast click | |
linkExternal | boolean | Enable to bypass Framework7's link click handler | |
linkBack | boolean | Enables back navigation link | |
linkForce | boolean | Force page to load and ignore previous page in history (use together with back prop) | |
linkReload | boolean | Reloads new page instead of the currently active one | |
linkAnimatePages | boolean | Disables pages animation | |
linkIgnoreCache | boolean | Ignores caching | |
linkPageName | string | Name of the page to load | |
linkTemplate | string | Template name to load |
Event | Description |
---|---|
onClick | Event will be triggeres when user clicks on list item |
onChange | Event will be triggeres when "change" event occurs on list item input (radio or checkbox) |
onSwipeout | Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage |
onSwipeoutOpen | Event will be triggered when swipeout element starts its opening animation |
onSwipeoutOpened | Event will be triggered after swipeout element completes its opening animation |
onSwipeoutClose | Event will be triggered when swipeout element starts its closing animation |
onSwipeoutClosed | Event will be triggered after swipeout element completes its closing animation |
onSwipeoutDelete | Event will be triggered after swipeout element starts its delete animation |
onSwipeoutDeleted | Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM |
onAccordionOpen | Event will be triggered when accordion content starts its opening animation. |
onAccordionOpened | Event will be triggered after accordion content completes its opening animation. |
onAccordionClose | Event will be triggered when accordion content starts its closing animation. |
onAccordionClosed | Event will be triggered after accordion content completes its closing animation. |