聯絡人列表 Vue 組件

範例
聯絡人列表並非一個獨立的組件，而僅是使用列表視圖的特定案例（列表和列表項目 Vue 組件）。
範例

ContactsList.vue
<template>
  <k-page>
    <k-navbar title="Contacts List" />
    <k-list strong-ios>
      <k-list-group :dividers="false">
        <k-list-item title="A" contacts group-title />
        <k-list-item title="Aaron" contacts />
        <k-list-item title="Abbie" contacts />
        <k-list-item title="Adam" contacts />
        <k-list-item title="Adele" contacts />
        <k-list-item title="Agatha" contacts />
        <k-list-item title="Agnes" contacts />
        <k-list-item title="Albert" contacts />
        <k-list-item title="Alexander" contacts />
      </k-list-group>
      <k-list-group :dividers="false">
        <k-list-item title="B" group-title contacts />
        <k-list-item title="Bailey" contacts />
        <k-list-item title="Barclay" contacts />
        <k-list-item title="Bartolo" contacts />
        <k-list-item title="Bellamy" contacts />
        <k-list-item title="Belle" contacts />
        <k-list-item title="Benjamin" contacts />
      </k-list-group>
      <k-list-group :dividers="false">
        <k-list-item title="C" group-title contacts />
        <k-list-item title="Caiden" contacts />
        <k-list-item title="Calvin" contacts />
        <k-list-item title="Candy" contacts />
        <k-list-item title="Carl" contacts />
        <k-list-item title="Cherilyn" contacts />
        <k-list-item title="Chester" contacts />
        <k-list-item title="Chloe" contacts />
      </k-list-group>
      <k-list-group :dividers="false">
        <k-list-item title="V" group-title contacts />
        <k-list-item title="Vladimir" contacts />
      </k-list-group>
    </k-list>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kList,
    kListGroup,
    kListItem,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kList,
      kListGroup,
      kListItem,
    },

  };
</script>