スポンサースポンサーになる
- はじめに
- イベント
- ルーター / ナビゲーション
- ストア
- コンポーネント
- アプリ / コア
- アコーディオン / 開閉可能
- アクションシート / アクション
- エリアチャート
- オートコンプリート
- バッジ
- ブロック / コンテンツブロック
- パンくずリスト
- ボタン
- カレンダー / デートピッカー
- カード
- チェックボックス
- チップ / タグ
- カラーピッカー
- 連絡先リスト
- データテーブル
- ダイアログ
- フローティングアクションボタン / FAB
- フォームデータ / ストレージ
- ゲージ
- グリッド / レイアウトグリッド
- アイコン
- 無限スクロール
- 入力 / フォーム入力
- リンク
- リストボタン
- リストビュー
- リストインデックス
- ログイン画面
- メニューリスト
- メッセージバー
- メッセージ
- ナビゲーションバー
- 通知
- ページ
- パネル / サイドパネル
- フォトブラウザ
- ピッカー
- 円グラフ
- ポップオーバー
- ポップアップ
- プリローダー
- プログレスバー
- プルダウンして更新
- ラジオボタン
- レンジスライダー
- 検索バー
- セグメント化
- シートモーダル
- スケルトン
- スマートセレクト
- ソート可能なリスト
- ステータスバー
- ステッパー
- サブナビゲーションバー
- スワイプアウト
- Swiper
- タブ
- テキストエディタ
- タイムライン
- トースト
- トグル
- ツールバー / タブバー
- ツールチップ
- ツリービュー
- ビュー / ルーター
- 仮想リスト
- Framework7アイコン
- スタイリング
- Dom7
- タッチユーティリティ
- ユーティリティ
- プラグインAPI
- 遅延読み込みモジュール
- カスタムビルド
リストビュー（テーブルビュー）
リストビューは、アプリでよく見られる汎用性の高い強力なユーザーインターフェースコンポーネントです。リストビューは、セクション/グループに分割できる複数の行のスクロール可能なリストでデータを表示します。
リストビューには多くの目的があります
- ユーザーが階層構造のデータ内を移動できるようにするため
- アイテムのインデックス付きリストを表示するため
- 詳細情報とコントロールを視覚的に区別できるグループで表示するため
- 選択可能なオプションのリストを表示するため
リストビューブロック
リストブロックは、リストビュー要素のラッパーです。
まず、すべてのリストビュー要素は<div class="list">要素で囲む必要があります
<div class="list">
<ul>
... list elements here ...
</ul>
</div>リストブロックに特別なハイライトを追加するには、追加のlist-strongクラスが必要です
<div class="list list-strong">
<!-- block content -->
</div>リストブロックの周囲にアウトライン（境界線）を追加するには、追加のlist-outlineクラスが必要です
<div class="list list-outline">
<ul>
... list elements here ...
</ul>
</div>リストアイテムの間に区切り線（境界線）を追加するには、追加の`list-dividers`クラスが必要です
<div class="list list-dividers">
<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>このようなレスポンシブクラスの完全なセットについては、グリッドドキュメントを参照してください。それらは`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` - 単一行のリストアイテムタイトル。**必須**要素です。
`item-after` - リストアイテムラベル。ラベルテキスト、バッジ、スイッチ/トグル、ボタンなど、追加のHTML要素を含めることができます。**オプション**要素です。
.item-contentは実際にはCSSフレックスボックス要素であるため、**`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 header, must be first child of item-title -->
<div class="item-header">Item header text</div>
List element title
<!-- Item footer, must be last child of 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>`item-inner`は、`item-link`内にある場合、追加の右パディングとシェブロンアイコンがレンダリングされることに注意してください
このシェブロンアイコンと追加のパディングを削除するには、リンクアイテムまたは含まれているリストに`no-chevron`クラスを追加できます
グループ化されたリスト
単一のリストブロック内でリストビュー要素をグループ化する必要がある場合があります。この場合、追加の`list-group`要素が必要です
<div class="list">
<!-- First group-->
<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>
<!-- Second group-->
<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>
シンプルなリスト
タイトルのみを持つシンプルなアイテム構造のリストが必要な場合は、シンプルなリスト変更を使用できます。この場合、プレーンな`<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 block has additional "media-list" class -->
<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` - 単一行のリストアイテムタイトル。**オプション**要素です。
`item-after` - リストアイテムラベル。ラベルテキスト、バッジ、スイッチ/トグル、ボタンなど、追加のHTML要素を含めることができます。**オプション**要素です。
`item-subtitle` - 追加の単一行タイトル。**オプション**要素です。
`item-text` - 詳細な説明のための追加の2行コンテナ。**オプション**要素です。
メディアリストでリンクアイテム（item-link）を使用すると、`item-title`のレベルにシェブロンアイコン（`>`）がレンダリングされます。このシェブロンをアイテムの中央に移動する場合は、このアイテムまたは含まれているリストに`chevron-center`クラスを追加する必要があります
CSS変数
以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。
コメント化された変数はデフォルトでは指定されておらず、その値はこの場合のフォールバック値であることに注意してください。
:root {
--f7-list-inset-side-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-line-height: inherit;
--f7-list-item-title-white-space: nowrap;
--f7-list-item-subtitle-font-weight: 400;
--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-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-font-size: inherit;
--f7-list-button-font-weight: 400;
--f7-list-button-text-align: center;
--f7-list-group-title-line-height: inherit;
--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-outline-border-color: rgba(0, 0, 0, 0.22);
--f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
--f7-list-button-border-color: rgba(255, 255, 255, 0.15);
--f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
--f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
--f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
}
.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-item-title-text-color: inherit;
--f7-list-item-subtitle-text-color: inherit;
--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-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
*/
--f7-list-group-title-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-menu-list-offset: 8px;
--f7-menu-list-border-radius: 8px;
--f7-menu-list-item-bg-color: transparent;
--f7-menu-list-item-text-color: inherit;
--f7-menu-list-item-min-height: 44px;
--f7-list-item-border-color: rgba(0, 0, 0, 0.22);
--f7-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
--f7-list-strong-bg-color: #fff;
--f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
--f7-list-item-header-text-color: inherit;
--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-group-title-text-color: rgba(0, 0, 0, 0.45);
--f7-list-group-title-bg-color: #f7f7f7;
--f7-menu-list-item-selected-text-color: var(--f7-theme-color);
--f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios .dark,
.ios.dark {
--f7-list-item-border-color: rgba(255, 255, 255, 0.15);
--f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
--f7-list-strong-bg-color: #1c1c1d;
--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-group-title-text-color: rgba(255, 255, 255, 0.55);
--f7-list-group-title-bg-color: #232323;
--f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
--f7-menu-list-item-selected-text-color: inherit;
--f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
}
.md {
--f7-list-in-list-padding-left: 24px;
--f7-list-inset-border-radius: 16px;
--f7-list-margin-vertical: 32px;
--f7-list-font-size: 16px;
--f7-list-chevron-icon-area: 26px;
--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: 12px;
--f7-list-media-item-title-font-weight: 500;
--f7-list-button-border-color: transparent;
/*
--f7-list-button-pressed-bg-color: transparent;
*/
--f7-list-group-title-border-color: transparent;
--f7-list-group-title-height: 48px;
--f7-list-group-title-font-size: 16px;
--f7-list-group-title-font-weight: 400;
--f7-menu-list-offset: 16px;
--f7-menu-list-border-radius: 999px;
--f7-menu-list-item-min-height: 56px;
--f7-list-link-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
--f7-list-outline-inset-border-color: var(--f7-md-outline);
--f7-list-item-border-color: var(--f7-md-outline);
--f7-list-item-title-text-color: var(--f7-md-on-surface);
--f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
--f7-list-group-title-bg-color: var(--f7-md-surface-2);
--f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
--f7-list-strong-bg-color: var(--f7-md-surface-1);
--f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
--f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
--f7-menu-list-item-bg-color: var(--f7-md-surface-1);
--f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
--f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
}
例
list.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">List View</div>
</div>
</div>
<div class="page-content">
<div class="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>
</div>
<div class="block-title">Simple List</div>
<div class="list list-dividers-ios simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="block-title">Strong List</div>
<div class="list list-strong list-dividers-ios simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="block-title">Strong Outline List</div>
<div class="list list-strong list-outline list-dividers-ios simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="block-title">Strong Inset List</div>
<div class="list list-strong inset list-dividers-ios simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="block-title">Strong Outline Inset List</div>
<div class="list list-strong list-outline inset list-dividers-ios simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="block-title">Simple Links List</div>
<div class="list links-list list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</div>
<div class="block-title">Data list, with icons</div>
<div class="list list-outline-ios list-strong-ios list-dividers-ios">
<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 list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a 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 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 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 list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a 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 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 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 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, no icons</div>
<div class="list list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Ivan Petrov</div>
</div>
</a>
</li>
<li>
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">John Doe</div>
</div>
</a>
</li>
<li class="list-group-title">Group Title Here</li>
<li>
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Ivan Petrov</div>
</div>
</a>
</li>
<li>
<a 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 list-outline-ios list-strong-ios list-dividers-ios">
<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 list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a 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 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 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 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 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 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">Tablet inset</div>
<div class="list list-outline-ios list-strong-ios list-dividers-ios medium-inset">
<ul>
<li>
<a 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 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 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 list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a class="item-link">
<div class="item-content">
<div class="item-media"><img style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="70" />
</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>
</div>
</a>
</li>
<li>
<a class="item-link item-content">
<div class="item-media"><img style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="70" />
</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 class="item-link item-content">
<div class="item-media"><img style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="70" />
</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 list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li>
<a 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 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 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 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 list-outline-ios list-strong-ios list-dividers-ios media-list chevron-center">
<ul>
<li>
<a 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 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 list-outline-ios list-strong-ios list-dividers-ios media-list">
<ul>
<li>
<div class="item-content">
<div class="item-media"><img style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="40" />
</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 class="item-link item-content">
<div class="item-media"><img style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="40" />
</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 style="border-radius: 8px"
src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="40" />
</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>
</div>