Contact List

Contacts List is not a separate component, but just a particular case of using List View (List and List Item Vue components).

Examples

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>

React

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListGroup,
  ListItem,
} from 'konsta/react';

export default function ContactsListPage() {
  return (
    <Page>
      <Navbar
        title="Contacts List"
        />
      <List strongIos>
        <ListGroup dividers={false}>
          <ListItem title="A" groupTitle contacts />
          <ListItem title="Aaron" contacts />
          <ListItem title="Abbie" contacts />
          <ListItem title="Adam" contacts />
          <ListItem title="Adele" contacts />
          <ListItem title="Agatha" contacts />
          <ListItem title="Agnes" contacts />
          <ListItem title="Albert" contacts />
          <ListItem title="Alexander" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="B" groupTitle contacts />
          <ListItem title="Bailey" contacts />
          <ListItem title="Barclay" contacts />
          <ListItem title="Bartolo" contacts />
          <ListItem title="Bellamy" contacts />
          <ListItem title="Belle" contacts />
          <ListItem title="Benjamin" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="C" groupTitle contacts />
          <ListItem title="Caiden" contacts />
          <ListItem title="Calvin" contacts />
          <ListItem title="Candy" contacts />
          <ListItem title="Carl" contacts />
          <ListItem title="Cherilyn" contacts />
          <ListItem title="Chester" contacts />
          <ListItem title="Chloe" contacts />
        </ListGroup>
        <ListGroup dividers={false}>
          <ListItem title="V" groupTitle contacts />
          <ListItem title="Vladimir" contacts />
        </ListGroup>
      </List>
    </Page>
  );
}