ionische Liste

Liste ist eine weit verbreitete Interface-Elemente, die fast immer alle mobilen App zu verwenden, bei.

Die Liste kann einen grundlegenden Text, Tasten, Schalter und andere Miniatursymbole sein.

Listenelement kann jedes HTML-Element sein. Container-Elemente Klassenliste erforderlich, jede Listenelement Positionstyp erforderlich.

ionList ionItem und kann leicht eine Vielzahl von interaktiven Möglichkeiten, wie Dia Bearbeitung unterstützt, die Art ziehen und Elemente löschen.

Grund Nutzung:

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

Versuchen »

Listentrenn

Wir können Einzelteil-Teiler-Klasse verwenden, um einen Separator Liste zu erstellen, die standardmäßig die Liste der Elemente in einer anderen Hintergrundfarbe und Fettschrift zu unterscheiden, aber man kann seine leicht anpassen.

<div class="list">

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

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

  ...

</div>

Versuchen »

Mit Symbolen Liste

Wir können ein Symbol auf der linken oder rechten Seite der Listenelemente angeben.

Verwenden Sie Artikel-icon-links-Symbol in der linken, Punkt-Symbol rechts Einstellungen Symbol auf der rechten Seite. Wenn Sie beide Seiten des Symbols benötigen, werden die beiden Klassen hinzugefügt auf.

Die folgenden Beispiele verwendeten wir <a> Label in der Liste Element, so dass jedes Listenelement anklickbar.

Liste item wenn Sie <a> oder <button> Element, wenn das Recht des Symbols nicht hinzugefügt wird, wird es automatisch auf die Pfeile hinzugefügt werden.

Beispiel, das erste Element nur Symbole auf der linken Seite, um das zweite Symbol hat, gibt das dritte Symbol auf der rechten Seite (sowie Hinweise item-Note), hat das vierte Emblem (mark) Elemente.

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

Versuchen »

Buttons Liste

Verwenden Sie Artikel-Taste rechts oder Artikel-Taste links-Taste auf den Klassenlisteneinträge.

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

Versuchen »

Mit Benutzerbilder

Verwenden Sie Artikel-Avatar erstellen Avatar mit einer Liste:

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

Versuchen »

Thumbnail List

Thumbnail item-Thumbnail-Links-Klasse hinzufügen die linksbündig, item-Thumbnail-Rechts-Klasse verwendet wird, eine Miniaturansicht auf der rechten Ausrichtung hinzuzufügen.

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

Versuchen »

Embedded-Liste (siehe Einschub Liste)

Wir können aus einer Liste in den Behälter eingebettet werden, wird die Liste nicht die volle Breite anzuzeigen.

Inline-Stil Liste: Liste Liste eingeschnittenen, mit einer allgemeinen Liste der Unterschied ist, dass es den Rand legt (marign), ähnlich wie bei der Registerkarte.

Embedded-Listen sind keine Schatten, wird der Effekt noch besser beim Scrollen.

<div class="list list-inset">

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

    ...

</div>

Versuchen »