List Item React Component(リスト アイテム リアクト コンポーネント

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

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

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

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

    PropTypeDefaultDescription
    <ListItem> properties
    titlestringリストアイテムのタイトル
    subtitlestringリストアイテムのサブタイトル(メディアリストの場合のみ)
    textstringリストアイテムのテキスト(メディアリストの場合のみ)
    headerstringリストアイテムのヘッダーテキスト
    footerstringリストアイテムのフッターテキスト
    mediastringリストアイテムのメディアイメージのURL
    afterstringリストアイテムのラベル
    badgestring
    number
    リストアイテムのバッジ
    badgeColorstringリストアイテムのバッジの色。デフォルトの色のいずれかです。
    mediaItemboolean現在のリストアイテムのメディアリストアイテムを有効にする
    dividerbooleanリストアイテムをリストアイテムディバイダーに変換する
    groupTitlebooleanリストアイテムをリストグループのタイトルに変換する
    targetbooleanリストアイテムのリンク先属性
    noChevronbooleanfalseリストアイテムリンクの "シェブロン "アイコンを削除する
    chevronCenterbooleanfalseメディアリストアイテムの "シェブロン "アイコンを中央(縦方向)に設定する
    tooltipstringリストボタンのtooltipテキストを、ボタンのホバー/プレス時に表示する。
    tooltipTriggerstringhoverどのようにしてツールチップを開くかを定義します。hover, click, manual` のいずれかです。
    <ListItem> Menu List specific properties
    selectedbooleanメニューのリストアイテムが選択されているかどうか(現在アクティブかどうか)
    <ListItem> Swipeout specific properties
    swipeoutbooleanリストアイテムを スワイプアウトリストアイテム に変換します。
    swipeoutOpenedbooleanスワイプアクションを開くべきかどうかを定義します。なお、同時に開くことができるスワイプアウトアイテムは1つだけです。
    <ListItem> Accordion specific properties
    accordionItembooleanfalseリストアイテムをアコーディオンリストアイテムに変換します。
    accordionItemOpenedbooleanfalseアコーディオンアイテムを開かせる
    <ListItem> Sortable List specific properties
    sortableboolean特定のリストアイテムのソートを無効にすることができます(falseの場合)。この機能は、リストの最初か最後のアイテムに対してのみ動作し、途中のアイテムのソートを無効にすると正しく動作しないことに注意してください。
    <ListItem> Virtual List specific properties
    virtualListIndexnumber仮想リストで使用する場合、リストアイテムのインデックスを(コレクション全体から)渡すことができます。変更された正しいインデックスを知るために、Sortableと一緒に使用すると便利です。
    <ListItem> Smart Select specific properties
    smartSelectbooleanfalseスマートセレクトの動作を有効にする
    smartSelectParamsobjectスマートセレクトのパラメータを持つオブジェクト。
    <ListItem> Checkboxes & Radios specific properties
    checkboxbooleanfalseチェックボックス・アイテムを有効にする
    radiobooleanfalseラジオボタンを有効にする
    radioIconstringラジオアイコンの位置を、リストアイテムの最初または最後に指定することができます。startまたはend`を指定します。デフォルトでは、iOSテーマではリストアイテムの最後に、MDとAuroraテーマではリストアイテムの最初にラジオアイコンが表示されます。
    checkedbooleanfalseチェックボックス/ラジオ入力のチェックの有無
    defaultCheckedbooleanチェックボックスが制御されていないコンポーネントである場合に、チェックボックス入力をチェックするかどうかを定義します。
    indeterminatebooleanチェックボックスの入力が不確定な状態であるかどうかを定義します。
    namestringチェックボックス/ラジオ入力の名前
    valuestring
    number
    チェックボックス/ラジオ入力の値
    readonlybooleanfalseチェックボックス/ラジオの入力が読み取り専用かどうか
    disabledbooleanfalseチェックボックス/ラジオ入力が無効であるかどうか
    requiredbooleanfalseチェックボックス/無線入力が必須であるかどうか
    <ListItem> navigation/router related properties
    linkboolean
    string
    文字列として指定された場合は、リンクとリンク先のURLを有効にします。href` propと同じです。
    tabLinkstring
    boolean
    タブリンクを有効にして、対象となるタブのCSSセレクタを指定する(文字列として指定された場合)。
    tabLinkActivebooleanこのタブリンクをアクティブにする
    hrefstring
    boolean
    #ロードするページのURL。href="false"のブール値の場合は、hrefタグは追加されません。
    targetstringリンク・ターゲット属性の値、例えば、_blank_selfなど。
    viewstringページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むためのcurrent
    externalbooleanFramework7のリンク・クリック・ハンドラのバイパスを有効にする
    backbooleanバックナビゲーションリンクを有効にする
    openInstringモーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。popuploginScreensheetpopoverまたはpanelとすることができる。
    forceboolean履歴の中の前のページを無視してページを強制的にロードする (back propと一緒に使用する)
    reloadCurrentboolean現在のアクティブなページの代わりに新しいページをリロードする
    reloadPreviousboolean履歴の前のページをルートからの新しいページで置き換える
    reloadAllboolean新しいページをロードし、履歴とDOMからすべての前のページを削除する
    reloadDetailbooleanマスター詳細ビューで詳細ページを再読み込みする
    animatebooleanページのアニメーションを無効にする
    transitionstringカスタムページトランジションの名前
    ignoreCachebooleanキャッシングを無視する
    routeTabIdstringRoutable Tab id
    routePropsobject対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
    preventRouterbooleanfalse設定されている場合は、Framework7のルーターでは処理されません。
    <ListItem> action related properties
    panelOpenstring
    boolean
    クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、leftまたはrightになります。
    panelClosestring
    boolean
    クリックでパネルを閉じる
    panelTogglestring
    boolean
    クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、leftまたはrightとすることができる。
    actionsOpenstring
    boolean
    クリックされたときに開くアクション・シートの CSS セレクタ
    actionsClosestring
    boolean
    クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
    popupOpenstring
    boolean
    クリック時に開くポップアップのCSSセレクタ
    popupClosestring
    boolean
    クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
    popoverOpenstring
    boolean
    クリックで開くポップオーバーのCSSセレクタ
    popoverClosestring
    boolean
    クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
    sheetOpenstring
    boolean
    クリックで開くシートモーダルのCSSセレクタ
    sheetClosestring
    boolean
    クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
    loginScreenOpenstring
    boolean
    クリックしたときに開くログイン画面のCSSセレクタ
    loginScreenClosestring
    boolean
    クリックされたときに閉じるログイン画面のCSSセレクタ あるいは、現在開かれているログイン画面を閉じるためのboolean特性
    sortableEnablestring
    boolean
    クリックした際に有効となるソート可能なリストのCSSセレクタ
    sortableDisablestring
    boolean
    クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
    sortableTogglestring
    boolean
    クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている/閉じられているソート可能なリストをトグルするためのboolean特性
    searchbarEnablestring
    boolean
    クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
    searchbarDisablestring
    boolean
    クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
    searchbarTogglestring
    boolean
    クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
    searchbarClearstring
    boolean
    クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
    cardOpenstring
    boolean
    クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
    cardClosestring
    boolean
    クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
    cardPreventOpenbooleanこのプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
    menuClosebooleanクリックするとメニューのドロップダウンを閉じる

    リストアイテムイベント

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

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

    リストアイテムのReactコンポーネント(<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>
    
    {/* 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>
    

    Examples

    import React from 'react';
    import {
      Page,
      Navbar,
      BlockTitle,
      List,
      ListItem,
      Icon,
      ListGroup,
      Toggle,
      BlockFooter,
      Block,
    } from 'framework7-react';
    import './list-view.css';
    
    export default () => (
      
        
      <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">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem title="John Doe" badge="5">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem title="Jenna Smith">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
        </List>
        <BlockTitle>Links</BlockTitle>
        <List>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="John Doe" after="Cleaner">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Jenna Smith">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
        </List>
        <BlockTitle>Links, Header, Footer</BlockTitle>
        <List>
          <ListItem link="#" header="Name" title="John Doe" after="Edit">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
            <Icon slot="media" icon="demo-list-icon"></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>
          <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">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="demo-list-icon"></Icon>
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem title="No icons here"></ListItem>
          <li>
            <ul>
              <ListItem link="#" title="Ivan Petrov" after="CEO">
                <Icon slot="media" icon="demo-list-icon"></Icon>
              </ListItem>
              <ListItem link="#" title="Two icons here">
                <Icon slot="media" icon="demo-list-icon"></Icon>
                <Icon slot="media" icon="demo-list-icon"></Icon>
              </ListItem>
              <ListItem title="No icons here"></ListItem>
              <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
                <Icon slot="media" icon="demo-list-icon"></Icon>
              </ListItem>
              <ListItem title="With toggle">
                <Icon slot="media" icon="demo-list-icon"></Icon>
                <Toggle slot="after"></Toggle>
              </ListItem>
            </ul>
          </li>
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="demo-list-icon"></Icon>
            <Toggle slot="after"></Toggle>
          </ListItem>
        </List>
        <BlockTitle>Mixed, inset</BlockTitle>
        <List>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="demo-list-icon"></Icon>
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="demo-list-icon"></Icon>
            <Toggle slot="after"></Toggle>
          </ListItem>
          <BlockFooter>
            <p>Here comes some useful information about list above</p>
          </BlockFooter>
        </List>
        <BlockTitle>Tablet inset</BlockTitle>
        <List mediumInset>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="demo-list-icon"></Icon>
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="demo-list-icon"></Icon>
          </ListItem>
          <BlockFooter>
            <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, 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>
        
      
    );
    /* list-view.css */
    .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;
    }