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

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

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

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

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

プロパティ型デフォルト説明
<ListItem> プロパティ
title文字列リストアイテムのタイトル
subtitle文字列リストアイテムのサブタイトル（メディアリストのみ）
text文字列リストアイテムのテキスト（メディアリストのみ）
header文字列リストアイテムのヘッダーテキスト
footer文字列リストアイテムのフッターテキスト
media文字列リストアイテムのメディア画像URL
after文字列リストアイテムのラベル
badge文字列
数値		リストアイテムのバッジ
badgeColor文字列リストアイテムのバッジの色。デフォルトの色のいずれか
mediaItem真偽値現在のリストアイテムに対してメディアリストアイテムを有効にします
groupTitle真偽値リストアイテムをリストグループタイトルに変換します
target真偽値リストアイテムのリンクターゲット属性
noChevron真偽値falseリストアイテムのリンクから「シェブロン」アイコンを削除します
chevronCenter真偽値falseメディアリストアイテムの「シェブロン」アイコンを中央（垂直方向）に設定します
tooltip文字列ボタンのホバー/プレス時に表示するリストボタンのツールチップテキスト
tooltipTrigger文字列hoverツールチップをトリガー（開く）する方法を定義します。hover、click、またはmanualを指定できます
<ListItem> メニューリスト固有のプロパティ
selected真偽値メニューリストアイテムが選択されている（現在アクティブな）かどうか
<ListItem> スワイプアウト固有のプロパティ
swipeout真偽値リストアイテムをスワイプアウトリストアイテムに変換します
swipeoutOpened真偽値スワイプアクションを開くかどうかを定義します。注意、一度に開けるスワイプアウトアイテムは1つだけです
<ListItem> アコーディオン固有のプロパティ
accordionItem真偽値falseリストアイテムをアコーディオンリストアイテムに変換します
accordionItemOpened真偽値falseアコーディオンアイテムを開いた状態にします
<ListItem> ソータブルリスト固有のプロパティ
sortable真偽値特定のリストアイテムのソートを（falseの場合）無効にすることができます。ただし、これはリストの最初または最後のアイテムでのみ意味があり、機能し、途中のアイテムでソータブルを無効にした場合は正しく機能しません。
<ListItem> バーチャルリスト固有のプロパティ
virtualListIndex数値バーチャルリストで使用する場合、リストアイテムのインデックス（コレクション全体からの）を渡すことができます。ソータブルと組み合わせて、正しい変更されたインデックスを知るのに役立ちます
<ListItem> スマートセレクト固有のプロパティ
smartSelect真偽値falseスマートセレクトの動作を有効にします
smartSelectParamsオブジェクトスマートセレクトパラメーターを含むオブジェクト
<ListItem> チェックボックスとラジオ固有のプロパティ
checkbox真偽値falseチェックボックスアイテムを有効にします
checkboxIcon文字列チェックボックスアイコンの位置をリストアイテムの先頭または末尾に指定できます。startまたはendを指定できます。デフォルトでは、チェックボックスリストアイテムのアイコンはリストアイテムの先頭に表示されます。
radio真偽値falseラジオアイテムを有効にします
radioIcon文字列ラジオアイコンの位置をリストアイテムの先頭または末尾に指定できます。startまたはendを指定できます。デフォルトでは、ラジオリストアイテムのアイコンはiOSテーマではリストアイテムの末尾に、MDテーマではリストアイテムの先頭に表示されます。
checked真偽値falseチェックボックス/ラジオ入力がチェックされているかどうか
defaultChecked真偽値コントロールされていないコンポーネントの場合、チェックボックス入力がチェックされているかどうかを定義します
indeterminate真偽値チェックボックス入力が不定状態かどうかを定義します
name文字列チェックボックス/ラジオ入力の名前
value文字列
数値		チェックボックス/ラジオ入力の値
readonly真偽値falseチェックボックス/ラジオ入力が読み取り専用かどうか
disabled真偽値falseチェックボックス/ラジオ入力が無効になっているかどうか
required真偽値falseチェックボックス/ラジオ入力が必須かどうか
<ListItem> ナビゲーション/ルーター関連のプロパティ
link真偽値
文字列		リンクと、文字列で指定されている場合はリンクURLを有効にします。hrefプロパティと同じです
tabLink文字列
真偽値		タブリンクを有効にし、ターゲットタブのCSSセレクターを指定します（文字列で指定されている場合）
tabLinkActive真偽値このタブリンクをアクティブにします
href文字列
真偽値		#ロードするページのURL。ブール値href="false"の場合、hrefタグは追加されません
target文字列リンクターゲット属性の値（例：_blank、_selfなど）
view文字列ページをロードするビューのCSSセレクター。または、現在のビューにロードするにはcurrentを指定します。
external真偽値Framework7のリンククリックハンドラーをバイパスできるようにします
back真偽値戻るナビゲーションリンクを有効にします
openIn文字列ページルートをモーダルまたはパネルとして開くことができます。popup、loginScreen、sheet、popover、またはpanelを指定できます
force真偽値ページを強制的にロードし、履歴内の前のページを無視します（backプロパティと一緒に使用します）
reloadCurrent真偽値現在アクティブなページの代わりに新しいページをリロードします
reloadPrevious真偽値履歴内の前のページをルートからの新しいページに置き換えます
reloadAll真偽値新しいページをロードし、履歴とDOMから前のページをすべて削除します
reloadDetail真偽値マスター詳細ビューの詳細ページをリロードします
animate真偽値ページのアニメーションを無効にします
transition文字列カスタムページトランジションの名前
ignoreCache真偽値キャッシュを無視します
routeTabId文字列ルーティング可能なタブID
routePropsオブジェクトターゲットルートコンポーネントに渡される追加のプロパティを持つオブジェクト
preventRouter真偽値false設定した場合、Framework7ルーターによって処理されません
<ListItem> アクション関連のプロパティ
panelOpen文字列
真偽値		クリック時に開くパネルのCSSセレクター。または、DOMに左または右のパネルしかない場合はleftまたはrightにすることができます
panelClose文字列
真偽値		クリック時にパネルを閉じます
panelToggle文字列
真偽値		クリック時に切り替えるパネルのCSSセレクター。または、DOMに左または右のパネルしかない場合はleftまたはrightにすることができます
actionsOpen文字列
真偽値		クリック時に開くアクションシートのCSSセレクター
actionsClose文字列
真偽値		クリック時に閉じるアクションシートのCSSセレクター。または、現在開いているアクションシートを閉じる場合はブール値のプロパティ
popupOpen文字列
真偽値		クリック時に開くポップアップのCSSセレクター
popupClose文字列
真偽値		クリック時に閉じるポップアップのCSSセレクター。または、現在開いているポップアップを閉じる場合はブール値のプロパティ
popoverOpen文字列
真偽値		クリック時に開くポップオーバーのCSSセレクター
popoverClose文字列
真偽値		クリック時に閉じるポップオーバーのCSSセレクター。または、現在開いているポップオーバーを閉じる場合はブール値のプロパティ
sheetOpen文字列
真偽値		クリック時に開くシートモーダルのCSSセレクター
sheetClose文字列
真偽値		クリック時に閉じるシートモーダルのCSSセレクター。または、現在開いているシートモーダルを閉じる場合はブール値のプロパティ
loginScreenOpen文字列
真偽値		クリック時に開くログイン画面のCSSセレクター
loginScreenClose文字列
真偽値		クリック時に閉じるログイン画面のCSSセレクター。または、現在開いているログイン画面を閉じる場合はブール値のプロパティ
sortableEnable文字列
真偽値		クリック時に有効にするソータブルリストのCSSセレクター
sortableDisable文字列
真偽値		クリック時に無効にするソータブルリストのCSSセレクター。または、現在開いているソータブルリストを閉じる場合はブール値のプロパティ
sortableToggle文字列
真偽値		クリック時に切り替えるソータブルリストのCSSセレクター。または、現在開いている/閉じているソータブルリストを切り替える場合はブール値のプロパティ
searchbarEnable文字列
真偽値		クリック時に有効にする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを有効にする場合はブール値のプロパティ
searchbarDisable文字列
真偽値		クリック時に無効にする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを無効にする場合はブール値のプロパティ
searchbarToggle文字列
真偽値		クリック時に切り替える展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーを切り替える場合はブール値のプロパティ
searchbarClear文字列
真偽値		クリック時にクリアする展開可能な検索バーのCSSセレクター。または、最初に見つかった検索バーをクリアする場合はブール値のプロパティ
cardOpen文字列
真偽値		クリック時に開く展開可能なカードのCSSセレクター。または、最初に見つかった展開可能なカードを開く場合はブール値
cardClose文字列
真偽値		クリック時に閉じる展開可能なカードのCSSセレクター。または、現在開いている展開可能なカードを閉じる場合はブール値のプロパティ
cardPreventOpen真偽値このプロパティを持つ要素をクリックしても、親の展開可能なカードは開きません。

