リスト・Svelte・コンポーネント

リストビューは、アプリケーションで頻繁に見られる、多機能で強力なユーザーインターフェースコンポーネントです。リストビューは、複数の行のスクロール可能なリストでデータを表示し、セクションやグループに分けることができます。

リストビューには様々な目的があります。

階層的に構造化されたデータをユーザーにナビゲートさせる。
アイテムのインデックス付きリストを表示する
詳細情報やコントロールを視覚的にわかりやすいグループで表示する。
選択可能なオプションのリストを表示する

List Svelteコンポーネントは、Framework7のリストビューコンポーネントを表しています。

リストコンポーネント

以下のコンポーネントが含まれています。

List - メインのリストビュー要素
ListGroup - リストグループ要素

リストのプロパティ

Prop	Type	Default	Description
<List> properties
ul	boolean	true	子要素を `<ul>` で囲みます。ネストした `<ListGroup>` と一緒に使用しないことを推奨します。
inset	boolean	false	リストブロックをインセットにする
xsmallInset	boolean		アプリの幅が >= 480px のとき、ブロックを挿入します。
smallInset	boolean		ブロックを挿入するアプリの幅が >= 568px のときにブロックを挿入する
mediumInset	boolean		アプリの幅が >= 768px のときにブロックを挿入する
largeInset	boolean		アプリの幅が >= 1024px のときにブロックを挿入します。
xlargeInset	boolean		アプリの幅が>>1200pxのときにブロックを挿入します。
mediaList	boolean	false	メディアリストを有効にします。
linksList	boolean	false	シンプルなリンクリストを有効にします。
simpleList	boolean	false	簡略化したSimple Listを有効にします。
sortable	boolean	false	ソータブルリストを有効にする
sortableOpposite	boolean	false	ソート可能なハンドラを反対側(LTRでは左)に表示する
sortableTapHold	boolean	false	アイテムのタップ＆ホールド（長押し）でリストアイテムをソート可能にする。この場合、アプリはカスタムの `taphold` イベントに依存します。正しく動作させるためには、`touch.tapHold: true` も有効にしてください app parameter。
sortableEnabled	boolean	false	ソート可能なリストのソートを有効にします。
sortableMoveElements	boolean		渡された場合、同じグローバルアプリパラメータ `sortable.moveElements` を上書きします。
menuList	boolean		メニューリストを有効にします。
accordion	boolean	false	アコーディオンリストを有効にします。
accordionOpposite	boolean	false	アコーディオンのシェブロン・アイコンを反対側（LTRでは左側）に表示する。
contactsList	boolean	false	連絡先リストのスタイリングに必要な追加クラスを有効にする
form	boolean	false	リストブロックに `ではなく<form>`タグを使えるようにする
formStoreData	boolean	false	現在のフォームでフォームストレージを使用可能にする
inlineLabels	boolean	false	フォームの入力項目でインラインスタイルのラベルを有効にする
noChevron	boolean	false	入れ子になったリストアイテムのリンクの "シェブロン "アイコンを削除する
chevronCenter	boolean	false	入れ子になったメディアのリストアイテムの "シェブロン "アイコンを中央（垂直）に設定する
noHairlines	boolean	false	外側のヘアラインを削除しました。
noHairlinesMd	boolean	false	MDテーマの外側のヘアラインを削除しました。
noHairlinesIos	boolean	false	iOSテーマの外側のhairlinesが削除されました。
noHairlinesAurora	boolean	false	Auroraテーマの外側のhairlinesを削除しました。
noHairlinesBetween	boolean	false	アイテム間の内側のヘアラインを削除しました。
noHairlinesBetweenMd	boolean	false	MDテーマの場合、アイテム間の内側のヘアラインが削除されます。
noHairlinesBetweenIos	boolean	false	iOSテーマでは、アイテム間の内側の航空券が削除されます。
noHairlinesBetweenAurora	boolean	false	Aurora テーマのアイテム間の内側の hairlines を削除しました。
tab	boolean	false	ブロックがタブとして使用される場合に「tab」クラスを追加しました。
tabActive	boolean	false	ブロックがTabとして使用されている場合に、"tab-active "クラスを追加し、アクティブなTabにします。
virtualList	boolean	false	バーチャルリストを有効にする
virtualListParams	object		仮想リストのパラメータを持つオブジェクトを有効にする
<ListGroup> properties
mediaList	boolean	false	このグループのメディアリストを有効にする
sortable	boolean	false	このグループでソート可能なリストを有効にする
sortableTapHold	boolean	false	アイテムのタップ＆ホールド（長押し）でリストアイテムをソートできるようにします。この場合、アプリはカスタムの `taphold` イベントに依存します。正しく動作させるためには、`touch.tapHold: true` が有効になっていることを確認してください app parameter。
simpleList	boolean	false	このグループの簡易版簡易リストを有効にします。

