リスト Vue コンポーネント

リストビューは、アプリによく見られる汎用性が高く強力なユーザーインターフェースコンポーネントです。リストビューは、セクション/グループに分割できる複数の行のスクロール可能なリストにデータを表示します。

リストビューには多くの用途があります

階層的に構造化されたデータ内をユーザーが移動できるようにする
アイテムのインデックス付きリストを表示する
視覚的に異なるグループで詳細情報とコントロールを表示する
オプションの選択可能なリストを表示する

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

リストコンポーネント

次のコンポーネントが含まれています

f7-list - メインのリストビュー要素
f7-list-group - リストグループ要素

リストのプロパティ

プロパティ	型	デフォルト	説明
<f7-list> プロパティ
inset	boolean		リストをインセットにします。テーマ固有のレイアウトには`inset-ios`と`inset-md`プロパティを使用できます。
xsmall-inset	boolean		アプリの幅が480px以上のときにリストをインセットにします。テーマ固有のレイアウトには`xsmall-inset-ios`と`xsmall-inset-md`プロパティを使用できます。
small-inset	boolean		アプリの幅が568px以上のときにリストをインセットにします。テーマ固有のレイアウトには`small-inset-ios`と`small-inset-md`プロパティを使用できます。
medium-inset	boolean		アプリの幅が768px以上のときにリストをインセットにします。テーマ固有のレイアウトには`medium-inset-ios`と`medium-inset-md`プロパティを使用できます。
large-inset	boolean		アプリの幅が1024px以上のときにリストをインセットにします。テーマ固有のレイアウトには`large-inset-ios`と`large-inset-md`プロパティを使用できます。
xlarge-inset	boolean		アプリの幅が1200px以上のときにリストをインセットにします。テーマ固有のレイアウトには`xlarge-inset-ios`と`xlarge-inset-md`プロパティを使用できます。
strong	boolean		リストにハイライトを追加します。テーマ固有のレイアウトには`strong-ios`と`strong-md`プロパティを使用できます。
outline	boolean		リストをアウトライン（枠線付き）にします。テーマ固有のレイアウトには`outline-ios`と`outline-md`プロパティを使用できます。
dividers	boolean		リストアイテム間に区切り線（枠線）を追加します。テーマ固有のレイアウトには`dividers-ios`と`dividers-md`プロパティを使用できます。
media-list	boolean	false	メディアリストを有効にします
links-list	boolean	false	簡素化されたリンクリストを有効にします
simple-list	boolean	false	簡素化されたシンプルリストを有効にします
sortable	boolean	false	ソート可能なリストを有効にします
sortable-opposite	boolean	false	ソート可能なハンドラーを反対側にレンダリングします（LTRでは左側に）
sortable-tap-hold	boolean	false	アイテムのタップアンドホールド（長押し）でリストアイテムをソート可能にします。この場合、アプリはカスタムの`taphold`イベントに依存します。正しく動作させるには、`touch.tapHold: true` アプリパラメーターも有効にしていることを確認してください。
sortable-enabled	boolean	false	ソート可能なリストでのソートを有効にします
sortable-move-elements	boolean		渡された場合、同じ`sortable.moveElements`グローバルアプリパラメーターを上書きします。
menuList	boolean		メニューリストを有効にします
accordion	boolean	false	アコーディオンリストを有効にします
accordion-opposite	boolean	false	アコーディオンのケブロンアイコンを反対側にレンダリングします（LTRでは左側に）
contacts-list	boolean	false	スタイリングに必要な追加クラスを追加することで連絡先リストを有効にします
form	boolean	false	`<div>`の代わりにリストブロックに`<form>`タグを有効にします
form-store-data	boolean	false	現在のフォームにフォームストレージを有効にします
no-chevron	boolean	false	ネストされたリストアイテムリンクの「ケブロン」アイコンを削除します
chevron-center	boolean	false	ネストされたメディアリストアイテムの「ケブロン」アイコンを中央（垂直方向）に設定します
tab	boolean	false	ブロックをタブとして使用する必要がある場合に追加の「tab」クラスを追加します
tab-active	boolean	false	ブロックをタブとして使用し、アクティブなタブにする場合に追加の「tab-active」クラスを追加します
virtual-list	boolean	false	バーチャルリストを有効にします
virtual-list-params	object		バーチャルリストパラメーターを含むオブジェクト
<f7-list-group> プロパティ
media-list	boolean	false	このグループにメディアリストを有効にします
sortable	boolean	false	このグループにソート可能なリストを有効にします
sortable-tap-hold	boolean	false	アイテムのタップアンドホールド（長押し）でリストアイテムをソート可能にします。この場合、アプリはカスタムの`taphold`イベントに依存します。正しく動作させるには、`touch.tapHold: true` アプリパラメーターも有効にしていることを確認してください。
simple-list	boolean	false	このグループに簡素化されたシンプルリストを有効にします

リストイベント

