ionic Список
Список — широко используемый элемент пользовательского интерфейса, применяемый почти во всех мобильных приложениях.
Списки могут содержать базовый текст, кнопки, переключатели, значки, миниатюры и т. д.
Элементами списка могут быть любые HTML-элементы. Элементу-контейнеру нужен класс list, а каждому элементу списка нужно использовать класс item.
ionList и ionItem могут легко поддерживать различные способы взаимодействия, такие как редактирование свайпом, сортировка перетаскиванием и удаление элементов.
Базовое использование:
<ul class="list">
<li class="item">
...
</li>
</ul>
Разделители списка
Мы можем использовать класс item-divider, чтобы создать разделители для списка. По умолчанию элементы списка различаются разными цветами фона и полужирным шрифтом, но вы можете легко это настроить.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="../index.html">
Butterfinger
</a>
...
</div>
Список с иконками
Мы можем указать иконки слева или справа от элементов списка.
Используйте item-icon-left, чтобы разместить иконку слева, и item-icon-right, чтобы разместить иконку справа. Если вам нужны иконки с обеих сторон, просто добавьте оба класса.
В следующем примере мы использовали тег <a> в элементах списка, чтобы сделать каждый элемент списка кликабельным.
Когда элементы списка используют элементы <a> или <button>, если справа не добавлена иконка, автоматически будет добавлена стрелка.
В примере первый элемент имеет только иконку слева, второй элемент имеет иконки с обеих сторон, третий элемент имеет иконку справа (и аннотацию item-note), а четвёртый элемент имеет элемент badge.
<div class="list">
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="../index.html">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
Список кнопок
Используйте класс item-button-right или item-button-left, чтобы разместить кнопки в элементах списка.
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div>
...
</div>
Список с аватарами
Используйте item-avatar, чтобы создать список с аватарами:
<div class="list">
<a class="item item-avatar" href="../index.html">
<img src="venkman.jpg.html">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
Список миниатюр
Класс item-thumbnail-left используется для добавления миниатюры с выравниванием по левому краю, а класс item-thumbnail-right — для добавления миниатюры с выравниванием по правому краю.
<div class="list">
<a class="item item-thumbnail-left" href="../index.html">
<img src="cover.jpg.html">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Список с отступами
Мы можем вложить список в контейнер, и список не будет отображаться на всю ширину.
Стиль для списка с отступами: list list-inset. Отличие от обычного списка в том, что у него заданы отступы, подобно вкладкам.
Списки с отступами не имеют эффекта тени, что обеспечивает лучшую производительность при прокрутке.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
Другие расширения