リスト項目のイベント

イベント説明
<ListItem> イベント
clickユーザーがリスト項目をクリックしたときにトリガーされるイベント
changeリスト項目の入力（ラジオボタンまたはチェックボックス）で「change」イベントが発生したときにトリガーされるイベント
swipeoutスワイプアウト要素を移動中にトリガーされるイベント。最初のハンドラー引数には、現在開いている進捗率を示すprogressオブジェクトが含まれます。
swipeoutOpenスワイプアウト要素がオープンアニメーションを開始したときにトリガーされるイベント
swipeoutOpenedスワイプアウト要素がオープンアニメーションを完了した後にトリガーされるイベント
swipeoutCloseスワイプアウト要素がクローズアニメーションを開始したときにトリガーされるイベント
swipeoutClosedスワイプアウト要素がクローズアニメーションを完了した後にトリガーされるイベント
swipeoutDeleteスワイプアウト要素が削除アニメーションを開始した後にトリガーされるイベント
swipeoutDeletedスワイプアウト要素が削除アニメーションを完了し、DOMから削除される直前にトリガーされるイベント
accordionBeforeOpenアコーディオンコンテンツがオープンアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数は、呼び出されたときにアコーディオンのオープンを防止するprevent関数を受け取ります。
accordionOpenアコーディオンコンテンツがオープンアニメーションを開始したときにトリガーされるイベント。
accordionOpenedアコーディオンコンテンツがオープンアニメーションを完了した後にトリガーされるイベント。
accordionBeforeCloseアコーディオンコンテンツがクローズアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数は、呼び出されたときにアコーディオンのクローズを防止するprevent関数を受け取ります。
accordionCloseアコーディオンコンテンツがクローズアニメーションを開始したときにトリガーされるイベント。
accordionClosedアコーディオンコンテンツがクローズアニメーションを完了した後にトリガーされるイベント。

