Il miglior tutorial lista ionico Nel 2024, in questo tutorial puoi imparare Con la lista di icone,lista Bottoni,Con Lista Avatar,Lista Thumbnail,Lista incorporato (lista nel riquadro),
List è un elementi di interfaccia ampiamente utilizzati, quasi sempre da utilizzare in tutte le app mobile.
La lista può essere un testo di base, pulsanti, interruttori, e altre icone di anteprima.
elemento della lista può essere qualsiasi elemento HTML. elementi contenitori necessari elenco di classe, ogni elemento della lista è necessaria categoria di elementi.
ionList ionItem e può facilmente supportare una varietà di modi interattivi, come l'editing di scorrimento, trascinare il tipo ed eliminare gli elementi.
<ul class="list">
<li class="item">
it.
</li>
</ul>
Siamo in grado di utilizzare la classe di elemento di divisione per creare un elenco di separazione, per impostazione predefinita, l'elenco delle voci in un diverso colore di sfondo e carattere in grassetto per distinguere, ma si può facilmente personalizzare la sua.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
it.
</div>
Siamo in grado di specificare un'icona sul lato sinistro o destro delle voci di elenco.
Utilizzare l'icona oggetto-icona a sinistra nella sinistra, oggetto-icona-destra impostazioni icona sul lato destro. Se avete bisogno di entrambi i lati della icona, le due classi vengono aggiunti a.
Gli esempi che seguono, abbiamo usato <a> etichetta nella voce della lista, in modo che ogni elemento della lista cliccabile.
elemento della lista quando si utilizza <a> o <button> elemento, se la destra dell'icona non viene aggiunto, verrà aggiunto automaticamente alle frecce.
Esempio, la prima voce solo le icone sulla sinistra, sulla seconda icona ha, c'è la terza icona a destra (così come note item-nota), il quarto ha un distintivo elementi (Marco).
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<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="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
Utilizzare voce-tasto-destro o il pulsante voce-button-sinistra sulle voci di elenco di classe.
<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>
it.
</div>
Utilizzare la voce-avatar creare avatar con una lista:
<div class="list">
<a class="item item-avatar" href="#">
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
it.
</div>
Miniatura voce-thumbnail-sinistra di classe per aggiungere la classe voce-thumbnail-destra allineato a sinistra viene utilizzata per aggiungere una miniatura sull'allineamento destra.
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
it.
</div>
Ci possono essere incorporati nel contenitore tra un elenco, l'elenco non visualizza l'intera larghezza.
lista stile in linea è: lista lista-Inset, con un elenco generale di differenza è che si imposta il margine (marign), simile alla scheda.
elenchi incorporati sono ombre, l'effetto sarà ancora meglio quando lo scorrimento.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
it.
</div>