liste ionique

La liste est un élément d'interface largement utilisé dans presque toutes les applications mobiles.

La liste peut être composée de texte de base, de boutons, de commutateurs, d'icônes et de vignettes, etc.

Les éléments de liste peuvent être n’importe quel élément HTML. L'élément conteneur nécessite la classe list et chaque élément de liste nécessite la classe item.

ionList et ionItem peuvent facilement prendre en charge diverses méthodes d'interaction, telles que l'édition coulissante, le tri par glisser-déposer et la suppression d'éléments.

Utilisation de base :

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

Séparateur de liste

Nous pouvons utiliser la classe item-divider pour créer un séparateur pour la liste, en par défaut Ci-dessous, les éléments de la liste se distinguent par différentes couleurs d'arrière-plan et gras de police, mais vous pouvez également les personnaliser facilement.

<div class="list">

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

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

  ...

</div>

Liste avec des icônes

Nous pouvons spécifier l'icône sur le côté gauche ou droit de l'élément de liste.

Utilisez item-icon-left pour définir l'icône à gauche et item-icon-right pour définir l'icône à droite. Si vous avez besoin d'icônes des deux côtés, ajoutez simplement les deux classes.

Dans l'exemple suivant, nous utilisons la balise <a> dans les éléments de la liste pour rendre chaque élément de la liste cliquable.

Lorsqu'un élément de liste utilise l'élément <a> ou <button>, si aucune icône n'est ajoutée à droite, une flèche vers le haut sera automatiquement ajoutée.

Dans l'exemple, le premier élément a uniquement des icônes à gauche, le deuxième élément a des icônes des deux côtés, le troisième élément a des icônes à droite (et élément-note), et le quatrième élément a un élément d'insigne.

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

Liste de boutons

Utilisez les classes item-button-right ou item-button-left pour placer des boutons dans les éléments de la liste.

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

Liste avec avatar

Utilisez item-avatar pour créer une liste avec avatar :

<div class="list">

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

    ...

</div>

Liste des vignettes

La classe item-thumbnail-left est utilisée pour ajouter des vignettes alignées à gauche, et la classe item-thumbnail-right est utilisée pour ajouter des vignettes alignées à droite.

<div class="list">

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

    ...

</div>

Liste d'insertion (liste d'insertion)

Nous pouvons intégrer la liste dans le conteneur, et la liste n'affichera pas toute la largeur.

Le style de la liste en ligne est : list list-inset La différence avec la liste normale est qu'elle définit des marges (marign), similaires aux tabulations.

Les listes en ligne n'ont pas d'effet d'ombre et l'effet sera meilleur lors du défilement.

<div class="list list-inset">

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

    ...

</div>