リスト項目のスロット

リスト項目のReactコンポーネント（<ListItem>）には、カスタム要素用の追加のスロットがあります

<List mediaList>
  <ListItem
    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>
  </ListItem>
</List>

{/* Renders to: */}

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

例

list.jsx
import React from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  BlockFooter,
  Block,
  List,
  ListItem,
  ListGroup,
  Icon,
  Toggle,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="List View" />
    <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>
    </Block>
    <BlockTitle>Simple List</BlockTitle>
    <List dividersIos simpleList>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong List</BlockTitle>
    <List dividersIos simpleList strong>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Outline List</BlockTitle>
    <List dividersIos simpleList strong outline>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Inset List</BlockTitle>
    <List dividersIos simpleList strong inset>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Outline Inset List</BlockTitle>
    <List dividersIos simpleList strong outline inset>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Simple Links List</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem title="Link 1" link="#" />
      <ListItem title="Link 2" link="#" />
      <ListItem title="Link 3" link="#" />
    </List>
    <BlockTitle>Data list, with icons</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="John Doe" badge="5">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="John Doe" after="Cleaner">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, Header, Footer</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" header="Name" title="John Doe" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, no icons</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" />
      <ListItem link="#" title="John Doe" />
      <ListItem groupTitle title="Group Title Here" />
      <ListItem link="#" title="Ivan Petrov" />
      <ListItem link="#" title="Jenna Smith" />
    </List>
    <BlockTitle>Grouped with sticky titles</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListGroup>
        <ListItem title="A" groupTitle />
        <ListItem title="Aaron " />
        <ListItem title="Abbie" />
        <ListItem title="Adam" />
      </ListGroup>
      <ListGroup>
        <ListItem title="B" groupTitle />
        <ListItem title="Bailey" />
        <ListItem title="Barclay" />
        <ListItem title="Bartolo" />
      </ListGroup>
      <ListGroup>
        <ListItem title="C" groupTitle />
        <ListItem title="Caiden" />
        <ListItem title="Calvin" />
        <ListItem title="Candy" />
      </ListGroup>
    </List>
    <BlockTitle>Mixed and nested</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="No icons here" />
      <li>
        <ul>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="icon-f7" />
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="No icons here" />
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="icon-f7" />
            <Toggle slot="after" />
          </ListItem>
        </ul>
      </li>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="With toggle">
        <Icon slot="media" icon="icon-f7" />
        <Toggle slot="after" />
      </ListItem>
    </List>

    <BlockTitle>Tablet inset</BlockTitle>
    <List dividersIos outlineIos strongIos mediumInset>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <BlockFooter slot="after-list">
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </BlockFooter>
    </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, user, etc.
      </p>
    </Block>
    <BlockTitle>Songs</BlockTitle>
    <List dividersIos mediaList outlineIos strongIos>
      <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"
          style={{ borderRadius: '8px' }}
          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"
          style={{ borderRadius: '8px' }}
          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"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
          width="80"
        />
      </ListItem>
    </List>
    <BlockTitle>Mail App</BlockTitle>
    <List dividersIos mediaList outlineIos strongIos>
      <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
        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
        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
        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."
      />
    </List>
    <BlockTitle>Something more simple</BlockTitle>
    <List dividersIos mediaList outlineIos strongIos>
      <ListItem title="Yellow Submarine" subtitle="Beatles">
        <img
          slot="media"
          style={{ borderRadius: '8px' }}
          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"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
          width="44"
        />
      </ListItem>
      <ListItem title="Billie Jean" subtitle="Michael Jackson">
        <img
          slot="media"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
          width="44"
        />
      </ListItem>
    </List>
  </Page>
);
ドキュメントを改善する
このページについて