carte ionique

Au cours des dernières années, la carte (carte) sont de plus en plus populaire, la carte fournit un outil pour mieux organiser l'information présentée.

Sur la base de la taille de la taille de l'écran pour l'adaptation des cartes d'application de terminal mobile.

Nous pouvons être très flexible carte d'affichage de contrôle, des effets encore animés.

carte générale en haut de la page, bien sûr, peut réaliser sur la fonction de commutation.

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

Essayez »

Card (carte) style par défaut avec box-shadow (l'ombre), pour des raisons de performance, et d'autres éléments similaires, comme la liste liste-encadré et sans ombres.

Si vous avez beaucoup de cartes, chaque carte possède un grand nombre de sous-éléments, nous vous recommandons d'utiliser la liste intégrée (liste d'encart).

La tête et le bas de la carte

Nous pouvons ajouter l'élément diviseur ajouter la classe à la tête et la carte en bas:

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

Essayez »

Liste Carte

Utilisez la classe de carte de liste pour définir la liste des cartes:

<div class="list card">

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

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

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

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

</div>

Essayez »

Cartes avec des images

L'utilisation de l'image de la carte, l'effet sera mieux, les exemples sont les suivantes:

<div class="list card">

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

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

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

</div>

Essayez »

Les résultats d'exploitation sont les suivantes:

Cartes spectacle

Les exemples suivants utilisent plusieurs différentes options mode d'affichage de la carte. Cela a commencé avec les éléments de la carte de la liste, et l'utilisation de l'article-avatar, élément item-body est utilisé pour afficher des images et du texte, utilisez élément diviseur au fond de la classe.

<div class="list card">

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

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

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Essayez »

Les résultats d'exploitation sont les suivantes: