-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- 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
<f7-page>
<f7-navbar title="Contacts List"></f7-navbar>
<f7-list contacts-list>
<f7-list-group>
<f7-list-item title="A" group-title></f7-list-item>
<f7-list-item title="Aaron "></f7-list-item>
<f7-list-item title="Abbie"></f7-list-item>
<f7-list-item title="Adam"></f7-list-item>
<f7-list-item title="Adele"></f7-list-item>
<f7-list-item title="Agatha"></f7-list-item>
<f7-list-item title="Agnes"></f7-list-item>
<f7-list-item title="Albert"></f7-list-item>
<f7-list-item title="Alexander"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="B" group-title></f7-list-item>
<f7-list-item title="Bailey"></f7-list-item>
<f7-list-item title="Barclay"></f7-list-item>
<f7-list-item title="Bartolo"></f7-list-item>
<f7-list-item title="Bellamy"></f7-list-item>
<f7-list-item title="Belle"></f7-list-item>
<f7-list-item title="Benjamin"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="C" group-title></f7-list-item>
<f7-list-item title="Caiden"></f7-list-item>
<f7-list-item title="Calvin"></f7-list-item>
<f7-list-item title="Candy"></f7-list-item>
<f7-list-item title="Carl"></f7-list-item>
<f7-list-item title="Cherilyn"></f7-list-item>
<f7-list-item title="Chester"></f7-list-item>
<f7-list-item title="Chloe"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="V" group-title></f7-list-item>
<f7-list-item title="Vladimir"></f7-list-item>
</f7-list-group>
</f7-list>
</f7-page>