tarjeta iónica

En los últimos años, la tarjeta (tarjeta) son cada vez más populares, la tarjeta proporciona una herramienta para organizar mejor la información presentada.

Basado en el tamaño del tamaño de la pantalla para las tarjetas de aplicaciones de terminales móviles de adaptación.

Podemos ser la tarjeta de visualización de control muy flexible, incluso efectos animados.

cartas en general en la parte superior de la página, por supuesto, se puede lograr sobre la función de conmutación.

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

Trate »

Card (tarjeta) estilo por defecto con la caja-sombra (la sombra), por motivos de rendimiento, y otros elementos similares, como la lista de la lista-inserción y sin sombras.

Si usted tiene una gran cantidad de tarjetas, cada tarjeta tiene una gran cantidad de sub-elementos, se recomienda utilizar la lista incrustado (lista recuadro).

La cabeza y la parte inferior de la tarjeta

Podemos agregar el elemento divisor de añadir la clase a la cabeza y la carta de abajo:

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

Trate »

Lista de tarjetas

Utilice la clase de tarjeta lista para establecer la lista de tarjetas:

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

Trate »

Tarjetas con fotos

El uso de la imagen de la tarjeta, el efecto será mejor, los ejemplos son los siguientes:

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

Trate »

Los resultados de operación son los siguientes:

tarjetas de presentación

Los siguientes ejemplos utilizan varios modo de visualización de la tarjeta de opciones diferentes. Comenzó con los elementos de la tarjeta lista, y el uso del aspecto-avatar, elemento de elemento de cuerpo se utiliza para visualizar imágenes y texto, utilice elemento divisor en la parte inferior de la clase.

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

Trate »

Los resultados de operación son los siguientes: