Ionic Karten

In den letzten Jahren sind Kartenanwendungen immer beliebter geworden. Karten bieten ein besseres Werkzeug zur Organisation der Informationsanzeige.

Für mobile Anwendungen passen Karten ihre Größe an die Bildschirmgröße an.

Wir können die Darstellung von Karten flexibel steuern und sogar Animationseffekte implementieren.

Karten werden in der Regel oben auf der Seite platziert, und natürlich können sie auch eine Funktion zum Wechseln zwischen links und rechts bieten.

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

Ausprobieren »

Karten haben einen Standardstil mit box-shadow. Aus Performance-Gründen haben ähnliche Elemente wie list list-inset keinen Schatten.

Wenn Sie viele Karten haben und jede Karte viele untergeordnete Elemente enthält, wird die Verwendung einer Inset-Liste empfohlen.

Kartenkopf- und Fußzeile

Wir können Karten einen Kopf- und Fußbereich hinzufügen, indem wir die Klasse item-divider 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>

Ausprobieren »

Kartenliste

Verwenden Sie die Klasse list card, um eine Kartenliste einzurichten:

<div class="list card">

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Ausprobieren »

Karten mit Bildern

Die Verwendung von Bildern in Karten erzielt eine bessere Wirkung. Beispiel unten:

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg.html">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg.html">
  </div>

  <a class="item item-icon-left assertive" href="../index.html">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Ausprobieren »

Das Ergebnis sieht wie folgt aus:

Kartenanzeige

Das folgende Beispiel verwendet mehrere verschiedene Optionen zum Anzeigen von Karten. Es beginnt mit dem list card-Element und verwendet die Elemente item-avatar und item-body, um Bilder und Textinformationen anzuzeigen, und verwendet die Klasse item-divider am unteren Rand.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg.html">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg.html">
    <p>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="../index.html" class="subdued">1 喜欢</a>
      <a href="../index.html" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="../index.html">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-chatbox"></i>
      评论
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Ausprobieren »

Das Ergebnis sieht wie folgt aus:

Andere Erweiterungen