Ionenkarten
Da mobile Geräte eine kleinere Bildschirmgröße haben, sind Karten eines der besten Elemente für die Anzeige von Informationen, die sich benutzerfreundlich anfühlen. Im vorherigen Kapitel haben wir das Einfügen von Listen erläutert. Karten sind Inset-Listen sehr ähnlich, bieten jedoch zusätzliche Schatten, die die Leistung größerer Listen beeinflussen können.
Karten hinzufügen
Eine Standardkarte kann durch Hinzufügen von a erstellt werden cardKlasse zu Ihrem Element. Karten werden normalerweise als Listen mit dem gebildetitemKlasse. Eine der nützlichsten Klassen ist dieitem-text-wrap. Dies ist hilfreich, wenn Sie zu viel Text haben und ihn daher in Ihre Karte einwickeln möchten. Die erste Karte im folgenden Beispiel hat nicht dieitem-text-wrap Klasse zugewiesen, aber die zweite verwendet es.
<div class = "card">
<div class = "item">
This is a Ionic card without item-text-wrap class.
</div>
<div class = "item item-text-wrap">
This is a Ionic card with item-text-wrap class.
</div>
</div>
Der obige Code erzeugt den folgenden Bildschirm:
Kartenkopf und Fußzeile
Im vorherigen Kapitel haben wir bereits die Verwendung von item-dividerKlasse zum Gruppieren von Listen. Diese Klasse kann sehr nützlich sein, wenn Sie mit Karten arbeiten, um Kartenheader zu erstellen. Für Fußzeilen kann dieselbe Klasse verwendet werden, wie im folgenden Code gezeigt -
<div class = "card list">
<div class = "item item-divider">
Card header
</div>
<div class = "item item-text-wrap">
Card text...
</div>
<div class = "item item-divider">
Card Footer
</div>
</div>
Der obige Code erzeugt den folgenden Bildschirm:
Komplette Karte
Sie können jedes Element oben auf Ihrer Karte hinzufügen. Im folgenden Beispiel zeigen wir Ihnen, wie Sie das verwendenfull-image Klasse zusammen mit dem item-body um ein gut aussehendes Fensterbild in Ihre Karte zu bekommen.
<div class = "card">
<div class = "item item-avatar">
<img src = "my-image.png">
<h2>Card Name</h2>
</div>
<div class = "item item-body">
<img class = "full-image" src = "my-image.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget
pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci.
Nam tristique elit massa, quis faucibus augue finibus ac.
</div>
</div>
Der obige Code erzeugt den folgenden Bildschirm: