Cards

http://ionicframework.com/docs/v2/components/#cards

Cards是一种新兴的设计模式，可以用来显示一些重要内容。因为可以一次性显示很多信息并只占据屏幕的一部分区域，Cards很快被选择成为很多公司包括Google、Twitter、Spotify等公司的App的设计模式之一。

为了适应移动应用，Cards在不同的屏幕尺寸上显示相同的信息是很简单的。可以使用很多灵活的控件或者动画。Cards一般放在其他组件的上方，也可以用来当做Page使用，来实现左右切换。

基本用法

Cards其实是一个CSS组件，可以按照以下的代码实现一个基本的Card：

<ion-card>
    <ion-card-header>
        Card Header
    </ion-card-header>
    <ion-card-content>
        <!-- Add card content here! -->
    </ion-card-content>
</ion-card>

Card Headers

像一个普通的Page一样，Card也可以包含Header。只需要在Card内添加<ion-card-header>组件即可：

<ion-card>
    <ion-card-header>
        Header
    </ion-card-header>
    <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
    </ion-card-content>
</ion-card>

Lists In Cards

Card可以包含一个列表。在ion-card-content内添加ion-list组件来显示一个列表：

<ion-card>
    <ion-card-header>
        Explore Nearby
    </ion-card-header>
    <ion-list>
        <button ion-item>
            <ion-icon name="cart" item-left></ion-icon>
            Shopping
        </button>
        <button ion-item>
            <ion-icon name="medical" item-left></ion-icon>
            Hospital
        </button>
        <button ion-item>
            <ion-icon name="cafe" item-left></ion-icon>
            Cafe
        </button>
        <button ion-item>
        <ion-icon name="paw" item-left></ion-icon>
            Dog Park
        </button>
        <button ion-item>
            <ion-icon name="beer" item-left></ion-icon>
                Pub
        </button>
        <button ion-item>
            <ion-icon name="planet" item-left></ion-icon>
            Space
        </button>
    </ion-list>
</ion-card>

Images In Cards

图片的尺寸经常是可变的，所以让图片适应固定的样式是非常重要的。图片可以很容易的添加到Card内。把一个图片添加到Card内会给图片设置一个固定的宽度和可变的高度。Lists、Headers和其他Card组件可以很容易的和Image Card组合起来。使用以下代码来给Card添加图片：

<ion-card>
    <img src="img/nin-live.png"/>
    <ion-card-content>
        <ion-card-title>
            Nine Inch Nails Live
        </ion-card-title>
        <p>
        The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
        </p>
    </ion-card-content>
</ion-card>

Background Images

Cards可以实现多种设计。我们提供了很多元素来实现常见的设计样式，但是有时候需要添加一些必要的自定义格式。为Cards添加背景图片是一个如何添加自定义样式来实现完全不同的界面的好例子：

首先在页面内添加以下的html代码：

<ion-content class="card-background-page">
    <ion-card>
        <img src="img/card-saopaolo.png"/>
        <div class="card-title">São Paulo</div>
        <div class="card-subtitle">41 Listings</div>
    </ion-card>
    <ion-card>
        <img src="img/card-amsterdam.png"/>
        <div class="card-title">Amsterdam</div>
        <div class="card-subtitle">64 Listings</div>
    </ion-card>
    <ion-card>
        <img src="img/card-sf.png"/>
        <div class="card-title">San Francisco</div>
        <div class="card-subtitle">72 Listings</div>
    </ion-card>
    <ion-card>
        <img src="img/card-madison.png"/>
        <div class="card-title">Madison</div>
        <div class="card-subtitle">28 Listings</div>
    </ion-card>
</ion-content>

然后，在页面的Sass文件中添加以下代码：

.card-background-page {
    ion-card {
        position: relative;
        text-align: center;
    }

    .card-title {
        position: absolute;
        top: 36%;
        font-size: 2.0em;
        width: 100%;
        font-weight: bold;
        color: #fff;
    }
    .card-subtitle {
        font-size: 1.0em;
        position: absolute;
        top: 52%;
        width: 100%;
        color: #fff;
    }
}

Advanced Cards

不同的样式可以组成更高级的Cards。可以使用一些自定义CSS，看下面的例子，如何使用自定义CSS来实现更加复杂的Cards样式：

Social Cards

在一个App内使用Social Cards是非常必要的。可以使用不同的组件来组成一个Cards，如下面的代码：

<ion-card>
    <ion-item>
        <ion-avatar item-left>
            <img src="img/marty-avatar.png">
        </ion-avatar>
        <h2>Marty McFly</h2>
        <p>November 5, 1955</p>
    </ion-item>
    <img src="img/advance-card-bttf.png">
    <ion-card-content>
        <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
    </ion-card-content>
    <ion-row>
        <ion-col>
            <button primary clear small>
                <ion-icon name="thumbs-up"></ion-icon>
                <div>12 Likes</div>
            </button>
        </ion-col>
        <ion-col>
            <button primary clear small>
                <ion-icon name="text"></ion-icon>
                <div>4 Comments</div>
            </button>
        </ion-col>
        <ion-col center text-center>
            <ion-note>
                11h ago
            </ion-note>
        </ion-col>
    </ion-row>
</ion-card>

Map Cards

一些组件组合起来可以显示为一个地图Card：

<ion-card>
    <img src="img/advance-card-map-madison.png">
    <ion-fab right top>
        <button ion-fab>
            <ion-icon name="pin"></ion-icon>
        </button>
    </ion-fab>
    <ion-item>
        <ion-icon name="football" item-left large></ion-icon>
        <h2>Museum of Football</h2>
        <p>11 N. Way St, Madison, WI 53703</p>
    </ion-item>
    <ion-item>
        <ion-icon name="wine" item-left large ></ion-icon>
        <h2>Institute of Fine Cocktails</h2>
        <p>14 S. Hop Avenue, Madison, WI 53703</p>
    </ion-item>
    <ion-item>
        <span item-left>18 min</span>
        <span item-left>(2.6 mi)</span>
        <button primary clear item-right>
            <ion-icon name="navigate"></ion-icon>
            Start
        </button>
    </ion-item>
</ion-card>