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.

Usage example

Here is the full contacts list page example:

<template>
  <f7-page>
    <f7-navbar back-link="Back" title="Contacts" sliding></f7-navbar>

    <f7-list contacts>
      <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">
      <div class="left sliding">
        <a href="#" class="back link">Back</a>
      </div>
      <div class="center sliding">Contacts</div>
    </div>
  </div>
  <div class="page-content">
    <div class="list-block contacts-block">
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>A</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Aaron</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Abbie</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Adam</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>B</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bailey</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Barclay</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>C</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Caiden</div>
              </div>
            </div>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Calvin</div>
              </div>
            </div>
          </li>
          ...
        </ul>
      </div>
      <div class="list-block-group">
        <ul>
          <li class="list-group-title">
            <span>V</span>
          </li>
          <li class="">
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Vladimir</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>