卡片

卡片是显示重要内容的好方法，并且迅速成为应用程序的核心设计模式。 它们是限制和组织信息的好方法，同时也为用户设置了可预见的期望。 随着这么多的内容能够立即显示，并且经常这么小的屏幕不可靠，卡已经成为许多公司的选择的设计模式，包括Google，Twitter和Spotify等。

对于移动体验，卡片可以轻松地通过许多不同的屏幕尺寸在视觉上显示相同的信息。 它们允许更多的控制，灵活，甚至可以动画。 卡通常放置在彼此之间，但也可以像“页面”一样使用，并在左，右之间滑动。

基础使用

卡主要是一个CSS组件。 要使用基本卡，请遵循以下结构：

<ion-card>

  <ion-card-header>
    Card Header
  </ion-card-header>

  <ion-card-content>
    <!-- Add card content here! -->
  </ion-card-content>

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

效果：

卡片列表

卡可以包含项目列表。 在 ion-list 内容中添加 ion-card-content 组件以显示列表：

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

效果：

卡中的图像

图像的大小通常有所不同，因此在整个应用程序中采用一致的风格是非常重要的。 图片可以轻松添加到卡片中。 将图像添加到卡将给予图像一个恒定的宽度和一个可变的高度。 列表，标题和其他卡组件可以轻松地与图像卡组合。 要将图像添加到卡中，请使用以下标记：

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

效果：

背景图片

卡可用于实现多种设计。 我们提供许多元素来实现常见的设计，但有时需要添加自定义样式。 将背景图像添加到卡片中是完美的例子，说明如何添加自定义样式可以实现完全不同的外观。

以下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;
  }

}

效果：

高级卡

来自不同类型的卡片的款式可以组合起来创建高级卡片。 卡也可以使用自定义CSS。 以下是通过将各种卡属性与少量自定义CSS相结合构建的几个高级卡。

社交卡

通常需要在应用程序中创建社交卡。 使用卡片中不同项目的组合可以实现这一点。

<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 ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left 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>

效果：

地图卡

可以使用 Ionic 组件的组合来创建显示为地图的卡。

<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 ion-button icon-left clear item-right>
      <ion-icon name="navigate"></ion-icon>
      Start
    </button>
  </ion-item>

</ion-card>

效果：