リストイベント

Event	Description
<List> events
tabShow	リストブロックのタブが表示されたときにイベントが発生します。
tabHide	List Block-Tabがinvisible/inactiveになると、イベントが発生します。
submit	リストがフォームとして使用されている場合、リストフォームの送信時にイベントが発生します(有効な `form` プロパティーを使用した場合)
<List> Sortable specific events
sortableEnable	ソート可能なモードが有効になると、イベントが発生します。
sortableDisable	ソート可能なモードが無効になると、イベントが発生します。
sortableSort	イベントは、ユーザーが現在のソート要素を新しい位置にリリースした後に発生します。event.detail `には、ソートされたリストアイテムの開始/新しいインデックス番号を持つ` from `と` to` プロパティを持つオブジェクトが含まれます。
<List> Virtual List specific events
virtualItemBeforeInsert	イベントは、アイテムが仮想ドキュメントフラグメントに追加される前に発生します。
virtualItemsBeforeInsert	イベントは、現在のDOMリストが削除された後、新しいドキュメントが挿入される前に発生します。
virtualItemsAfterInsert	イベントは、アイテムを含む新しいドキュメントフラグメントが挿入された後に発生します。
virtualBeforeClear	イベントは、現在のDOMリストが削除され、新しいドキュメントフラグメントで置き換えられる前にトリガされます。

リストスロット

List Svelteコンポーネント(<List>)には、カスタムエレメント用の追加スロットがあります。

before-list - 要素はリストビューの最初に挿入され、<ul>メインリストの直前に挿入されます。
after-list - 要素はリストビューの最後に挿入され、<ul> メインリストの直後に挿入されます。
list - 要素は <ul> メインのリスト要素の内側に挿入されます。

バーチャルリスト

バーチャルリストの使い方や例については、Virtual List Svelte Componentのドキュメントをご覧ください。

ソータブルリスト

ソート可能なリストの使用方法と例については、Sortable Svelte Componentのドキュメントを参照してください。

アコーディオンリスト

アコーディオンリストの使用方法と例については、Accordion Svelte Componentのドキュメントを参照してください。

Examples

<Page>
  <Navbar title="List View"></Navbar>
  <BlockTitle>Simple List</BlockTitle>
  <List simpleList>
    <ListItem title="Item 1"></ListItem>
    <ListItem title="Item 2"></ListItem>
    <ListItem title="Item 3"></ListItem>
  </List>
  <BlockTitle>Simple Links List</BlockTitle>
  <List>
    <ListItem title="Link 1" link="#"></ListItem>
    <ListItem title="Link 2" link="#"></ListItem>
    <ListItem title="Link 3" link="#"></ListItem>
  </List>
  <BlockTitle>Data list, with icons</BlockTitle>
  <List>
    <ListItem title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="John Doe" badge="5">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="Jenna Smith">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links, no icons</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov"></ListItem>
    <ListItem link="#" title="John Doe"></ListItem>
    <ListItem divider title="Divider Here"></ListItem>
    <ListItem link="#" title="Ivan Petrov"></ListItem>
    <ListItem link="#" title="Jenna Smith"></ListItem>
  </List>
  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List ul={false}>
    <ListGroup>
      <ListItem title="A" groupTitle></ListItem>
      <ListItem title="Aaron "></ListItem>
      <ListItem title="Abbie"></ListItem>
      <ListItem title="Adam"></ListItem>
    </ListGroup>
    <ListGroup>
      <ListItem title="B" groupTitle></ListItem>
      <ListItem title="Bailey"></ListItem>
      <ListItem title="Barclay"></ListItem>
      <ListItem title="Bartolo"></ListItem>
    </ListGroup>
    <ListGroup>
      <ListItem title="C" groupTitle></ListItem>
      <ListItem title="Caiden"></ListItem>
      <ListItem title="Calvin"></ListItem>
      <ListItem title="Candy"></ListItem>
    </ListGroup>
  </List>
  <BlockTitle>Mixed and nested</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="No icons here"></ListItem>
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <i slot="media" class="icon demo-list-icon" />
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem title="No icons here"></ListItem>
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon demo-list-icon" />
          <span slot="after">
            <Toggle />
          </span>
        </ListItem>
      </ul>
    </li>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon demo-list-icon" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
  <BlockTitle>Mixed, inset</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon demo-list-icon" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>Here comes some useful information about list above</p>
    </div>
  </List>
  <BlockTitle>Tablet inset</BlockTitle>
  <List mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </div>
  </List>

  <BlockTitle>Media Lists</BlockTitle>
  <Block>
    <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, users, etc.</p>
  </Block>
  <BlockTitle>Songs</BlockTitle>
  <List mediaList>
    <ListItem
      link="#"
      title="Yellow Submarine"
      after="$15"
      subtitle="Beatles"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
    </ListItem>
    <ListItem
      link="#"
      title="Don't Stop Me Now"
      after="$22"
      subtitle="Queen"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80" />
    </ListItem>
    <ListItem
      link="#"
      title="Billie Jean"
      after="$16"
      subtitle="Michael Jackson"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List mediaList>
    <ListItem
      link="#"
      title="Facebook"
      after="17:14"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    ></ListItem>
    <ListItem
      link="#"
      title="John Doe (via Twitter)"
      after="17:11"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    ></ListItem>
    <ListItem
      link="#"
      title="Facebook"
      after="16:48"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    ></ListItem>
    <ListItem
      link="#"
      title="John Doe (via Twitter)"
      after="15:32"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    ></ListItem>
  </List>
  <BlockTitle>Something more simple</BlockTitle>
  <List mediaList>
    <ListItem
      title="Yellow Submarine"
      subtitle="Beatles">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="44" />
    </ListItem>
    <ListItem
      link="#"
      title="Don't Stop Me Now"
      subtitle="Queen">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
    </ListItem>
    <ListItem
      title="Billie Jean"
      subtitle="Michael Jackson">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
    </ListItem>
  </List>
  <BlockTitle>Inset</BlockTitle>
  <List mediaList inset>
    <ListItem
      link="#"
      title="Yellow Submarine"
      subtitle="Beatles">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
    </ListItem>
    <ListItem
      link="#"
      title="Don't Stop Me Now"
      subtitle="Queen">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
    </ListItem>
    <ListItem
      link="#"
      title="Billie Jean"
      subtitle="Michael Jackson">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
    </ListItem>
  </List>
</Page>
  

<style>
  :global(.demo-list-icon, .icon-f7) {
    background: #ccc;
    display: block;
    position: relative;
  }
  :global(.ios .demo-list-icon, .ios .icon-f7, .ios .icon-vi) {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  :global(.md .demo-list-icon, .md .icon-f7, .md .icon-vi) {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  :global(.aurora .demo-list-icon, .aurora .icon-f7, .aurora .icon-vi) {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
</style>
<script>
  import {Page, Navbar, BlockTitle, List, ListItem, Icon, ListGroup, Toggle, BlockFooter, Block} from 'framework7-svelte';
</script>