List Item Svelte Component（リストアイテム・Svelteコンポーネント

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

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

ListItem - メインのリストアイテム要素
ListItemRow - カスタムレイアウト用のリストアイテムの行要素
ListItemCell - カスタムレイアウト用のリストアイテムのセル要素

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

Prop	Type	Default	Description
<ListItem> properties
title	string		リストアイテムのタイトル
subtitle	string		リストアイテムのサブタイトル(メディアリストの場合のみ)
text	string		リストアイテムのテキスト(メディアリストの場合のみ)
header	string		リストアイテムのヘッダーテキスト
footer	string		リストアイテムのフッターテキスト
media	string		リストアイテムのメディアイメージのURL
after	string		リストアイテムのラベル
badge	string number		リストアイテムのバッジ
badgeColor	string		リストアイテムのバッジの色。デフォルトの色のいずれかです。
mediaItem	boolean		現在のリストアイテムのメディアリストアイテムを有効にする
divider	boolean		リストアイテムをリストアイテムディバイダーに変換する
groupTitle	boolean		リストアイテムをリストグループのタイトルに変換する
target	boolean		リストアイテムのリンク先属性
noChevron	boolean	false	リストアイテムリンクの "シェブロン "アイコンを削除する
chevronCenter	boolean	false	メディアリストアイテムの "シェブロン "アイコンを中央(縦方向)に設定する
tooltip	string		リストボタンのtooltipテキストを、ボタンのホバー/プレス時に表示する。
tooltipTrigger	string	hover	どのようにしてツールチップを表示するかを定義します。hover`,` click`,` manual` のいずれかです。
<ListItem> Menu List specific properties
selected	boolean		メニューのリストアイテムが選択されているかどうか(現在アクティブかどうか)
<ListItem> Swipeout specific properties
swipeout	boolean		リストアイテムをスワイプアウトリストアイテムに変換します。
swipeoutOpened	boolean		スワイプアクションを開くべきかどうかを定義します。なお、同時に開くことができるスワイプアウトアイテムは1つだけです。
<ListItem> Accordion specific properties
accordionItem	boolean	false	リストアイテムをアコーディオンリストアイテムに変換します。
accordionItemOpened	boolean	false	アコーディオンアイテムを開かせる
<ListItem> Sortable List specific properties
sortable	boolean		特定のリストアイテムのソートを無効にすることができます（`false`の場合）。この機能は、リストの最初か最後のアイテムに対してのみ動作し、途中のアイテムのソートを無効にすると正しく動作しないことに注意してください。
<ListItem> Virtual List specific properties
virtualListIndex	number		仮想リストで使用する場合、リストアイテムのインデックスを（コレクション全体から）渡すことができます。変更された正しいインデックスを知るために、Sortableと一緒に使用すると便利です。
<ListItem> Smart Select specific properties
smartSelect	boolean	false	スマートセレクトの動作を有効にする
smartSelectParams	object		スマートセレクトのパラメータを持つオブジェクト。
<ListItem> Checkboxes & Radios specific properties
checkbox	boolean	false	チェックボックス・アイテムを有効にする
radio	boolean	false	ラジオボタンを有効にする
radioIcon	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	チェックボックス／無線入力が必須であるかどうか
<ListItem> navigation/router related properties
link	boolean string		文字列として指定された場合は、リンクとリンク先のURLを有効にします。href` propと同じです。
tabLink	string boolean		タブリンクを有効にして、対象となるタブのCSSセレクタを指定する（文字列として指定された場合）。
tabLinkActive	boolean		このタブリンクをアクティブにする
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
openIn	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reloadCurrent	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reloadPrevious	boolean		履歴の前のページをルートからの新しいページで置き換える
reloadAll	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reloadDetail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシングを無視する
routeTabId	string		Routable Tab id
routeProps	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
preventRouter	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<ListItem> action related properties
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セレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popoverOpen	string boolean		クリックで開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheetOpen	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
loginScreenOpen	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortableEnable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortableToggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbarEnable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbarDisable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbarToggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbarClear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
cardOpen	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
cardClose	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menuClose	boolean		クリックするとメニューのドロップダウンを閉じる

リストアイテムイベント

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

リストアイテムスロット

