Перегляд списку
Перегляди списків — це універсальні та потужні компоненти інтерфейсу користувача, які часто зустрічаються в застосунках. Перегляд списку представляє дані у прокручуваному списку з кількох рядків, які можна розділити на розділи/групи.
Перегляди списку мають багато цілей:
● Щоб дозволити користувачам переміщатися між ієрархічно структурованими даними
● Щоб представити проіндексований список елементів
● Для відображення детальної інформації та елементів керування у візуально чітких групах
● Щоб представити список опцій для вибору
Блок перегляду списку
Блок списку — це обгортка елементів перегляду списку.
Отже, перш за все, усі ваші елементи представлення списку мають бути обгорнуті елементом
<div class="list">:
<div class="list">
<ul>
... Елементи списку тут ...
</ul>
</div>Щоб видалити тонкі лінії (тонкі рамки) навколо блоку списку, нам потрібен додатковий клас
no-hairlines ліній:<div class="list no-hairlines">
<ul>
... Елементи списку тут...
</ul>
</div>
Щоб видалити тонкі лінії (тонкі межі) між елементами списку, нам потрібен додатковий клас
no-hairline-between:<div class="list no-hairlines-between">
<ul>
... Елементи списку тут...
</ul>
</div>
Щоб зробити вставку блоку списку, нам потрібен додатковий клас вставки
inset:<div class="list inset">
<ul>
... Елементи списку тут...
</ul>
</div>Щоб зробити блочну вставку лише на великих екранах, нам потрібно замість цього використовувати клас
medium-inset (>= 768px):<div class="list medium-inset">
<ul>
... Елементи списку тут...
</ul>
</div>
Щоб отримати повний набір таких адаптивних класів, перегляньте документи розділу Grid Layout. Вони бувають
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">
Заголовок елементу списку
</div>
<div class="item-after">
Якрлик елементу списку
</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!
Також зауважте, що якщо ваш елемент списку не має нічого додаткового, ви можете використовувати клас
item-content для елемента <li>:<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 до елемента посилання або до списку вмісту
Кнопка списку
Кнопка «Список» — це спрощений елемент посилання на список, корисний у випадку, якщо вам потрібно запустити прості дії, які самостійно пояснюються:
<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>
<!-- List items -->
<li class="item-content">...</li>
<li class="item-content">...</li>
<!-- Divider -->
<li class="item-divider">Divider title here</li>
<!-- Another list items -->
<li class="item-content">...</li>
<li class="item-content">...</li>
</ul>
</div>Згруповані списки
Іноді нам потрібно згрупувати елементи перегляду списку всередині одного блоку списку. У цьому випадку нам потрібно додати додаткові елементи списку
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>Ви можете запитати, чим відрізняються від простих роздільників?У групах списків заголовки груп мають закріплене положення під час прокручування в одній групі.
Простий список
Якщо нам потрібен список із простою структурою елементів, який має лише заголовки, ми можемо використати модифікацію
Simple List. У цьому випадку нам потрібен додатковий клас простий список simple-list у блоці списку зі звичайним макетом елементів <li>:<div class="list simple-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
...
</ul>
</div>Список посилань
Якщо нам потрібен список із простою структурою елементів посилань, які мають лише заголовки, ми можемо використати модифікацію списку посилань. У цьому випадку нам потрібен додатковий список посилань
links-list на класу блоці списку зі звичайним макетом елементів <li><a>...</a></li>:<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-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
Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
--t4-list-inset-side-margin: 16px;
--t4-list-item-cell-margin: 16px;
--t4-list-item-padding-horizontal: 16px;
--t4-list-item-padding-vertical: 8px;
--t4-list-media-item-padding-horizontal: 16px;
--t4-list-item-text-max-lines: 2;
--t4-list-chevron-icon-font-size: 20px;
--t4-list-item-media-margin: 16px;
--t4-list-item-title-font-size: inherit;
--t4-list-item-title-font-weight: 400;
--t4-list-item-title-text-color: inherit;
--t4-list-item-title-line-height: inherit;
--t4-list-item-title-white-space: nowrap;
--t4-list-item-subtitle-font-weight: 400;
--t4-list-item-subtitle-text-color: inherit;
--t4-list-item-subtitle-line-height: inherit;
--t4-list-item-text-font-weight: 400;
--t4-list-item-after-font-weight: 400;
--t4-list-item-after-line-height: inherit;
--t4-list-item-header-text-color: inherit;
--t4-list-item-header-font-size: 12px;
--t4-list-item-header-font-weight: 400;
--t4-list-item-header-line-height: 1.2;
--t4-list-item-footer-font-size: 12px;
--t4-list-item-footer-font-weight: 400;
--t4-list-item-footer-line-height: 1.2;
/*
--t4-list-button-text-color: var(--t4-theme-color);
--t4-list-button-pressed-bg-color: rgba(var(--t4-theme-color-rgb), .15);
*/
--t4-list-button-font-size: inherit;
--t4-list-button-font-weight: 400;
--t4-list-button-text-align: center;
--t4-list-item-divider-line-height: inherit;
--t4-list-item-divider-font-weight: 400;
--t4-list-group-title-line-height: inherit;
--t4-menu-list-offset: 8px;
--t4-menu-list-border-radius: 8px;
--t4-menu-list-font-size: 14px;
--t4-menu-list-item-title-font-size: 14px;
--t4-menu-list-item-title-font-weight: 500;
--t4-menu-list-item-subtitle-font-size: 14px;
--t4-menu-list-item-text-font-size: 14px;
--t4-menu-list-item-after-font-size: 14px;
--t4-list-bg-color: #fff;
--t4-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
--t4-menu-list-selected-text-color: var(--t4-theme-color);
--t4-menu-list-selected-bg-color: rgba(var(--t4-theme-color-rgb), 0.15);
}
:root .dark,
:root.dark {
--t4-list-button-border-color: rgba(255, 255, 255, 0.15);
--t4-list-bg-color: #1c1c1d;
--t4-list-border-color: rgba(255, 255, 255, 0.15);
--t4-list-item-border-color: rgba(255, 255, 255, 0.15);
--t4-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
--t4-list-item-divider-bg-color: #232323;
--t4-list-group-title-bg-color: #232323;
--t4-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
--t4-menu-list-selected-text-color: inherit;
--t4-menu-list-selected-bg-color: var(--t4-theme-color);
}
.ios {
--t4-list-in-list-padding-left: 30px;
--t4-list-inset-border-radius: 8px;
--t4-list-margin-vertical: 35px;
--t4-list-font-size: 17px;
--t4-list-chevron-icon-area: 20px;
--t4-list-border-color: rgba(0, 0, 0, 0.22);
--t4-list-item-border-color: rgba(0, 0, 0, 0.22);
--t4-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
--t4-list-item-subtitle-font-size: 15px;
--t4-list-item-text-font-size: 15px;
--t4-list-item-text-line-height: 21px;
--t4-list-item-after-font-size: inherit;
--t4-list-item-after-padding: 5px;
--t4-list-item-min-height: 44px;
--t4-list-item-media-icons-margin: 5px;
--t4-list-media-item-padding-vertical: 10px;
--t4-list-media-item-title-font-weight: 600;
--t4-list-button-border-color: rgba(0, 0, 0, 0.22);
--t4-list-item-divider-height: 31px;
--t4-list-item-divider-font-size: inherit;
--t4-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
--t4-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
--t4-list-group-title-height: 31px;
--t4-list-group-title-font-size: inherit;
--t4-list-group-title-font-weight: 400;
--t4-list-group-title-bg-color: #f7f7f7;
--t4-list-item-after-text-color: rgba(0, 0, 0, 0.45);
--t4-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
--t4-list-item-text-text-color: rgba(0, 0, 0, 0.45);
--t4-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
--t4-list-group-title-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
--t4-list-item-after-text-color: rgba(255, 255, 255, 0.55);
--t4-list-item-header-text-color: rgba(255, 255, 255, 0.55);
--t4-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
--t4-list-item-text-text-color: rgba(255, 255, 255, 0.55);
--t4-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
--t4-list-group-title-text-color: rgba(255, 255, 255, 0.55);
--t4-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
}
.md {
--t4-list-in-list-padding-left: 40px;
--t4-list-inset-border-radius: 4px;
--t4-list-margin-vertical: 32px;
--t4-list-font-size: 16px;
--t4-list-chevron-icon-area: 26px;
--t4-list-border-color: rgba(0, 0, 0, 0.12);
--t4-list-item-border-color: rgba(0, 0, 0, 0.12);
--t4-list-item-subtitle-font-size: 14px;
--t4-list-item-text-font-size: 14px;
--t4-list-item-text-line-height: 20px;
--t4-list-item-after-font-size: 14px;
--t4-list-item-after-padding: 8px;
--t4-list-item-min-height: 48px;
--t4-list-item-media-icons-margin: 8px;
--t4-list-media-item-padding-vertical: 14px;
/*
--t4-list-media-item-title-font-weight: var(--t4-list-item-title-font-weight);
*/
--t4-list-button-border-color: transparent;
--t4-list-item-divider-height: 48px;
--t4-list-item-divider-font-size: 14px;
--t4-list-item-divider-bg-color: #f4f4f4;
--t4-list-item-divider-border-color: transparent;
--t4-list-group-title-height: 48px;
--t4-list-group-title-font-size: 14px;
--t4-list-group-title-font-weight: 400;
--t4-list-group-title-bg-color: #f4f4f4;
--t4-menu-list-border-radius: 4px;
--t4-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
--t4-list-item-text-text-color: rgba(0, 0, 0, 0.54);
--t4-list-item-after-text-color: rgba(0, 0, 0, 0.54);
--t4-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
--t4-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
--t4-list-group-title-text-color: rgba(0, 0, 0, 0.54);
}
.md .dark,
.md.dark {
--t4-list-item-divider-text-color: #fff;
--t4-list-group-title-text-color: #fff;
--t4-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
--t4-list-item-text-text-color: rgba(255, 255, 255, 0.54);
--t4-list-item-after-text-color: rgba(255, 255, 255, 0.54);
--t4-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
--t4-list-in-list-padding-left: 16px;
--t4-list-inset-border-radius: 8px;
--t4-list-margin-vertical: 32px;
--t4-list-font-size: 16px;
--t4-list-chevron-icon-area: 20px;
--t4-list-border-color: rgba(0, 0, 0, 0.12);
--t4-list-item-border-color: rgba(0, 0, 0, 0.12);
--t4-list-item-subtitle-font-size: 14px;
--t4-list-item-text-font-size: 14px;
--t4-list-item-text-line-height: 20px;
--t4-list-item-after-font-size: 14px;
--t4-list-item-after-padding: 8px;
--t4-list-item-min-height: 48px;
--t4-list-item-media-icons-margin: 8px;
--t4-list-media-item-padding-vertical: 16px;
--t4-list-media-item-title-font-weight: 600;
--t4-list-button-border-color: rgba(0, 0, 0, 0.12);
--t4-list-button-font-weight: 500;
--t4-list-item-divider-height: 32px;
--t4-list-item-divider-font-size: 14px;
--t4-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
--t4-list-item-divider-border-color: transparent;
--t4-list-group-title-height: 32px;
--t4-list-group-title-font-size: 14px;
--t4-list-group-title-font-weight: 500;
--t4-list-group-title-bg-color: #f7f7f7;
--t4-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
--t4-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
--t4-list-item-text-text-color: rgba(0, 0, 0, 0.6);
--t4-list-item-after-text-color: rgba(0, 0, 0, 0.5);
--t4-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
--t4-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
--t4-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
--t4-list-group-title-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .dark,
.aurora.dark {
--t4-list-item-text-text-color: rgba(255, 255, 255, 0.54);
--t4-list-item-after-text-color: rgba(255, 255, 255, 0.54);
--t4-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
--t4-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
--t4-list-group-title-text-color: rgba(255, 255, 255, 0.6);
--t4-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
--t4-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
--t4-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
}Приклади
<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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></i></div>
<div class="item-inner">
<div class="item-title">
<div class="item-header">Email</div>john@techno4<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-t4"></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-t4"></i><i class="icon icon-t4"></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-t4"></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-t4"></i><i class="icon icon-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></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-t4"></i><i class="icon icon-t4"></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-t4"></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-t4"></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-t4"></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-t4"></i><i class="icon icon-t4"></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-t4"></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.techno4.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.techno4.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.techno4.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.techno4.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.techno4.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.techno4.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.techno4.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.techno4.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.techno4.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-t4 {
background: #EE350F;
color: #fff !important;
border-radius: 50%;
text-align: center;
}
.icon-t4:before {
content: '7';
}
.ios .icon-t4 {
width: 29px;
height: 29px;
line-height: 29px;
}
.md .icon-t4 {
width: 24px;
height: 24px;
line-height: 24px;
}
</style>Techno4 Framework
- Get Started
- Introduction
- Kitchen Sink
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar