Ionic-css:ionic Card

Ylbtech-ionic-css:ionic Card

1. back to top

1. Ionic Card

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

For mobile apps, cards are sized to fit the screen size.

We can control the display of the card very flexibly, even achieve the animation effect.

Cards are generally placed at the top of the page, of course, can also achieve the function of left and right switching.

<divClass="card"><divclass="Item Item-text-wrap">  </div></div>          

Try it?

Card default style with Box-shadow (shadow), for performance reasons, and his similar elements like List list-inset and no shadows.

If you have a lot of cards, each card has a lot of child elements, it is recommended to use the inline list (inset lists).

The head and bottom of the card

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

<div Class= "card" > <div Span class= "ATN" >class= "item Item-divider" >  card head! </div> <div  Class= "item Item-text-wrap" > basic card, Contains the text information. </div> <div  Class= "item Item-divider" > bottom of card! </div></DIV>        

Try it?

Card list

Use the list card class to set up a 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?

With picture card

Use the picture in the card, the effect will be better, the example is as follows:

<div Class="List Card"> <div Class="Item Item-avatar">  Src="Avatar.jpg"> Pretty Hate Machine <p>Nine Inch Nails</p> </div> <div Class="Item Item-image">  src= "cover.jpg" > </div > <a class= "item Item-icon-left assertive"  href=  "#" > <i class= "icon Ion-music-note" ></i>< Span class= "PLN" > Start listening </a></div>  

Try it?

The results are as follows:

Card presentation

The following examples use several different options for how the card is presented. Started using the list card element and used the Item-avatar, item-body element for displaying picture and text information, using the Item-divider class at the bottom.

<div Class="List Card"> <div Class="Item Item-avatar">  Src="Mcfly.jpg"> Marty McFly <p>November 05, 1955</p> </div> <div Class="Item Item-body">  Class="Full-image" Src="Delorean.jpg"> <p>Rookie Tutorial-not only learn the technology, but also the dream!<br>Rookie Tutorial-not only learn the technology, but also the dream!<br>Rookie Tutorial-not only learn the technology, but also the dream!<br>Rookie Tutorial-not only learn the technology, but also the dream!</p> <p> <a Href="#" Class="Subdued">1 likes</a> <a Href="#" Class="Subdued">5 reviews</a> </p> </div> <div Class="Item tabs tabs-secondary tabs-icon-left"> <a Class="Tab-item" Href="#"> <i Class="Icon Ion-thumbsup"></i>Like</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> share </a > </div></DIV>   

Try it?

The results are as follows:

2.

2. back to top

3. back to top

4. back to top

5. back to top

1, HTTP://WWW.RUNOOB.COM/IONIC/IONIC-CARD.HTML2,

6. back to top

Ylbtech Source: http://ylbtech.cnblogs.com/ This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

Ionic-css:ionic Card