清單檢視 (表格檢視)
清單檢視是多功能且強大的使用者介面元件，在應用程式中經常可見。清單檢視會在可捲動的清單中顯示多列資料，這些資料可能會分為多個區段/群組。
清單檢視有很多用途
- 讓使用者瀏覽階層結構的資料
- 顯示索引項目清單
- 在視覺上不同的群組中顯示詳細資訊和控制項
- 顯示可選擇的選項清單
清單檢視區塊
清單區塊是清單檢視元素的包裝器。
因此，首先，所有清單檢視元素都應該用 <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 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 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>) 到其他頁面或資料。在這種情況下，我們需要使用 <a class="item-link"> 元素包裝 item-content
<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- 額外的兩行詳細說明容器。選用元素。
當您在媒體清單中使用連結項目 (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>