В списках могут использоваться иконки, которые выравниваются слева и/или справа относительно каждого элемента списка. Тип выравнивания следует указывать для каждого item
отдельно. Вы можете добавить иконку на любую строку списка с помощью встроенного функционала Ionicons или нужного пакета шрифтов.
Используйте item-icon-left
и item-icon-right
для выравнивания иконки по левому или правому краю соответственно. В случае, если в одной строке списка нужно разместить две иконки с разных сторон, используйте оба класса: item-icon-left
и item-icon-right
.
Пример ниже использует элемент <a>
для каждой строки списка, что делает каждую из них полностью кликабельной. Если используется элемент <a>
или <button>
, и при этом справа не вставлена иконка, то небольшая стрелка, указывающая направо, будет добавлена автоматически.
В приведенном примере для первой строки произведено выравнивание иконки по левому краю. Для второй – выравнивание по обеим сторонам. Для третьей – иконка слева и item-note
. Для четвертой – добавлен элемент badge
.
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<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="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>