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

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

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

Prop	Type	Default	Description
<List> properties
contactsList	boolean	false	Adds required additional styles for Contacts List

Examples

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

<script>
  import {Page, Navbar, List, ListGroup, ListItem} from 'framework7-svelte';
</script>