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

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

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

ListItem - メインのリストアイテム要素

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

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

リストアイテムのイベント

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

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

リストアイテムのSvelteコンポーネント（<ListItem>）には、カスタム要素のための追加スロットがあります。

root-start - <li>要素の先頭に要素が挿入されます。
root / root-end - <li>要素の末尾に要素が挿入されます。
content-start - <div class="item-content">要素の先頭に要素が挿入されます。
content / content-end - <div class="item-content">要素の末尾に要素が挿入されます。
inner-start - <div class="item-inner">要素の先頭に要素が挿入されます。
default / inner / inner-end - <div class="item-inner">要素の末尾に要素が挿入されます。
media - <div class="item-media">要素内に要素が挿入されます。
before-title - <div class="item-title">要素の前に要素が挿入されます。
title - <div class="item-title">要素内に要素が挿入されます。
after-title - <div class="item-title">要素の後に要素が挿入されます。
subtitle - <div class="item-subtitle">要素内に要素が挿入されます。
text - <div class="item-text">要素内に要素が挿入されます。
header - <div class="item-header">要素内に要素が挿入されます。
footer - <div class="item-footer">要素内に要素が挿入されます。
after-start - <div class="item-after">要素の先頭に要素が挿入されます。
after / after-end - <div class="item-after">要素の末尾に要素が挿入されます。

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

<script>
  import {
    Navbar,
    Page,
    BlockTitle,
    Block,
    List,
    ListItem,
    ListGroup,
    Toggle,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-invalid-attribute -->
<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"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="John Doe" badge="5"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="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 ul={false}>
    <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">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem title="No icons here" />
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <svelte:fragment slot="media">
            <i class="icon icon-f7" />
            <i class="icon icon-f7" />
          </svelte:fragment>
        </ListItem>
        <ListItem title="No icons here" />
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon icon-f7" />
          <span slot="after">
            <Toggle />
          </span>
        </ListItem>
      </ul>
    </li>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon icon-f7" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Tablet inset</BlockTitle>
  <List dividersIos outlineIos strongIos mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </div>
  </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, users, 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
        width="44"
      />
    </ListItem>
  </List>
</Page>

ドキュメントを改善する

このページについて

リストアイテムコンポーネント
リストアイテムのプロパティ
リストアイテムのイベント
リストアイテムのスロット
例