Списки являются одним из самых популярных элементов любого веб-приложения или мобильного приложения. Они обычно используются для отображения различной информации. Их можно комбинировать с другими элементами HTML, чтобы создавать различные меню, вкладки или нарушать монотонность чисто текстовых файлов. Ionic Framework предлагает различные типы списков, чтобы упростить их использование.
Создание ионного списка
Каждый список создается с двумя элементами. Когда вы хотите создать базовый список, ваш тег <ul> должен иметь назначенный класс списка , а ваш тег <li> будет использовать класс элемента . Еще одна интересная вещь — вам даже не нужно использовать теги <ul> , <ol> и <li> для своих списков. Вы можете использовать любые другие элементы, но важно правильно добавить списки и классы элементов .
<div class = "list"> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> </div>
Приведенный выше код создаст следующий экран —
Список вставок
Когда вам нужен список для заполнения собственного контейнера, вы можете добавить список-вставки после вашего класса списка . Это добавит некоторый запас к нему и отрегулирует размер списка для вашего контейнера.
<div class = "list list-inset"> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> </div>
Приведенный выше код создаст следующий экран —
Разделители предметов
Делители используются для организации некоторых элементов в логические группы. Ионик дает нам класс делителя предметов для этого. Опять же, как и со всеми остальными ионными элементами, нам просто нужно добавить класс разделителя элементов после класса элементов . Разделители элементов полезны в качестве заголовка списка, так как они имеют более строгую стилизацию, чем другие элементы списка по умолчанию.
<div class = "list"> <div class = "item item-divider">Item Divider 1</div> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> <div class = "item item-divider">Item Divider 2</div> <div class = "item">Item 4</div> <div class = "item">Item 5</div> <div class = "item">Item 6</div> </div>
Приведенный выше код создаст следующий экран —
Добавление иконок
Мы уже показали вам, как добавить значки для ваших кнопок. При добавлении значков к элементам списка вам необходимо выбрать, на какой стороне вы хотите разместить их. Для этого есть классы item-icon-left и item-icon-right . Вы также можете объединить эти два класса, если хотите, чтобы ваши иконки были с обеих сторон. Наконец, есть класс заметки элемента, чтобы добавить текстовую заметку к вашему элементу.
<div class = "list">
<div class = "item item-icon-left">
<i class = "icon ion-home"></i>
Left side Icon
</div>
<div class = "item item-icon-right">
<i class = "icon ion-star"></i>
Right side Icon
</div>
<div class = "item item-icon-left item-icon-right">
<i class = "icon ion-home"></i>
<i class = "icon ion-star"></i>
Both sides Icons
</div>
<div class = "item item-icon-left">
<i class = "icon ion-home"></i>
<span class = "text-note">Text note</span>
</div>
</div>
Приведенный выше код создаст следующий экран —
Добавление аватаров и миниатюр
Аватары и миниатюры похожи. Основное отличие состоит в том, что аватары меньше, чем миниатюры. Эти миниатюры покрывают большую часть высоты элемента списка, в то время как аватары представляют собой круговые изображения среднего размера. Используемые классы: item-avatar и item-thumbnail . Вы также можете выбрать, на какой стороне вы хотите разместить свои аватары и миниатюры, как показано в примере кода с миниатюрами ниже.
<div class = "list">
<div class = "item item-avatar">
<img src = "my-image.png">
<h3>Avatar</h3>
</div>
<div class = "item item-thumbnail-left">
<img src = "my-image.png">
<h3>Thumbnail</h3>
</div>
</div>
Приведенный выше код создаст следующий экран —