cartão iônica

Nos últimos anos, o cartão (cartão) estão se tornando mais popular, o cartão fornece uma ferramenta para organizar melhor as informações apresentadas.

Com base no tamanho do tamanho do ecrã para adaptativas cartões de aplicação de terminais móveis.

Nós podemos ser uma placa de tela de controle muito flexível, mesmo efeitos animados.

Geral cartão no topo da página, é claro, pode atingir cerca de função de comutação.

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

tente »

Card (cartão) de estilo padrão com box-shadow (sombra), por motivos de desempenho, e outros elementos semelhantes, como lista de lista de inserção e sem sombras.

Se você tem um monte de cartas, cada cartão tem um monte de sub-elementos, recomendamos o uso da lista embutida (lista de inserção).

A cabeça e a parte inferior do cartão

Nós podemos adicionar o item-divisor de adicionar a classe para a cabeça eo cartão bottom:

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

tente »

Lista de cartão

Use classe lista de cartões para definir a lista de cartões:

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

tente »

Cartões com fotos

O uso da imagem do cartão, o efeito será melhor, os exemplos são os seguintes:

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

tente »

Os resultados operacionais são os seguintes:

Cartões mostram

Os exemplos a seguir usam vários modo de exibição cartão de opções diferentes. Tudo começou com os elementos da lista de cartões, eo uso de produto de avatar, elemento item de-corpo é usado para exibir imagens e texto, use o item divisor na parte inferior da 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>

tente »

Os resultados operacionais são os seguintes: