スポンサースポンサーになる

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

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

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

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

プロパティ型デフォルト説明
<f7-list-item> プロパティ
title文字列リストアイテムのタイトル
subtitle文字列リストアイテムのサブタイトル（メディアリストのみ）
text文字列リストアイテムのテキスト（メディアリストのみ）
header文字列リストアイテムの見出しテキスト
footer文字列リストアイテムのフッターテキスト
media文字列リストアイテムのメディア画像URL
after文字列リストアイテムのラベル
badge文字列
数値		リストアイテムのバッジ
badge-color文字列リストアイテムのバッジの色。デフォルトの色のいずれか
media-itemブール値現在のリストアイテムに対してメディアリストアイテムを有効にします
group-titleブール値リストアイテムをリストグループのタイトルに変換します
targetブール値リストアイテムのリンクターゲット属性
no-chevronブール値falseリストアイテムリンクの「chevron」アイコンを削除します
chevron-centerブール値falseメディアリストアイテムの「chevron」アイコンを中央（垂直方向）に設定します
tooltip文字列ボタンのホバー/押下時に表示するリストボタンのツールチップテキスト
tooltip-trigger文字列hoverツールチップのトリガー（開く）方法を定義します。hover、click、またはmanualにすることができます。
<f7-list-item> メニューリスト固有のプロパティ
selectedブール値メニューリストアイテムが選択されているかどうか（現在アクティブ）
<f7-list-item> スワイプアウト固有のプロパティ
swipeoutブール値スワイプアウトリストアイテムにリストアイテムを変換します
swipeout-openedブール値スワイプアクションを開くかどうかを定義します。一度に開くことができるスワイプアウトアイテムは1つだけです。
<f7-list-item> アコーディオン固有のプロパティ
accordion-itemブール値falseアコーディオンリストアイテムにリストアイテムを変換します
accordion-item-openedブール値falseアコーディオンアイテムを開きます
<f7-list-item> ソート可能リスト固有のプロパティ
sortableブール値特定のリストアイテムのソートを無効にすることができます（falseの場合）。これはリストの先頭または最後のアイテムでのみ意味があり、機能し、中央の一部のアイテムでソート可能を無効にすると正しく機能しません。
<f7-list-item> 仮想リスト固有のプロパティ
virtual-list-index数値仮想リストで使用する場合、リストアイテムのインデックス（コレクション全体からの）を渡すことができます。ソート可能と組み合わせて使用して、変更されたインデックスを正確に知るのに役立ちます。
<f7-list-item> スマートセレクト固有のプロパティ
smart-selectブール値falseスマートセレクトの動作を有効にします
smart-select-paramsオブジェクトスマートセレクトパラメーターを含むオブジェクト
<f7-list-item> チェックボックスとラジオボタンの固有のプロパティ
checkboxブール値falseチェックボックスアイテムを有効にします
checkbox-icon文字列チェックボックスアイコンの位置を指定できます - リストアイテムの先頭または末尾。startまたはendにすることができます。デフォルトでは、チェックボックスリストアイテムのアイコンはリストアイテムの先頭に表示されます。
radioブール値falseラジオアイテムを有効にします
radio-icon文字列ラジオアイコンの位置を指定できます - リストアイテムの先頭または末尾。startまたはendにすることができます。デフォルトでは、ラジオリストアイテムのアイコンはiOSテーマではリストアイテムの末尾に、MDテーマではリストアイテムの先頭に表示されます。
checkedブール値falseチェックボックス/ラジオボタンが入力されているかどうか
indeterminateブール値チェックボックス入力が不確定状態かどうかを定義します
name文字列チェックボックス/ラジオボタンの入力名
value文字列
数値		チェックボックス/ラジオボタンの入力値
readonlyブール値falseチェックボックス/ラジオボタンの入力が読み取り専用かどうか
disabledブール値falseチェックボックス/ラジオボタンの入力が無効かどうか
requiredブール値falseチェックボックス/ラジオボタンの入力が必須かどうか
<f7-list-item> ナビゲーション/ルーター関連のプロパティ
linkブール値
文字列		リンクとリンクURLを有効にします（文字列として指定した場合）。hrefプロパティと同じです。
tab-link文字列
ブール値		タブリンクを有効にし、ターゲットタブのCSSセレクターを指定します（文字列として指定した場合）。
tab-link-activeブール値このタブリンクをアクティブにします
href文字列
ブール値		#ロードするページのURL。ブール値の場合href="false"は、hrefタグを追加しません。
target文字列リンクターゲット属性の値、例：_blank、_selfなど。
view文字列ページをロードするビューのCSSセレクター。または、現在のビューにロードするにはcurrent。
externalブール値Framework7のリンククリックハンドラーをバイパスします。
backブール値戻るナビゲーションリンクを有効にします。
open-in文字列ページルートをモーダルまたはパネルとして開きます。popup、loginScreen、sheet、popover、またはpanelにすることができます。
forceブール値ページを強制的にロードし、履歴の前のページを無視します（backプロパティと組み合わせて使用します）。
reload-currentブール値現在アクティブなページの代わりに新しいページを再読み込みします。
reload-previousブール値履歴の前のページをルートからの新しいページに置き換えます。
reload-allブール値新しいページをロードし、履歴とDOMからすべての前のページを削除します。
reload-detailブール値マスター詳細ビューで詳細ページを再読み込みします。
animateブール値ページアニメーションを無効にします。
transition文字列カスタムページ遷移の名前
ignore-cacheブール値キャッシングを無視します。
route-tab-id文字列ルーティング可能なタブID
route-propsオブジェクトターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
prevent-routerブール値false設定されている場合、Framework7ルーターによって処理されません。
<f7-list-item> アクション関連のプロパティ
panel-open文字列
ブール値		クリック時に開くパネルのCSSセレクター。DOMに左パネルまたは右パネルのみがある場合は、leftまたはrightにすることもできます。
panel-close文字列
ブール値		クリック時にパネルを閉じます。
panel-toggle文字列
ブール値		クリック時に切り替えるパネルのCSSセレクター。DOMに左パネルまたは右パネルのみがある場合は、leftまたはrightにすることもできます。
actions-open文字列
ブール値		クリック時に開くアクションシートのCSSセレクター
actions-close文字列
ブール値		クリック時に閉じるアクションシートのCSSセレクター。または、現在開いているアクションシートを閉じるブール値プロパティ。
popup-open文字列
ブール値		クリック時に開くポップアップのCSSセレクター
popup-close文字列
ブール値		クリック時に閉じるポップアップのCSSセレクター。または、現在開いているポップアップを閉じるブール値プロパティ。
popover-open文字列
ブール値		クリック時に開くポップオーバーのCSSセレクター
popover-close文字列
ブール値		クリック時に閉じるポップオーバーのCSSセレクター。または、現在開いているポップオーバーを閉じるブール値プロパティ。
sheet-open文字列
ブール値		クリック時に開くシートモーダルのCSSセレクター
sheet-close文字列
ブール値		クリック時に閉じるシートモーダルのCSSセレクター。または、現在開いているシートモーダルを閉じるブール値プロパティ。
login-screen-open文字列
ブール値		クリック時に開くログイン画面のCSSセレクター
login-screen-close文字列
ブール値		クリック時に閉じるログイン画面のCSSセレクター。または、現在開いているログイン画面を閉じるブール値プロパティ。
sortable-enable文字列
ブール値		クリック時に有効にするソート可能リストのCSSセレクター
sortable-disable文字列
ブール値		クリック時に無効にするソート可能リストのCSSセレクター。または、現在開いているソート可能リストを閉じるブール値プロパティ。
sortable-toggle文字列
ブール値		クリック時に切り替えるソート可能リストのCSSセレクター。または、現在開いている/閉じているソート可能リストを切り替えるブール値プロパティ。
searchbar-enable文字列
ブール値		クリック時に有効にする展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを有効にするブール値プロパティ。
searchbar-disable文字列
ブール値		クリック時に無効にする展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを無効にするブール値プロパティ。
searchbar-toggle文字列
ブール値		クリック時に切り替える展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを切り替えるブール値プロパティ。
searchbar-clear文字列
ブール値		クリックでクリアする拡張可能な検索バーのCSSセレクタ。または、最初に検出された検索バーをクリアするブール型プロパティ。
card-open文字列
ブール値		クリックで開く拡張可能なカードのCSSセレクタ。または、最初に検出された拡張可能なカードを開くブール値。
card-close文字列
ブール値		クリックで閉じる拡張可能なカードのCSSセレクタ。または、現在開いている拡張可能なカードを閉じるブール型プロパティ。
card-prevent-openブール値このプロパティを持つ要素をクリックしても、その親の拡張可能なカードは開きません。

