ionische Karte

In den letzten Jahren sind immer die Karte (Karte) mehr beliebt, bietet die Karte ein Werkzeug, um besser auf die präsentierten Informationen zu organisieren.

Basierend auf der Größe der Bildschirmgröße für adaptive mobile Endgerät Applikationskarten.

Wir können sehr flexible Steuerung mit Grafikkarte, auch animierte Effekte.

Allgemeine Karte oben auf der Seite können natürlich erreichen über Schaltfunktion.

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

Versuchen »

Card (Karte) Standardstil mit box-shadow (der Schatten), aus Performance-Gründen und andere ähnliche Elemente wie die Liste list-Einsatz und ohne Schatten.

Wenn Sie eine Menge von Karten haben, hat jede Karte eine Menge von Unterelementen, empfehlen wir die eingebettete Liste (kleines Bild Liste) verwendet wird.

Der Kopf und der Unterseite der Karte

Wir können die Artikel-Teiler hinzufügen Klasse auf den Kopf und die unterste Karte hinzufügen:

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

Versuchen »

Kartenliste

Verwenden Sie die Liste Karte Klasse, um die Liste der Karten zu setzen:

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

Versuchen »

Karten mit Bildern

Die Verwendung des Kartenbilds, wird der Effekt besser sein, Beispiele sind wie folgt:

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

Versuchen »

Die operativen Ergebnisse sind wie folgt:

Karten zeigen

Die folgenden Beispiele verwenden verschiedene Optionen Kartenanzeigemodus. Es begann mit der Liste Kartenelemente und die Verwendung von item-avatar, item-body-Element verwendet wird, Bilder und Text anzuzeigen, Punkt-Teiler an der Unterseite der Klasse verwendet.

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

</div>

Versuchen »

Die operativen Ergebnisse sind wie folgt: