v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

リストビュー (テーブルビュー)

    リストビューは、アプリの中で頻繁に見られる、多機能で強力なユーザーインターフェースコンポーネントです。リストビューは、複数の行をセクションやグループに分けて、スクロール可能なリストとしてデータを表示します。

    リストビューにはさまざまな目的があります。

    • 階層的に構造化されたデータをユーザーにナビゲートさせる。
    • アイテムのインデックス付きリストを表示する
    • 詳細情報やコントロールを視覚的に分かりやすいグループで表示する。
    • 選択可能なオプションのリストを表示する

    リストビューブロック

    リストブロックは、リストビュー要素のラッパーです。

    まず、リストビューの要素は、すべて <div class="list"> 要素でラップしなければなりません。

    <div class="list">
    <ul>
        ... list elements here ...
    </ul>
</div>

    リストブロックのヘアライン(細い境界線)を消すには、追加で no-hairlines クラスが必要です。

    <div class="list no-hairlines">
    <ul>
        ... list elements here ...
    </ul>
</div>

    リストアイテム間のヘアライン(細い境界線)を削除するには、追加の no-hairlines-between クラスが必要です。

    <div class="list no-hairlines-between">
    <ul>
        ... list elements here ...
    </ul>
</div>

    リストブロックをインセットにするには、inset クラスを追加します。

    <div class="list inset">
    <ul>
        ... list elements here ...
    </ul>
</div>

    大画面でのみブロックを挿入するには、代わりに medium-inset (>= 768px) クラスを使用する必要があります。

    <div class="list medium-inset">
    <ul>
        ... list elements here ...
    </ul>
</div>

    このようなレスポンシブクラスの完全なセットについては、Grid docsをチェックしてください。それらは xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset です。

    リストアイテム

    単一のリスト要素で、かなり複雑だが柔軟なレイアウトを持つ。

    <li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon my-icon"></i>
        </div>
        <div class="item-inner">
            <div class="item-title">
                List element title
            </div>
            <div class="item-after">
                List element label
            </div>
        </div>
    </div>
</li>

    構造

    • item-content - item-media と item-inner のためのメインのフレックスラッパーです。必須要素です。

      • item-media - アイコンや画像などのメディア要素のコンテナです。オプション要素です。

      • item-inner - item-title と item-after のメインのラッパーです。必須要素です。

        • item-title - 1行のリストアイテムのタイトルです。必須要素です。

        • item-after - リストアイテムのラベルです。ラベルテキストやバッジ、スイッチ/トグルやボタンなどの追加のHTML要素を含むことができます。オプション要素です。

    • .item-content は実際には CSS flex-box 要素なので、 item-media と item-inner は item-content の直接の子でなければならないことに注意してください。

    • 同じ理由で、item-titleとitem-afterは、item-innerの直接の子供でなければなりません!

    また、リストアイテムに追加要素がない場合は、<li> 要素に item-content クラスを使用することができます。

    <li class="item-content">
    <div class="item-media">
        <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title">
            List element title
        </div>
        <div class="item-after">
            List element label
        </div>
    </div>
</li>

    リストアイテムのヘッダー/フッター

    アイテムのタイトルに加えて、リストアイテムのヘッダー/フッターテキストを追加する必要がある場合は、item-headerとitem-footer要素を使用できます。

    <li>
  <div class="item-content">
    <div class="item-media">
      <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
      <div class="item-title">
        <!-- アイテムヘッダーは、item-titleの最初の子でなければなりません。 -->
        <div class="item-header">Item header text</div>
        List element title
        <!-- アイテムフッターは item-title の最後の子でなければなりません。 -->
        <div class="item-footer">Item footer text</div>
      </div>
      <div class="item-after">...</div>
    </div>
  </div>
</li>

    アイテムのリンク

    もちろん、ほとんどの場合、リストビュー要素を他のページやデータへのリンク(<a>)として使用する必要があります。この場合、item-contentを<a class="item-link">要素でラップする必要があります。

    <li>
  <a href="#" class="item-link">
    <div class="item-content">
      <div class="item-media">...</div>
      <div class="item-inner">...</div>
    </div>
  </a>
</li>

    もし、リンクに "item-content "以外の要素が含まれていない場合は、リンクを "item-content "として使用することができます。

    <li>
  <a href="#" class="item-link item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </a>
</li>

    Note that item-inner has additional right padding and chevron icon when it is in item-link

    このシェブロンアイコンと余分なパディングを削除するには、リンクアイテムや含有リストに no-chevron クラスを追加します。

    リストボタン

    リストボタンは、シンプルなリストリンクアイテムです。

    <li>
  <a class="list-button">List Button 1</a>
</li>
<li>
  <a class="list-button">List Button 2</a>
</li>

    リストデバイダ

    リストディバイダは、シンプルなリストの要素で、タイトルを付けて、リストのアイテムを視覚的に分けることができます。

    <li class="item-divider">Divider title here</li>

    <div class="list">
  <ul>
    <!-- リストアイテム -->
    <li class="item-content">...</li>
    <li class="item-content">...</li>

    <!-- 仕切り板 -->
    <li class="item-divider">Divider title here</li>

    <!-- 別のリスト項目 -->
    <li class="item-content">...</li>
    <li class="item-content">...</li>
  </ul>
</div>

    グループ化されたリスト

    1つのリストブロックの中で、リストビューの要素をグループ化する必要がある場合があります。このような場合には、list-group 要素を追加する必要があります。

    <div class="list">
  <!-- 第一グループ-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">First group</li>
      <li class="item-content">...</li>
      <li class="item-content">...</li>
      ...
    </ul>
  </div>

  <!-- 第二グループ-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">...</li>
      <li class="item-content">...</li>
      ...
    </ul>
  </div>
</div>

    単純なディバイダーと何が違うのかと聞かれるかもしれません。リストグループでは、グループのタイトルは、1つのグループ内でのスクロール中にスティッキーな位置を持ちます。

    単純なリスト

    タイトルだけのシンプルなアイテム構造のリストが必要な場合は、シンプルリストの改造を使うことができます。この場合、プレーンな <li> アイテムのレイアウトを持つリストブロックに、追加クラス simple-list が必要です。

    <div class="list simple-list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    ...
  </ul>
</div>

    リンクリスト

    タイトルだけのシンプルなリンクアイテム構造を持つリストが必要な場合は、リンクリストの修正を使うことができます。この場合、プレーンな <li><a>...</a></li> アイテムのレイアウトを持つリストブロックに、追加のクラス links-list が必要です。

    <div class="list links-list">
  <ul>
    <li>
      <a href="#">Link Item 1</a>
    </li>
    <li>
      <a href="#">Link Item 2</a>
    </li>
    <li>
      <a href="#">Link Item 3</a>
    </li>
    ...
  </ul>
</div>

    メディアリスト

    メディアリストビューはリストビューの拡張版で、製品やサービス、ユーザーなどのより複雑なデータを表示することを目的としています。この場合、リストブロックに追加の media-list クラスが必要です。

    もちろん、レイアウトも少し複雑になります。

    <!-- メディアリストブロックには、追加の「media-list」クラスがあります。 -->
<div class="list media-list">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-media">
          <img src="path/to/img.jpg" />
        </div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Element title</div>
            <div class="item-after">Element label</div>
          </div>
          <div class="item-subtitle">Subtitle</div>
          <div class="item-text">Additional description text</div>
        </div>
      </div>
    </li>
  </ul>
</div>

    構造

    • item-content - item-media と item-inner のメインのフレックスラッパーです。必須要素です。

      • item-media - アイコンや画像などのメディア要素のコンテナです。オプションの要素です。

      • item-inner - 必須の要素です。

        • item-title-row - item-title と item-after のメインのフレックスラッパーです。オプション要素です。

          • item-title - 1行のリストアイテムのタイトルです。オプション要素です。

          • item-after - リストアイテムのラベルです。ラベルテキストやバッジ、スイッチ/トグルやボタンなどの追加のHTML要素を含むことができます。オプションの要素です。

        • item-subtitle - 追加の一行タイトルです。Optional要素です。

        • item-text - 詳細説明のための追加の2行コンテナです。オプション要素です。

    メディアリストでリンクアイテム(item-link)を使用すると、item-titleのレベルでシェブロンアイコン(>)が表示されます。このシェブロンをアイテムの中央に移動させたい場合には、このアイテムまたは包含リストに chevron-center クラスを追加する必要があります。

    カスタムテーブル風要素

    テーブルのような構造を持つカスタムリストアイテムのレイアウトが必要な場合には、追加のリスト要素 item-row と item-cell を使用することができます。

    <li class="item-content">
  <div class="item-inner item-cell">
    <div class="item-row">
      <div class="item-cell">Cell 1-1</div>
      <div class="item-cell">Cell 1-2</div>
      <div class="item-cell">Cell 1-3</div>
    </div>
    <div class="item-row">
      <div class="item-cell">Cell 2-1</div>
      <div class="item-cell">Cell 2-2</div>
    </div>
    <div class="item-row">
      <div class="item-cell">Cell 3-1</div>
      <div class="item-cell">
        <div class="item-row">
          Cell 3-2
        </div>
        <div class="item-row">
          Cell 3-3
        </div>
      </div>
    </div>
  </div>
</li>

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
  --f7-list-inset-side-margin: 16px;
  --f7-list-item-cell-margin: 16px;
  --f7-list-item-padding-horizontal: 16px;
  --f7-list-item-padding-vertical: 8px;
  --f7-list-media-item-padding-horizontal: 16px;
  --f7-list-item-text-max-lines: 2;
  --f7-list-chevron-icon-font-size: 20px;
  --f7-list-item-media-margin: 16px;
  --f7-list-item-title-font-size: inherit;
  --f7-list-item-title-font-weight: 400;
  --f7-list-item-title-text-color: inherit;
  --f7-list-item-title-line-height: inherit;
  --f7-list-item-title-white-space: nowrap;
  --f7-list-item-subtitle-font-weight: 400;
  --f7-list-item-subtitle-text-color: inherit;
  --f7-list-item-subtitle-line-height: inherit;
  --f7-list-item-text-font-weight: 400;
  --f7-list-item-after-font-weight: 400;
  --f7-list-item-after-line-height: inherit;
  --f7-list-item-header-text-color: inherit;
  --f7-list-item-header-font-size: 12px;
  --f7-list-item-header-font-weight: 400;
  --f7-list-item-header-line-height: 1.2;
  --f7-list-item-footer-font-size: 12px;
  --f7-list-item-footer-font-weight: 400;
  --f7-list-item-footer-line-height: 1.2;
  /*
  --f7-list-button-text-color: var(--f7-theme-color);
  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  */
  --f7-list-button-font-size: inherit;
  --f7-list-button-font-weight: 400;
  --f7-list-button-text-align: center;
  --f7-list-item-divider-line-height: inherit;
  --f7-list-item-divider-font-weight: 400;
  --f7-list-group-title-line-height: inherit;
  --f7-menu-list-offset: 8px;
  --f7-menu-list-border-radius: 8px;
  --f7-menu-list-font-size: 14px;
  --f7-menu-list-item-title-font-size: 14px;
  --f7-menu-list-item-title-font-weight: 500;
  --f7-menu-list-item-subtitle-font-size: 14px;
  --f7-menu-list-item-text-font-size: 14px;
  --f7-menu-list-item-after-font-size: 14px;
  --f7-list-bg-color: #fff;
  --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
  --f7-menu-list-selected-text-color: var(--f7-theme-color);
  --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
:root .theme-dark,
:root.theme-dark {
  --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-bg-color: #1c1c1d;
  --f7-list-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-item-divider-bg-color: #232323;
  --f7-list-group-title-bg-color: #232323;
  --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
  --f7-menu-list-selected-text-color: inherit;
  --f7-menu-list-selected-bg-color: var(--f7-theme-color);
}
.ios {
  --f7-list-in-list-padding-left: 30px;
  --f7-list-inset-border-radius: 8px;
  --f7-list-margin-vertical: 35px;
  --f7-list-font-size: 17px;
  --f7-list-chevron-icon-area: 20px;
  --f7-list-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-list-item-subtitle-font-size: 15px;
  --f7-list-item-text-font-size: 15px;
  --f7-list-item-text-line-height: 21px;
  --f7-list-item-after-font-size: inherit;
  --f7-list-item-after-padding: 5px;
  --f7-list-item-min-height: 44px;
  --f7-list-item-media-icons-margin: 5px;
  --f7-list-media-item-padding-vertical: 10px;
  --f7-list-media-item-title-font-weight: 600;
  --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-item-divider-height: 31px;
  --f7-list-item-divider-font-size: inherit;
  --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-group-title-height: 31px;
  --f7-list-group-title-font-size: inherit;
  --f7-list-group-title-font-weight: 400;
  --f7-list-group-title-bg-color: #f7f7f7;
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
}
.md {
  --f7-list-in-list-padding-left: 40px;
  --f7-list-inset-border-radius: 4px;
  --f7-list-margin-vertical: 32px;
  --f7-list-font-size: 16px;
  --f7-list-chevron-icon-area: 26px;
  --f7-list-border-color: rgba(0, 0, 0, 0.12);
  --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  --f7-list-item-subtitle-font-size: 14px;
  --f7-list-item-text-font-size: 14px;
  --f7-list-item-text-line-height: 20px;
  --f7-list-item-after-font-size: 14px;
  --f7-list-item-after-padding: 8px;
  --f7-list-item-min-height: 48px;
  --f7-list-item-media-icons-margin: 8px;
  --f7-list-media-item-padding-vertical: 14px;
  /*
  --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  */
  --f7-list-button-border-color: transparent;
  --f7-list-item-divider-height: 48px;
  --f7-list-item-divider-font-size: 14px;
  --f7-list-item-divider-bg-color: #f4f4f4;
  --f7-list-item-divider-border-color: transparent;
  --f7-list-group-title-height: 48px;
  --f7-list-group-title-font-size: 14px;
  --f7-list-group-title-font-weight: 400;
  --f7-list-group-title-bg-color: #f4f4f4;
  --f7-menu-list-border-radius: 4px;
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-list-item-divider-text-color: #fff;
  --f7-list-group-title-text-color: #fff;
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-list-in-list-padding-left: 16px;
  --f7-list-inset-border-radius: 8px;
  --f7-list-margin-vertical: 32px;
  --f7-list-font-size: 16px;
  --f7-list-chevron-icon-area: 20px;
  --f7-list-border-color: rgba(0, 0, 0, 0.12);
  --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  --f7-list-item-subtitle-font-size: 14px;
  --f7-list-item-text-font-size: 14px;
  --f7-list-item-text-line-height: 20px;
  --f7-list-item-after-font-size: 14px;
  --f7-list-item-after-padding: 8px;
  --f7-list-item-min-height: 48px;
  --f7-list-item-media-icons-margin: 8px;
  --f7-list-media-item-padding-vertical: 16px;
  --f7-list-media-item-title-font-weight: 600;
  --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  --f7-list-button-font-weight: 500;
  --f7-list-item-divider-height: 32px;
  --f7-list-item-divider-font-size: 14px;
  --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  --f7-list-item-divider-border-color: transparent;
  --f7-list-group-title-height: 32px;
  --f7-list-group-title-font-size: 14px;
  --f7-list-group-title-font-weight: 500;
  --f7-list-group-title-bg-color: #f7f7f7;
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
}

    Examples

    <template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">List View</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple List</div>
      <div class="list simple-list">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
      <div class="block-title">Links List</div>
      <div class="list links-list">
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </div>
      <div class="block-title">List With Icons</div>
      <div class="list">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
                <div class="item-after">CEO</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">John Doe</div>
                <div class="item-after"> <span class="badge">5</span></div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Jenna Smith</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Links</div>
      <div class="list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
                <div class="item-after">CEO</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">John Doe</div>
                <div class="item-after">Cleaner</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Jenna Smith</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Links, Header, Footer</div>
      <div class="list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">
                  <div class="item-header">Name</div>John Doe
                </div>
                <div class="item-after">Edit</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">
                  <div class="item-header">Phone</div>+7 90 111-22-3344
                </div>
                <div class="item-after">Edit</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">
                  <div class="item-header">Email</div>john@doe<div class="item-footer">Home</div>
                </div>
                <div class="item-after">Edit</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">
                  <div class="item-header">Email</div>john@framework7<div class="item-footer">Work</div>
                </div>
                <div class="item-after">Edit</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Links Without Icons</div>
      <div class="list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">John Doe</div>
              </div>
            </a>
          </li>
          <li class="item-divider">Divider Here</li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">Jenna Smith</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Grouped with sticky titles</div>
      <div class="list">
        <div class="list-group">
          <ul>
            <li class="list-group-title">A</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Aaron </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Abbie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Adam</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">B</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Bailey</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Barclay</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Bartolo</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">C</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Caiden</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Calvin</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Candy</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="block-title">Mixed and nested</div>
      <div class="list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
                <div class="item-after">CEO</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Two icons here</div>
              </div>
            </a>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">No icons here</div>
              </div>
            </div>
            <ul>
              <li>
                <a href="#" class="item-link item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">Ivan Petrov</div>
                    <div class="item-after">CEO</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item-link item-content">
                  <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">Two icons here</div>
                  </div>
                </a>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title">No icons here</div>
                  </div>
                </div>
              </li>
              <li>
                <a href="#" class="item-link item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">Ultra long text goes here, no, it is really really long</div>
                  </div>
                </a>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">With toggle</div>
                    <div class="item-after">
                      <label class="toggle toggle-init">
                        <input type="checkbox" />
                        <span class="toggle-icon"></span>
                      </label>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
              </div>
            </a>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">With toggle</div>
                <div class="item-after">
                  <label class="toggle toggle-init">
                    <input type="checkbox" />
                    <span class="toggle-icon"></span>
                  </label>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Mixed, inset</div>
      <div class="list inset">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
                <div class="item-after">CEO</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Two icons here</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
              </div>
            </a>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">With toggle</div>
                <div class="item-after">
                  <label class="toggle toggle-init">
                    <input type="checkbox" />
                    <span class="toggle-icon"></span>
                  </label>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="block-footer">
          <p>Here comes some useful information about list above</p>
        </div>
      </div>
      <div class="block-title">Tablet inset</div>
      <div class="list medium-inset">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ivan Petrov</div>
                <div class="item-after">CEO</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Two icons here</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">Ultra long text goes here, no, it is really really long</div>
              </div>
            </a>
          </li>
        </ul>
        <div class="block-footer">
          <p>This list block will look like "inset" only on tablets (iPad)</p>
        </div>
      </div>
      <div class="block-title">Media Lists</div>
      <div class="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>
      </div>
      <div class="block-title">Songs</div>
      <div class="list media-list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Yellow Submarine</div>
                  <div class="item-after">$15</div>
                </div>
                <div class="item-subtitle">Beatles</div>
                <div class="item-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.</div>
              </div>
            </a></li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Don't Stop Me Now</div>
                  <div class="item-after">$22</div>
                </div>
                <div class="item-subtitle">Queen</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Billie Jean</div>
                  <div class="item-after">$16</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Mail App</div>
      <div class="list media-list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">17:14</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">17:11</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">16:48</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">15:32</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">With centered chevron icon</div>
      <div class="list media-list chevron-center">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Facebook</div>
                  <div class="item-after">17:14</div>
                </div>
                <div class="item-subtitle">New messages from John Doe</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">John Doe (via Twitter)</div>
                  <div class="item-after">17:11</div>
                </div>
                <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                <div class="item-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.</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Something more simple</div>
      <div class="list media-list">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Yellow Submarine</div>
                </div>
                <div class="item-subtitle">Beatles</div>
              </div>
            </div>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Don't Stop Me Now</div>
                </div>
                <div class="item-subtitle">Queen</div>
              </div>
            </a>
          </li>
          <li>
            <div class="item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Billie Jean</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Inset</div>
      <div class="list media-list inset">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Yellow Submarine</div>
                </div>
                <div class="item-subtitle">Beatles</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Don't Stop Me Now</div>
                </div>
                <div class="item-subtitle">Queen</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg"
                  width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Billie Jean</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">List Buttons</div>
      <div class="list">
        <ul>
          <li><a class="list-button">Button 1</a></li>
          <li><a class="list-button">Button 2</a></li>
          <li><a class="list-button">Button 3</a></li>
        </ul>
      </div>
      <div class="block-title">Inset List Buttons</div>
      <div class="list inset">
        <ul>
          <li><a class="list-button">Button 1</a></li>
          <li><a class="list-button">Button 2</a></li>
          <li><a class="list-button">Button 3</a></li>
        </ul>
      </div>
      <div class="block-title">Custom Table-like Layout</div>
      <div class="list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner item-cell">
                <div class="item-row">
                  <div class="item-cell">Cell 1-1</div>
                  <div class="item-cell">Cell 1-2</div>
                  <div class="item-cell">Cell 1-3</div>
                </div>
                <div class="item-row">
                  <div class="item-cell">Cell 2-1</div>
                  <div class="item-cell">Cell 2-2</div>
                </div>
                <div class="item-row">
                  <div class="item-cell">Cell 3-1</div>
                  <div class="item-cell">
                    <div class="item-row">Cell 3-2</div>
                    <div class="item-row">Cell 3-3</div>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-inner item-cell">
                <div class="item-row">
                  <div class="item-cell">Cell 1-1</div>
                  <div class="item-cell">Cell 1-2</div>
                  <div class="item-cell">Cell 1-3</div>
                </div>
                <div class="item-row">
                  <div class="item-cell">Cell 2-1</div>
                  <div class="item-cell">Cell 2-2</div>
                </div>
                <div class="item-row">
                  <div class="item-cell">Cell 3-1</div>
                  <div class="item-cell">
                    <div class="item-row">Cell 3-2</div>
                    <div class="item-row">Cell 3-3</div>
                  </div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style>
  .icon-f7 {
    background: #EE350F;
    color: #fff !important;
    border-radius: 50%;
    text-align: center;
  }

  .icon-f7:before {
    content: '7';
  }

  .ios .icon-f7 {
    width: 29px;
    height: 29px;
    line-height: 29px;
  }

  .md .icon-f7 {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }
</style>