ionic 卡片

近年來卡片(card)的應用愈來愈流行，卡片提供了一個更好組織信息展現的工具。php

針對移動端的應用，卡片會根據屏幕大小自適應大小。html

咱們能夠很靈活的控制卡片的顯示效果，甚至實現動畫效果。ios

卡片通常放在頁面頂部，固然也能夠實現左右切換的功能。less

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

嘗試一下 »ionic

卡片(card)默認樣式帶有box-shadow(陰影)，因爲性能的緣由，和他相似的元素像 list list-inset 並無陰影。ide

若是你有不少的卡片，每一個卡片都有不少子元素，建議使用內嵌列表（inset list）。工具

卡片的頭部與底部

咱們能夠經過添加 item-divider 類爲卡片添加頭部與底部：性能

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

嘗試一下 »動畫

卡片列表

使用 list card 類來設置卡片列表：spa

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

嘗試一下 »

帶圖片卡片

卡片中使用圖片，效果會更好，實例以下：

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

嘗試一下 »

運行效果以下：

卡片展示

如下實例中使用幾種不一樣的選項的卡片展示方式。開始使用了 list card 元素，並使用了 item-avatar , item-body 元素用於展現圖片和文本信息，底部使用 item-divider 類。

<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> 評論 </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> 分享 </a> </div> </div>

嘗試一下 »

運行效果以下：

二、

一、

http://www.runoob.com/ionic/ionic-card.html

二、

6.返回頂部

做者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。