Latest web development tutorials

ionic card

In recent years, the card (card) are becoming more popular, the card provides a tool to better organize the information presented.

Based on the size of the screen size for adaptive mobile terminal application cards.

We can be very flexible control display card, even animated effects.

General card on top of the page, of course, can achieve about switching function.

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

try it"

Card (card) default style with box-shadow (the shadow), for performance reasons, and other similar elements like list list-inset and without shadows.

If you have a lot of cards, each card has a lot of sub-elements, we recommend using the embedded list (inset list).


The head and the bottom of the card

We can add the item-divider add class to the head and the bottom card:

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

try it"


Card List

Use list card class to set the list of cards:

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

try it"


Cards with pictures

The use of the card image, the effect will be better, examples are as follows:

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

try it"

Operating results are as follows:


Cards show

The following examples use several different options card display mode. It started with the list card elements, and the use of item-avatar, item-body element is used to display pictures and text, use item-divider at the bottom of the class.

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

try it"

Operating results are as follows: