List Item Vue Component (リストアイテムビューコンポーネント)

リストアイテムのコンポーネント

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

f7-list-item - メインのリストアイテム要素
f7-list-item-row - カスタムレイアウト用のリストアイテムの行要素
f7-list-item-cell - カスタムレイアウトのためのリストアイテムのセル要素

リストアイテムのプロパティ

Prop	Type	Default	Description
<f7-list-item> properties
title	string		リストアイテムのタイトル
subtitle	string		リストアイテムのサブタイトル(メディアリストの場合のみ)
text	string		リストアイテムのテキスト(メディアリストの場合のみ)
header	string		リストアイテムのヘッダーテキスト
footer	string		リストアイテムのフッターテキスト
media	string		リストアイテムのメディアイメージのURL
after	string		リストアイテムのラベル
badge	string number		リストアイテムのバッジ
badge-color	string		リストアイテムのバッジの色。デフォルトの色のいずれかです。
media-item	boolean		現在のリストアイテムのメディアリストアイテムを有効にする
divider	boolean		リストアイテムをリストアイテムディバイダーに変換する
group-title	boolean		リストアイテムをリストグループのタイトルに変換する
target	boolean		リストアイテムのリンク先属性
no-chevron	boolean	false	リストアイテムリンクの "シェブロン "アイコンを削除する
chevron-center	boolean	false	メディアリストアイテムの "シェブロン "アイコンを中央(縦方向)に設定する
tooltip	string		リストボタンのtooltipテキストを、ボタンのホバー/プレス時に表示する。
tooltip-trigger	string	hover	どのようにしてツールチップを表示するかを定義します。hover`,` click`,` manual` のいずれかです。
<f7-list-item> Menu List specific properties
selected	boolean		メニューのリストアイテムが選択されているかどうか(現在アクティブかどうか)
<f7-list-item> Swipeout specific properties
swipeout	boolean		リストアイテムをスワイプアウトリストアイテムに変換します。
swipeout-opened	boolean		スワイプアクションを開くべきかどうかを定義します。なお、同時に開くことができるスワイプアウトアイテムは1つだけです。
<f7-list-item> Accordion specific properties
accordion-item	boolean	false	リストアイテムをアコーディオンリストアイテムに変換します。
accordion-item-opened	boolean	false	アコーディオンアイテムを開かせる
<f7-list-item> Sortable List specific properties
sortable	boolean		特定のリストアイテムのソートを無効にすることができます（`false`の場合）。この機能は、リストの最初か最後のアイテムに対してのみ動作し、途中のアイテムのソートを無効にすると正しく動作しないことに注意してください。
<f7-list-item> Virtual List specific properties
virtual-list-index	number		仮想リストで使用する場合、リストアイテムのインデックスを（コレクション全体から）渡すことができます。変更された正しいインデックスを知るために、Sortableと一緒に使用すると便利です。
<f7-list-item> Smart Select specific properties
smart-select	boolean	false	スマートセレクトの動作を有効にする
smart-select-params	object		スマートセレクトのパラメータを持つオブジェクト。
<f7-list-item> Checkboxes & Radios specific properties
checkbox	boolean	false	チェックボックス・アイテムを有効にする
radio	boolean	false	ラジオボタンを有効にする
radio-icon	string		ラジオアイコンの位置を、リストアイテムの最初または最後に指定することができます。start`または`end`を指定します。デフォルトでは、iOSテーマではリストアイテムの最後に、MDとAuroraテーマではリストアイテムの最初にラジオアイコンが表示されます。
checked	boolean	false	チェックボックス/ラジオ入力のチェックの有無
indeterminate	boolean		チェックボックスの入力が不確定な状態であるかどうかを定義します。
name	string		チェックボックス/ラジオの入力名
value	string number		チェックボックス/ラジオの入力値
readonly	boolean	false	チェックボックス/ラジオ入力が readonly であるかどうか
disabled	boolean	false	チェックボックス/ラジオ入力が無効であるかどうか
required	boolean	false	チェックボックス／無線入力が必須であるかどうか
<f7-list-item> navigation/router related properties
link	boolean string		文字列として指定された場合は、リンクとリンク先のURLを有効にします。href` propと同じです。
tab-link	string boolean		タブリンクを有効にして、対象となるタブのCSSセレクタを指定する（文字列として指定された場合）。
tab-link-active	boolean		このタブリンクをアクティブにする
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
open-in	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reload-current	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reload-previous	boolean		履歴の前のページをルートからの新しいページで置き換える
reload-all	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reload-detail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignore-cache	boolean		キャッシングを無視する
route-tab-id	string		Routable Tab id
route-props	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
prevent-router	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<f7-list-item> action related properties
panel-open	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panel-close	string boolean		クリックでパネルを閉じる
panel-toggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actions-open	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actions-close	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popup-open	string boolean		クリック時に開くポップアップのCSSセレクタ
popup-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popover-open	string boolean		クリックで開くポップオーバーのCSSセレクタ
popover-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheet-open	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheet-close	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
login-screen-open	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
login-screen-close	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortable-enable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortable-disable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortable-toggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbar-enable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbar-disable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbar-toggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbar-clear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
card-open	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
card-close	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
card-prevent-open	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menu-close	boolean		クリックするとメニューのドロップダウンを閉じる

リストアイテムイベント

Event	Description
<f7-list-item> events
click	ユーザーがリストアイテムをクリックしたときに発生するイベントです。
change	リストアイテムの入力（ラジオまたはチェックボックス）に「変更」イベントが発生するとイベントが発生します。
swipeout	スワイプアウト要素を移動させるとイベントが発生します。ハンドラの第一引数には、現在の開いた状態の進捗率を表す `progress` オブジェクトが含まれます。
swipeout:open	スワイプアウト要素がオープニングアニメーションを開始すると、イベントが発生します。
swipeout:opened	スワイプアウト要素のオープニングアニメーションが完了すると、イベントが発生します。
swipeout:close	イベントはスワイプアウト要素が閉じるアニメーションを開始するときに発生します。
swipeout:closed	イベントはスワイプアウト要素が閉じるアニメーションを完了した後にトリガされます。
swipeout:delete	スワイプアウト要素が削除アニメーションを開始すると、イベントが発生します。
swipeout:deleted	イベントは、swipeout 要素が削除アニメーションを完了した後、DOM から削除される直前に発生します。
accordion:beforeopen	イベントは、アコーディオンコンテンツが開くアニメーションを開始する直前に発生します。ハンドラの第1引数には、呼ばれたときにアコーディオンが開かないようにするための`prevent`関数が渡されます。
accordion:open	イベントは、アコーディオンコンテンツが開くアニメーションを開始するときに発生します。
accordion:opened	イベントは、アコーディオンコンテンツがオープニングアニメーションを完了した後に発生します。
accordion:beforeclose	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始する直前にトリガーされます。ハンドラの第1引数には、呼ばれたときにアコーディオンが閉じないようにするための `prevent` 関数が渡されます。
accordion:close	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始するときにトリガーされます。
accordion:closed	イベントは、アコーディオンコンテンツが閉じるアニメーションを完了した後に発生します。

リストアイテムのスロット

リストアイテムのVueコンポーネント（<f7-list-item>）には、カスタム要素用のスロットが追加されています。

root-start - <li> 要素の先頭に挿入されます。
root / root-end - 要素は <li> 要素の最後に挿入されます。
content-start - 要素が <div class="item-content"> 要素の先頭に挿入されます。
content / content-end - 要素は <div class="item-content"> 要素の最後に挿入されます。
inner-start - 要素は、
` 要素の最初に挿入されます。
default / inner / inner-end -
` エレメントの最後に挿入されます。
media - 要素は、
` 要素の内部に挿入されます。
before-title -
` 要素の前に表示されます。
title -
` 要素の内側に挿入されます。
after-title -
` 要素の後に挿入されます。
subtitle -
` 要素の中に挿入されます。
text -
` 要素の中に挿入されます。
header -
` 要素の中に挿入されます。
footer -
` 要素の中に挿入されます。
after-start -
` 要素の先頭に要素が挿入されます。
after / after-end -
` 要素の最後に要素が挿入されます。

<f7-list media-list>
  <f7-list-item
    link="/home/"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"
    >
      <img src="path-to-my-image.jpg" slot="media">
      <div slot="root-start">Root Start</div>
      <div slot="root">Root End</div>
      <div slot="content-start">Content Start</div>
      <div slot="content">Content End</div>
      <div slot="media-start">Media Start</div>
      <div slot="media">Media</div>
      <span slot="after-start">After Start</span>
      <span slot="after">After End</span>
      <div slot="inner-start">Inner Start</div>
      <div slot="inner">Inner End</div>
      <div slot="before-title">Before Title</div>
      <div slot="after-title">After Title</div>
  </f7-list-item>
</f7-list>

<!-- にレンダリングされます。 -->

<div class="list media-list">
  <ul>
    <li>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg">
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div>Before Title</div>
              <div class="item-title">Item Title</div>
              <div>After Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner End</div>
          </div>
          <div>Content End</div>
        </div>
      </a>
      <div>Root End</div>
    </li>
  </ul>
</div>

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>

List Item Vue Component (リストアイテム ビューコンポーネント)

リストアイテムのコンポーネント

リストアイテムのプロパティ

リストアイテムイベント

リストアイテムのスロット

Examples

List Item Vue Component (リストアイテムビューコンポーネント)