ionic List
Eine Liste ist ein weit verbreitetes UI-Element und wird in fast allen mobilen Apps verwendet.
Listen können grundlegenden Text, Buttons, Schalter, Icons, Vorschaubilder usw. enthalten.
Listeneinträge können beliebige HTML-Elemente sein. Das Containerelement benötigt die Klasse list, und jeder Listeneintrag muss die Klasse item verwenden.
ionList und ionItem können auf einfache Weise verschiedene Interaktionsmethoden unterstützen, wie z. B. Bearbeiten per Wischen, Sortieren per Ziehen und Löschen von Einträgen.
Grundlegende Verwendung:
<ul class="list">
<li class="item">
...
</li>
</ul>
Listentrenner
Wir können die Klasse item-divider verwenden, um Trennlinien für die Liste zu erstellen. Standardmäßig unterscheiden sich Listenelemente durch unterschiedliche Hintergrundfarben und fette Schriftarten, aber Sie können dies leicht anpassen.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="../index.html">
Butterfinger
</a>
...
</div>
Liste mit Symbolen
Wir können Symbole auf der linken oder rechten Seite von Listenelementen angeben.
Verwenden Sie item-icon-left, um das Symbol links zu platzieren, und item-icon-right, um das Symbol rechts zu platzieren. Wenn Sie Symbole auf beiden Seiten benötigen, fügen Sie einfach beide Klassen hinzu.
Im folgenden Beispiel haben wir das <a>-Tag in Listenelementen verwendet, um jedes Listenelement anklickbar zu machen.
Wenn Listenelemente <a>- oder <button>-Elemente verwenden, wird automatisch ein Pfeil hinzugefügt, wenn rechts kein Symbol hinzugefügt wurde.
Im Beispiel hat das erste Element nur ein linkes Symbol, das zweite Element hat Symbole auf beiden Seiten, das dritte Element hat ein rechtes Symbol (und eine item-note-Anmerkung), und das vierte Element hat ein Badge-Element.
<div class="list">
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="../index.html">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
Button-Liste
Verwenden Sie die Klasse item-button-right oder item-button-left, um Schaltflächen in Listenelementen zu platzieren.
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div>
...
</div>
Liste mit Avataren
Verwenden Sie item-avatar, um eine Liste mit Avataren zu erstellen:
<div class="list">
<a class="item item-avatar" href="../index.html">
<img src="venkman.jpg.html">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
Vorschaubild-Liste
Die Klasse item-thumbnail-left wird verwendet, um ein linksbündig ausgerichtetes Miniaturbild hinzuzufügen, und die Klasse item-thumbnail-right wird verwendet, um ein rechtsbündig ausgerichtetes Miniaturbild hinzuzufügen.
<div class="list">
<a class="item item-thumbnail-left" href="../index.html">
<img src="cover.jpg.html">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Inset-Liste
Wir können eine Liste in einen Container einbetten, und die Liste wird nicht in voller Breite angezeigt.
Der Stil für eine Inset-Liste ist: list list-inset. Der Unterschied zu einer regulären Liste besteht darin, dass sie Außenabstände hat, ähnlich wie Tabs.
Inset-Listen haben keinen Schatteneffekt, was sich beim Scrollen besser verhält.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
Weitere Erweiterungen