Ionic Card

From WikiOD

Ionic card[edit | edit source]

In recent years, the application of cards has become more and more popular. Cards provide a tool for better organizing information display.

For mobile applications, the card will adapt to the size of the screen.

We can flexibly control the display effect of the card and even realize the animation effect.

The card is generally placed at the top of the page, of course, the function of switching left and right can also be realized.

 <code><div class="card"></code>
   <code><div class="item item-text-wrap"></code>
     Basic card, contains text information.
   <code></div></code>
 <code></div></code>

The default style of the card is box-shadow. For performance reasons, similar elements like list list-inset have no shadow.

If you have a lot of cards, and each card has many sub-elements, it is recommended to use an inset list.


The head and bottom of the card[edit | edit source]

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

 <code><div class="card"></code>
   <code><div class="item item-divider"></code>
     Card head!
   <code></div></code>
   <code><div class="item item-text-wrap"></code>
     Basic card, contains text information.
   <code></div></code>
   <code><div class="item item-divider"></code>
     The bottom of the card!
   <code></div></code>
 <code></div></code>
----

Card list[edit | edit source]

Use the list card class to set the card list:

 <code><div class="list card"></code>
 
   <a href="#" class="item item-icon-left">
     <code><i class="icon ion-home"></i></code>
     Enter home address
   </a>
 
   <a href="#" class="item item-icon-left">
     <code><i class="icon ion-ios-telephone"></i></code>
     Enter phone number
   </a>
 
   <a href="#" class="item item-icon-left">
     <code><i class="icon ion-wifi"></i></code>
     Enter wireless password
   </a>
 
   <a href="#" class="item item-icon-left">
     <code><i class="icon ion-card"></i></code>
     Enter card information
   </a>
 
 <code></div></code>
----

Card with picture[edit | edit source]

The effect of using pictures in the card will be better. Examples are as follows:

 <code><div class="list card"></code>
 
   <code><div class="item item-avatar"></code>
     <img src="avatar.jpg">
     <code><h2>Pretty Hate Machine</h2></code>
     <code><p>Nine Inch Nails</p></code>
   <code></div></code>
 
   <code><div class="item item-image"></code>
     <img src="cover.jpg">
   <code></div></code>
 
   <a class="item item-icon-left assertive" href="#">
     <code><i class="icon ion-music-note"></i></code>
     Start listening
   </a>
 
 <code></div></code>

Card show[edit | edit source]

In the following example, several different options are used to display cards. I started to use the list card element, and used the item-avatar, the item-body element is used to display pictures and text information, and the item-divider class is used at the bottom.

 <code><div class="list card"></code>
 
   <code><div class="item item-avatar"></code>
     <img src="mcfly.jpg">
     <code><h2>Marty McFly</h2></code>
     <code><p>November 05, 1955</p></code>
   <code></div></code>
 
   <code><div class="item item-body"></code>
     <img class="full-image" src="delorean.jpg">
     <code><p></code>
       Novice Tutorial-not only learn technology, update dreams! <code><br></code>
       Novice Tutorial-not only learn technology, update dreams! <code><br></code>
       Novice Tutorial-not only learn technology, update dreams! <code><br></code>
       Novice Tutorial-not only learn technology, update dreams!
     <code></p></code>
     <code><p></code>
       <a href="#" class="subdued">1 like</a>
       <a href="#" class="subdued">5 comments</a>
     <code></p></code>
   <code></div></code>
 
   <code><div class="item tabs tabs-secondary tabs-icon-left"></code>
     <a class="tab-item" href="#">
       <code><i class="icon ion-thumbsup"></i></code>
       like
     </a>
     <a class="tab-item" href="#">
       <code><i class="icon ion-chatbox"></i></code>
       Comment
     </a>
     <a class="tab-item" href="#">
       <code><i class="icon ion-share"></i></code>
       share
     </a>
   <code></div></code>
 
 <code></div></code>