lista jonowa

Lista jest powszechnie stosowane elementy interfejsu, prawie zawsze używać we wszystkich aplikacji mobilnej.

Lista może być podstawowy tekst, przyciski, przełączniki i inne ikony miniatur.

Element listy może być dowolny element HTML. Elementy kontenerów wymaganych listę klasy, każdy element listy jest wymagana kategorię elementów.

ionList ionItem i łatwo obsługiwać szereg interaktywnych sposobów, takich jak edycja slajdów, przeciągnij rodzaj i usuwać elementy.

Podstawowe użycie:

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

Spróbuj »

separator listy

Możemy użyć klasy poz-dzielnik stworzyć listę separatora domyślnie listę elementów w innym kolorze tła i pogrubioną czcionką, aby odróżnić, ale można łatwo dostosować do niego.

<div class="list">

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

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

  ...

</div>

Spróbuj »

Z listy ikon

Możemy określić ikonę po lewej lub po prawej stronie elementów listy.

Użyj poz-icon-lewy ikonę w lewo, poz-ikonę prawym ustawień ikonę po prawej stronie. Jeśli potrzebujesz obu stron ikonie, obie klasy są dodawane do.

Poniższe przykłady, użyliśmy <a> etykietę elementu listy, tak aby każdy klikalny element listy.

Element listy podczas korzystania <a> lub <button> elementem, jeśli prawo ikony nie zostanie dodany, zostanie on automatycznie dodany do strzałkami.

Przykład pierwszy element tylko ikony po lewej stronie, o Druga ikona ma, istnieje trzecia ikona po prawej stronie (a także zauważa, poz-note), czwarty ma odznakę (Mark) elementy.

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

Spróbuj »

lista przyciski

Użyj item-button-prawo lub przycisk poz-lewy przycisk na pozycji listy klasy.

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

Spróbuj »

Z listy Avatar

Użyj poz-avatar stworzyć awatara z listy:

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

Spróbuj »

thumbnail

Thumbnail poz-miniatur lewym klasy dodać lewa wyrównany, poz-miniatur prawym klasa służy do dodawania miniaturę po prawej wyrównania.

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

Spróbuj »

Lista wbudowania (lista wstawka)

możemy być osadzony w pojemniku spośród liście, lista nie jest widoczny na całej szerokości.

Lista style inline jest: lista list-wstawka z ogólnej listy różnicą jest to, że ustawia margines (marign), podobną do tej zakładki.

Wykazy osadzone są żadne cienie, efekt będzie jeszcze lepszy podczas przewijania.

<div class="list list-inset">

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

    ...

</div>

Spróbuj »