リストVueコンポーネント
リストビューは、アプリケーションで頻繁に見られる、多機能で強力なユーザーインターフェイスコンポーネントです。リストビューは、複数の行のスクロール可能なリストでデータを表示し、セクションやグループに分けることができます。
リストビューには多くの目的があります。
- 階層的に構造化されたデータをユーザーにナビゲートさせる。
- アイテムのインデックス付きリストを表示する
- 詳細情報やコントロールを視覚的にわかりやすいグループで表示する。
- 選択可能なオプションのリストを表示する
List Vueコンポーネントは、Framework7のリストビューコンポーネントを表しています。
リストコンポーネント
以下のコンポーネントが含まれています。
f7-list
- メインのリストビュー要素f7-list-group
- リストグループ要素
リストのプロパティ
Prop | Type | Default | Description |
---|---|---|---|
<f7-list> properties | |||
inset | boolean | false | リストブロックをインセットにする |
xsmall-inset | boolean | アプリの幅が >= 480px のとき、ブロックを挿入します。 | |
small-inset | boolean | ブロックを挿入します アプリの幅が >= 568px のときにブロックを挿入します | |
medium-inset | boolean | ブロックを挿入します アプリの幅が >= 768px のときにブロックを挿入します | |
large-inset | boolean | アプリの幅が >= 1024px のときにブロックを挿入します。 | |
xlarge-inset | boolean | アプリの幅が>>1200pxのときにブロックを挿入します。 | |
media-list | boolean | false | メディアリストを有効にします。 |
links-list | boolean | false | シンプルな リンクリスト を有効にします。 |
simple-list | boolean | false | 簡略化したSimple Listを有効にします。 |
sortable | boolean | false | ソータブルリストを有効にする |
sortable-opposite | boolean | false | ソート可能なハンドラを反対側(LTRでは左)に表示する |
sortable-tap-hold | boolean | false | アイテムのタップ&ホールド(長押し)でリストアイテムをソート可能にする。この場合、アプリはカスタムの taphold イベントに依存します。正しく動作させるためには、touch.tapHold: true も有効にしてください app parameter。 |
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 | リストブロックにではなく<form> タグを使えるようにする |
form-store-data | boolean | false | 現在のフォームで フォームストレージを使用可能にする |
inline-labels | boolean | false | フォームの入力項目でインラインスタイルのラベルを有効にする |
no-chevron | boolean | false | 入れ子になったリストアイテムのリンクの "シェブロン "アイコンを削除する |
chevron-center | boolean | false | 入れ子になったメディアのリストアイテムの "シェブロン "アイコンを中央(垂直)に設定する |
no-hairlines | boolean | false | 外側のヘアラインを削除しました。 |
no-hairlines-md | boolean | false | MDテーマの外側のヘアラインを削除しました。 |
no-hairlines-ios | boolean | false | iOSテーマの外側のhairlinesが削除されました。 |
no-hairlines-aurora | boolean | false | Auroraテーマの外側のhairlinesを削除しました。 |
no-hairlines-between | boolean | false | アイテム間の内側のhairlinesを削除しました。 |
no-hairlines-between-md | boolean | false | MDテーマの場合、アイテム間の内側のヘアラインが削除されます。 |
no-hairlines-between-ios | boolean | false | iOSテーマでは、アイテム間の内側の航空券が削除されます。 |
no-hairlines-between-aurora | boolean | false | Aurora テーマのアイテム間の内側の hairlines を削除しました。 |
tab | boolean | false | ブロックがタブとして使用される場合に「tab」クラスを追加しました。 |
tab-active | boolean | false | ブロックがTabとして使用されている場合に、"tab-active "クラスを追加し、アクティブなTabにします。 |
virtual-list | boolean | false | バーチャルリストを有効にする |
virtual-list-params | object | 仮想リストのパラメータを持つオブジェクトを有効にする | |
<f7-list-group> properties | |||
media-list | boolean | false | このグループのメディアリストを有効にする |
sortable | boolean | false | このグループでソート可能なリストを有効にする |
sortable-tap-hold | boolean | false | アイテムのタップ&ホールド(長押し)でリストアイテムをソートできるようにします。この場合、アプリはカスタムの taphold イベントに依存します。正しく動作させるためには、touch.tapHold: true が有効になっていることを確認してください app parameter。 |
simple-list | boolean | false | このグループの簡易版簡易リストを有効にします。 |
リストイベント
Event | Description |
---|---|
<f7-list> events | |
tab:show | リストブロックのタブが表示されたときにイベントが発生します。 |
tab:hide | List Block-Tabがinvisible/inactiveになるとイベントが発生します。 |
submit | リストがフォームとして使用されている場合、リストフォームの送信時にイベントが発生します(有効な form プロパティーを使用した場合) |
<f7-list> Sortable specific events | |
sortable:enable | ソート可能なモードが有効になると、イベントが発生します。 |
sortable:disable | ソート可能なモードが無効になると、イベントが発生します。 |
sortable:sort | イベントは、ユーザーが現在のソート要素を新しい位置にリリースした後に発生します。event.detail には、ソートされたリストアイテムの開始/新しいインデックス番号を持つ from と to` プロパティのオブジェクトが含まれます。 |
<f7-list> Virtual List specific events | |
virtual:itembeforeinsert | イベントは、アイテムが仮想ドキュメントフラグメントに追加される前に発生します。 |
virtual:itemsbeforeinsert | イベントは、現在のDOMリストが削除された後、新しいドキュメントが挿入される前に発生します。 |
virtual:itemsafterinsert | イベントは、アイテムを含む新しいドキュメントフラグメントが挿入された後に発生します。 |
virtual:beforeclear | イベントは、現在のDOMリストが削除され、新しいドキュメントフラグメントで置き換えられる前にトリガされます。 |
リストスロット
リストVueコンポーネント(<f7-list>
)には、カスタム要素用の追加スロットがあります。
before-list
- 要素はリストビューの最初に挿入され、<ul>
メインリストの直前に挿入されます。after-list
- 要素はリストビューの最後に挿入され、<ul>
メインリストの直後に挿入されます。list
- 要素は<ul>
メインのリスト要素の内側に挿入されます。
バーチャルリスト
仮想リストの使い方や例については、Virtual List Vue Componentのドキュメントを参照してください。
ソータブルリスト
ソート可能なリストの使用方法と例については、Sortable Vue Componentのドキュメントを参照してください。
アコーディオンリスト
アコーディオンリストの使用方法と例については、Accordion Vue Componentのドキュメントを参照してください。
Examples
<template>
<f7-page>
<f7-navbar title="List View"></f7-navbar>
<f7-block-title>Simple List</f7-block-title>
<f7-list simple-list>
<f7-list-item title="Item 1"></f7-list-item>
<f7-list-item title="Item 2"></f7-list-item>
<f7-list-item title="Item 3"></f7-list-item>
</f7-list>
<f7-block-title>Simple Links List</f7-block-title>
<f7-list>
<f7-list-item title="Link 1" link="#"></f7-list-item>
<f7-list-item title="Link 2" link="#"></f7-list-item>
<f7-list-item title="Link 3" link="#"></f7-list-item>
</f7-list>
<f7-block-title>Data list, with icons</f7-block-title>
<f7-list>
<f7-list-item title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="John Doe" badge="5">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="Jenna Smith">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Links</f7-block-title>
<f7-list>
<f7-list-item link="#" title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="John Doe" after="Cleaner">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="Jenna Smith">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Links, Header, Footer</f7-block-title>
<f7-list>
<f7-list-item link="#" header="Name" title="John Doe" after="Edit">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Links, no icons</f7-block-title>
<f7-list>
<f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
<f7-list-item link="#" title="John Doe"></f7-list-item>
<f7-list-item divider title="Divider Here"></f7-list-item>
<f7-list-item link="#" title="Ivan Petrov"></f7-list-item>
<f7-list-item link="#" title="Jenna Smith"></f7-list-item>
</f7-list>
<f7-block-title>Grouped with sticky titles</f7-block-title>
<f7-list>
<f7-list-group>
<f7-list-item title="A" group-title></f7-list-item>
<f7-list-item title="Aaron "></f7-list-item>
<f7-list-item title="Abbie"></f7-list-item>
<f7-list-item title="Adam"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="B" group-title></f7-list-item>
<f7-list-item title="Bailey"></f7-list-item>
<f7-list-item title="Barclay"></f7-list-item>
<f7-list-item title="Bartolo"></f7-list-item>
</f7-list-group>
<f7-list-group>
<f7-list-item title="C" group-title></f7-list-item>
<f7-list-item title="Caiden"></f7-list-item>
<f7-list-item title="Calvin"></f7-list-item>
<f7-list-item title="Candy"></f7-list-item>
</f7-list-group>
</f7-list>
<f7-block-title>Mixed and nested</f7-block-title>
<f7-list>
<f7-list-item link="#" title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="Two icons here">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="No icons here"></f7-list-item>
<li>
<ul>
<f7-list-item link="#" title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="Two icons here">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="No icons here"></f7-list-item>
<f7-list-item
link="#"
title="Ultra long text goes here, no, it is really really long"
>
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="With toggle">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
<template #after>
<f7-toggle></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="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="With toggle">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
<template #after>
<f7-toggle></f7-toggle>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Mixed, inset</f7-block-title>
<f7-list>
<f7-list-item link="#" title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="Two icons here">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
<f7-icon icon="demo-list-icon"></f7-icon>
</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="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item title="With toggle">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
<template #after>
<f7-toggle></f7-toggle>
</template>
</f7-list-item>
<f7-block-footer>
<p>Here comes some useful information about list above</p>
</f7-block-footer>
</f7-list>
<f7-block-title>Tablet inset</f7-block-title>
<f7-list medium-inset>
<f7-list-item link="#" title="Ivan Petrov" after="CEO">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
</template>
</f7-list-item>
<f7-list-item link="#" title="Two icons here">
<template #media>
<f7-icon icon="demo-list-icon"></f7-icon>
<f7-icon icon="demo-list-icon"></f7-icon>
</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="demo-list-icon"></f7-icon>
</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>
<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 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 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 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>
<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>
<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>
<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>
<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-item>
</f7-list>
<f7-block-title>Something more simple</f7-block-title>
<f7-list media-list>
<f7-list-item title="Yellow Submarine" subtitle="Beatles">
<template #media>
<img 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 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 src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Inset</f7-block-title>
<f7-list media-list inset>
<f7-list-item link="#" title="Yellow Submarine" subtitle="Beatles">
<template #media>
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
</template>
</f7-list-item>
<f7-list-item link="#" title="Don't Stop Me Now" subtitle="Queen">
<template #media>
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
</template>
</f7-list-item>
<f7-list-item link="#" title="Billie Jean" subtitle="Michael Jackson">
<template #media>
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
</template>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<style>
.demo-list-icon,
.icon-f7 {
background: #ccc;
display: block;
position: relative;
}
.ios .demo-list-icon,
.ios .icon-f7,
.ios .icon-vi {
width: 29px;
height: 29px;
border-radius: 6px;
box-sizing: border-box;
}
.md .demo-list-icon,
.md .icon-f7,
.md .icon-vi {
width: 24px;
height: 24px;
border-radius: 4px;
}
.aurora .demo-list-icon,
.aurora .icon-f7,
.aurora .icon-vi {
width: 18px;
height: 18px;
border-radius: 4px;
}
</style>