List Item Svelteコンポーネント(<ListItem>)には、カスタムエレメント用の追加スロットがあります。

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 -
` 要素の最後に要素が挿入されます。

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

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

<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

<Page>
  <Navbar title="List View"></Navbar>
  <BlockTitle>Simple List</BlockTitle>
  <List simpleList>
    <ListItem title="Item 1"></ListItem>
    <ListItem title="Item 2"></ListItem>
    <ListItem title="Item 3"></ListItem>
  </List>
  <BlockTitle>Simple Links List</BlockTitle>
  <List>
    <ListItem title="Link 1" link="#"></ListItem>
    <ListItem title="Link 2" link="#"></ListItem>
    <ListItem title="Link 3" link="#"></ListItem>
  </List>
  <BlockTitle>Data list, with icons</BlockTitle>
  <List>
    <ListItem title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="John Doe" badge="5">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="Jenna Smith">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
  </List>
  <BlockTitle>Links, no icons</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov"></ListItem>
    <ListItem link="#" title="John Doe"></ListItem>
    <ListItem divider title="Divider Here"></ListItem>
    <ListItem link="#" title="Ivan Petrov"></ListItem>
    <ListItem link="#" title="Jenna Smith"></ListItem>
  </List>
  <BlockTitle>Grouped with sticky titles</BlockTitle>
  <List ul={false}>
    <ListGroup>
      <ListItem title="A" groupTitle></ListItem>
      <ListItem title="Aaron "></ListItem>
      <ListItem title="Abbie"></ListItem>
      <ListItem title="Adam"></ListItem>
    </ListGroup>
    <ListGroup>
      <ListItem title="B" groupTitle></ListItem>
      <ListItem title="Bailey"></ListItem>
      <ListItem title="Barclay"></ListItem>
      <ListItem title="Bartolo"></ListItem>
    </ListGroup>
    <ListGroup>
      <ListItem title="C" groupTitle></ListItem>
      <ListItem title="Caiden"></ListItem>
      <ListItem title="Calvin"></ListItem>
      <ListItem title="Candy"></ListItem>
    </ListGroup>
  </List>
  <BlockTitle>Mixed and nested</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="No icons here"></ListItem>
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <i slot="media" class="icon demo-list-icon" />
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem title="No icons here"></ListItem>
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon demo-list-icon" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon demo-list-icon" />
          <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 demo-list-icon" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon demo-list-icon" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
  <BlockTitle>Mixed, inset</BlockTitle>
  <List>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon demo-list-icon" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>Here comes some useful information about list above</p>
    </div>
  </List>
  <BlockTitle>Tablet inset</BlockTitle>
  <List mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <i slot="media" class="icon demo-list-icon" />
      <i slot="media" class="icon demo-list-icon" />
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon demo-list-icon" />
    </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 mediaList>
    <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" 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" 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" src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
    </ListItem>
  </List>
  <BlockTitle>Mail App</BlockTitle>
  <List mediaList>
    <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>
    <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>
    <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>
    <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."
    ></ListItem>
  </List>
  <BlockTitle>Something more simple</BlockTitle>
  <List mediaList>
    <ListItem
      title="Yellow Submarine"
      subtitle="Beatles">
      <img slot="media" 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" src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
    </ListItem>
    <ListItem
      title="Billie Jean"
      subtitle="Michael Jackson">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
    </ListItem>
  </List>
  <BlockTitle>Inset</BlockTitle>
  <List mediaList inset>
    <ListItem
      link="#"
      title="Yellow Submarine"
      subtitle="Beatles">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
    </ListItem>
    <ListItem
      link="#"
      title="Don't Stop Me Now"
      subtitle="Queen">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
    </ListItem>
    <ListItem
      link="#"
      title="Billie Jean"
      subtitle="Michael Jackson">
      <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
    </ListItem>
  </List>
</Page>
  

<style>
  :global(.demo-list-icon, .icon-f7) {
    background: #ccc;
    display: block;
    position: relative;
  }
  :global(.ios .demo-list-icon, .ios .icon-f7, .ios .icon-vi) {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  :global(.md .demo-list-icon, .md .icon-f7, .md .icon-vi) {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  :global(.aurora .demo-list-icon, .aurora .icon-f7, .aurora .icon-vi) {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
</style>
<script>
  import {Page, Navbar, BlockTitle, List, ListItem, Icon, ListGroup, Toggle, BlockFooter, Block} from 'framework7-svelte';
</script>