リストアイテムイベント

イベント説明
<f7-list-item> イベント
clickユーザーがリストアイテムをクリックすると、イベントがトリガーされます。
changeリストアイテムの入力（ラジオボタンまたはチェックボックス）で「change」イベントが発生すると、イベントがトリガーされます。
swipeoutswipeout要素を移動中にトリガーされるイベント。最初のハンドラー引数には、現在の開いている進捗率パーセンテージを含む`progress`オブジェクトが含まれています。
swipeout:openswipeout要素が開くアニメーションを開始すると、イベントがトリガーされます。
swipeout:openedswipeout要素が開くアニメーションを完了すると、イベントがトリガーされます。
swipeout:closeswipeout要素が閉じるアニメーションを開始すると、イベントがトリガーされます。
swipeout:closedswipeout要素が閉じるアニメーションを完了すると、イベントがトリガーされます。
swipeout:deleteswipeout要素が削除アニメーションを開始すると、イベントがトリガーされます。
swipeout:deletedswipeout要素が削除アニメーションを完了し、DOMから削除される直前にイベントがトリガーされます。
accordion:beforeopenアコーディオンの内容が開くアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数には、呼び出されるとアコーディオンが開くのを防ぐ`prevent`関数が含まれています。
accordion:openアコーディオンの内容が開くアニメーションを開始すると、イベントがトリガーされます。
accordion:openedアコーディオンの内容が開くアニメーションを完了すると、イベントがトリガーされます。
accordion:beforecloseアコーディオンの内容が閉じるアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数には、呼び出されるとアコーディオンが閉じるのを防ぐ`prevent`関数が含まれています。
accordion:closeアコーディオンの内容が閉じるアニメーションを開始すると、イベントがトリガーされます。
accordion:closedアコーディオンの内容が閉じるアニメーションを完了すると、イベントがトリガーされます。

リストアイテムスロット

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

<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>

<!-- Renders to: -->

<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>

例

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>
このドキュメントを改善する
このページについて