イベント	説明
<f7-list> イベント
tab:show	リストブロックタブが表示/アクティブになるとトリガーされます。
tab:hide	リストブロックタブが表示されなくなるとトリガーされます。
submit	リストがフォームとして使用されている場合（`form`プロパティが有効になっている場合）、リストフォームの送信時にトリガーされます。
<f7-list> ソート固有イベント
sortable:enable	ソートモードが有効になるとトリガーされます。
sortable:disable	ソートモードが無効になるとトリガーされます。
sortable:sort	ユーザーが現在ソートしている要素を新しい位置に解放した後にトリガーされます。`event.detail`には、ソートされたリストアイテムの開始/新しいインデックス番号を含む`from`と`to`プロパティを持つオブジェクトが含まれます。
<f7-list> バーチャルリスト固有イベント
virtual:itembeforeinsert	アイテムが仮想ドキュメントフラグメントに追加される前にトリガーされます。
virtual:itemsbeforeinsert	現在のDOMリストが削除され、新しいドキュメントが挿入される前にトリガーされます。
virtual:itemsafterinsert	アイテムを含む新しいドキュメントフラグメントが挿入された後にトリガーされます。
virtual:beforeclear	現在のDOMリストが削除され、新しいドキュメントフラグメントに置き換えられる前にトリガーされます。

リストスロット

リスト Vue コンポーネント（<f7-list>）には、カスタム要素用の追加スロットがあります。

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

バーチャルリスト

バーチャルリストの使用例については、バーチャルリスト Vue コンポーネントのドキュメントを参照してください。

ソート可能なリスト

ソート可能なリストの使用例については、ソート可能 Vue コンポーネントのドキュメントを参照してください。

アコーディオンリスト

アコーディオンリストの使用例については、アコーディオン Vue コンポーネントのドキュメントを参照してください。

例

list.vue

<template>
  <f7-page>
    <f7-navbar title="List View" />
    <f7-block>
      <p>
        Framework7 allows you to be flexible with list views (table views). You can make them as
        navigation menus, you can use there icons, inputs, and any elements inside of the list, and
        even make them nested:
      </p>
    </f7-block>
    <f7-block-title>Simple List</f7-block-title>
    <f7-list simple-list dividers-ios>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong List</f7-block-title>
    <f7-list simple-list dividers-ios strong>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Outline List</f7-block-title>
    <f7-list simple-list dividers-ios strong outline>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Inset List</f7-block-title>
    <f7-list simple-list dividers-ios strong inset>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Outline Inset List</f7-block-title>
    <f7-list simple-list dividers-ios strong outline inset>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Simple Links List</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Link 1" link="#" />
      <f7-list-item title="Link 2" link="#" />
      <f7-list-item title="Link 3" link="#" />
    </f7-list>
    <f7-block-title>Data list, with icons</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="John Doe" badge="5">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="Jenna Smith">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="John Doe" after="Cleaner">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Jenna Smith">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links, Header, Footer</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" header="Name" title="John Doe" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links, no icons</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" />
      <f7-list-item link="#" title="John Doe" />
      <f7-list-item group-title title="Group Title Here" />
      <f7-list-item link="#" title="Ivan Petrov" />
      <f7-list-item link="#" title="Jenna Smith" />
    </f7-list>

    <f7-block-title>Grouped with sticky titles</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-group>
        <f7-list-item title="A" group-title />
        <f7-list-item title="Aaron " />
        <f7-list-item title="Abbie" />
        <f7-list-item title="Adam" />
      </f7-list-group>
      <f7-list-group>
        <f7-list-item title="B" group-title />
        <f7-list-item title="Bailey" />
        <f7-list-item title="Barclay" />
        <f7-list-item title="Bartolo" />
      </f7-list-group>
      <f7-list-group>
        <f7-list-item title="C" group-title />
        <f7-list-item title="Caiden" />
        <f7-list-item title="Calvin" />
        <f7-list-item title="Candy" />
      </f7-list-group>
    </f7-list>

    <f7-block-title>Mixed and nested</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Two icons here">
        <template #media>
          <f7-icon icon="icon-f7" />
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="No icons here" />
      <li>
        <ul>
          <f7-list-item link="#" title="Ivan Petrov" after="CEO">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item link="#" title="Two icons here">
            <template #media>
              <f7-icon icon="icon-f7" />
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item title="No icons here" />
          <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item title="With toggle">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
            <template #after>
              <f7-toggle />
            </template>
          </f7-list-item>
        </ul>
      </li>
      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="With toggle">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <template #after>
          <f7-toggle />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Tablet inset</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios medium-inset>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Two icons here">
        <template #media>
          <f7-icon icon="icon-f7" />
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-block-footer>
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </f7-block-footer>
    </f7-list>

    <f7-block-title>Media Lists</f7-block-title>
    <f7-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>
    </f7-block>
    <f7-block-title>Songs</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
      <f7-list-item
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
      <f7-list-item
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Mail App</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item
        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."
      />
      <f7-list-item
        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."
      />
      <f7-list-item
        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."
      />
      <f7-list-item
        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."
      />
    </f7-list>
    <f7-block-title>Something more simple</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Yellow Submarine" subtitle="Beatles">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Don't Stop Me Now" subtitle="Queen">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
      <f7-list-item title="Billie Jean" subtitle="Michael Jackson">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7List,
  f7ListItem,
  f7ListGroup,
  f7BlockFooter,
  f7Icon,
  f7Toggle,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7List,
    f7ListItem,
    f7ListGroup,
    f7BlockFooter,
    f7Icon,
    f7Toggle,
  },
};
</script>

このドキュメントを改善する

このページについて

リストコンポーネント
リストのプロパティ
リストイベント
リストスロット
バーチャルリスト
ソート可能なリスト
アコーディオンリスト
例