ионный список

Список является широко используемым элементов интерфейса, почти всегда использовать во всех мобильное приложение.

Список может быть основной текст, кнопки, переключатели и другие значки эскизов.

Элемент списка может быть любой HTML элемент. Контейнерные элементы, необходимые список классов, каждый элемент списка требуется тип позиции.

ionList ionItem и может легко поддерживать различные интерактивные методы, такие как редактирование слайдов, перетащите сортировку и удалять элементы.

Базовое использование:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

Попробуйте »

Список сепаратор

Мы можем использовать класс элемент-разделитель для создания списка разделитель, по умолчанию, список элементов в другой цвет фона и жирный шрифт, чтобы различать, но вы можете легко настроить его.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

Попробуйте »

С помощью списка иконок

Мы можем указать значок на левой или правой стороне элементов списка.

Используйте пункт-значок-левый значок в левой, элемент-значок правой значок настройки на правой стороне. Если вам нужны обе стороны значка, два класса добавляются к.

Ниже приведены примеры, мы использовали <a> метку в элементе списка, так что каждый элемент списка кликабельны.

Элемент списка, когда вы используете <a> или кнопку <> элемент, если право на значок не добавляется, то она будет автоматически добавляться в стрелки.

Например, первый элемент только иконки на левой стороне, о второй значок имеет, есть третий значок справа (а также замечания пункт-примечание), четвертый имеет знак (Марк) элементы.

<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>

Попробуйте »

список кнопки

Используйте пункт кнопка-вправо или пункт кнопками левой кнопкой на элементах списка класса.

<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>

Попробуйте »

С помощью списка Аватар

Используйте пункт-аватар создать аватар со списком:

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

Попробуйте »

Список миниатюр

Миниатюра вещь уменьшенных изображений левый класс, чтобы добавить, пункт уменьшенных изображений правый класс по левому краю используется для добавления эскиза на выравнивание по правому краю.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

Попробуйте »

Встроенный список (список врезке)

Мы можем быть встроен в контейнер из списка, список не отображает всю ширину.

Встроенный список стиль: список список-вставка, с общим списком разницы в том, что она устанавливает предел (marign), похожий на вкладку.

Встроенные списки нет теней, эффект будет еще лучше при прокрутке.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

Попробуйте »