連絡先リスト React コンポーネント

連絡先リストは別個のコンポーネントではなく、<List> と <ListItem> コンポーネントを使用した特定のケースです。

連絡先リストのプロパティ

プロパティ	タイプ	初期値	説明
<List> のプロパティ
contactsList	boolean	false	連絡先リストに必要な追加スタイルを追加

サンプル

contacts-list.jsx

import React from 'react';
import { Navbar, Page, List, ListGroup, ListItem } from 'framework7-react';

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

このドキュメントを改善

現在のページ

連絡先リストのプロパティ
サンプル