-
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
Contacts List Vue Component
Contacts List is not a separate component, but just a particular case of using <f7-list> and <f7-list-item> components.
Contacts List Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-list> properties | |||
contacts-list | boolean | false | Adds required additional styles for Contacts List |
Examples
Here is the full contacts list page example:
<template>
<f7-page>
<f7-navbar back-link="Back" title="Contacts" sliding></f7-navbar>
<f7-list contacts-list>
<f7-list-group v-for="(group, key) in contacts">
<f7-list-item :title="key" group-title></f7-list-item>
<f7-list-item v-for="name in group" :title="name"></f7-list-item>
</f7-list-group>
</f7-list>
</f7-page>
</template>
<script>
export default {
data: function () {
return {
contacts: {
'A': [
'Aaron',
'Abbie',
'Adam',
'Adele',
'Agatha',
'Agnes',
'Albert',
'Alexander'
],
'B': [
'Bailey',
'Barclay',
'Bartolo',
'Bellamy',
'Belle',
'Benjamin'
],
'C': [
'Caiden',
'Calvin',
'Candy',
'Carl',
'Cherilyn',
'Chester',
'Chloe'
],
'V': [
'Vladimir'
]
}
}
}
}
</script>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="back link">Back</a>
</div>
<div class="title">Contacts</div>
</div>
</div>
<div class="page-content">
<div class="list contacts-list">
<div class="list-group">
<ul>
<li class="list-group-title">
<span>A</span>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Aaron</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Abbie</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Adam</div>
</div>
</div>
</li>
...
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">
<span>B</span>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Bailey</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Barclay</div>
</div>
</div>
</li>
...
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">
<span>C</span>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Caiden</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Calvin</div>
</div>
</div>
</li>
...
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">
<span>V</span>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Vladimir</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>