Cartes Ionic

Ces dernières années, les applications à base de cartes sont devenues de plus en plus populaires. Les cartes offrent un meilleur outil pour organiser l’affichage des informations.

Pour les applications mobiles, les cartes adaptent leur taille en fonction de la taille de l’écran.

Nous pouvons contrôler de manière flexible l’effet d’affichage des cartes, et même implémenter des effets d’animation.

Les cartes sont généralement placées en haut de la page et peuvent bien sûr également implémenter une fonctionnalité de commutation gauche-droite.

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

Essayez-le »

Les cartes ont un style par défaut avec box-shadow. Pour des raisons de performances, les éléments similaires comme list list-inset n’ont pas d’ombre.

Si vous avez beaucoup de cartes et que chaque carte possède de nombreux éléments enfants, il est recommandé d’utiliser une liste inset.

En-tête et pied de carte

Nous pouvons ajouter un en-tête et un pied de page aux cartes en ajoutant la classe item-divider :

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

Essayez-le »

Liste de cartes

Utilisez la classe list card pour configurer une liste de cartes :

<div class="list card">

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Essayez-le »

Cartes avec images

L'utilisation d'images dans les cartes aura un meilleur effet. Exemple ci-dessous :

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg.html">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg.html">
  </div>

  <a class="item item-icon-left assertive" href="../index.html">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Essayez-le »

L'effet d'exécution est le suivant :

Affichage des cartes

L'exemple suivant utilise plusieurs options différentes pour afficher des cartes. Il commence par l'élément list card, et utilise les éléments item-avatar et item-body pour afficher des images et des informations textuelles, et utilise la classe item-divider en bas.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg.html">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg.html">
    <p>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="../index.html" class="subdued">1 喜欢</a>
      <a href="../index.html" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="../index.html">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-chatbox"></i>
      评论
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Essayez-le »

L'effet d'exécution est le suivant :

Autres extensions