Share
Quali sono i componenti ionici?
I componenti ionici, per la maggior parte, sono ciò che rende la tua app ibrida prendere vita. I componenti forniscono l'interfaccia utente per la tua app e Ionic viene fornito in bundle con oltre 28 componenti. Questi ti aiuteranno a creare una straordinaria prima impressione della tua app.
Naturalmente, non è possibile utilizzare tutti questi 28 componenti in un'unica app. Come decidere quali usare?
Beh, per fortuna ci sono componenti che troverai in quasi tutte le app. Nell'articolo precedente ti ho mostrato come navigare verso un'altra vista usando il pulsante Componente ionico. Tutto ciò di cui avevamo bisogno per creare questo pulsante era il seguente codice:
Qui, stiamo già utilizzando uno dei componenti ionici a nostra disposizione. Questa è la bellezza di Ionic: non dobbiamo preoccuparci di come è costruito il componente del pulsante, tutto ciò che dobbiamo sapere è come utilizzare correttamente il componente pertinente.
Quando utilizzare i componenti ionici?
Come principiante, dubito che ci sarà mai un'app che svilupperai che non farà uso di componenti ionici. È anche possibile sviluppare componenti personalizzati, ma questo è un argomento per un altro giorno per l'utilizzo avanzato di Ionic e Angular.
Con quanto sopra detto, diamo un'occhiata a come utilizzare il più comunemente usato componenti in applicazioni mobili ioniche:
Il componente delle diapositive normalmente funge da introduzione per le app e di seguito è un'immagine del suo utilizzo comune:
Le liste sono uno dei componenti che utilizzerai regolarmente anche nelle tue app Ionic. Dai uno sguardo allo screenshot qui sotto per un esempio.
Ora che abbiamo raccolto un po 'di informazioni sui componenti ionici, proviamo a mettere insieme alcuni di questi "elementi costitutivi". Andiamo avanti e aggiungiamo alcuni componenti al nostro progetto Ionic.
Useremo il progetto che abbiamo creato nel tutorial precedente e da allora casaè il punto di ingresso della nostra app, aggiungeremo delle diapositive al home.html file per aggiungere le nostre diapositive. Lo faremo navigando al home.html file in src / pagine / home e apportando le seguenti modifiche al file:
benvenuto Benvenuto in Hello World
Fai un po 'di lettura qui e scorri verso sinistra
Mondo ionico
Ancora un po 'di lettura qui e scorri verso sinistra
Scorri anche a destra :)
finire
Non puoi scorrere tutto il giorno. Vedi altro della mia app
Come puoi vedere sopra, abbiamo aggiunto tre diapositive usando il componente diapositive. Questo è dentro
Useremo un altro componente ionico: il componente dell'elenco. Per fare ciò, andiamo avanti e generiamo una nuova pagina intitolata la mia lista. Dovresti ricordare come generare una nuova pagina dal precedente tutorial usando il seguente comando: pagina ionica genera la mia lista.
Con la nostra pagina appena creata aggiunta alla nostra app, andiamo avanti e naviga verso my-list.html e modifica il file come segue:
La mia lista 1 2 3
Con il codice sopra aggiunto alla tua app, dovresti riuscire a visualizzare un elenco con tre elementi. Ora va bene, ma sono sicuro che ti piacerebbe vedere uno scorrimento fluido con accelerazione e decelerazione quando scorri la lista, giusto? Bene, è facile da raggiungere, abbiamo solo bisogno di una lista più ampia!
Si consideri il seguente codice all'interno del my-list.html file:
La mia lista 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Se aggiorni il tuo file con la lista più lunga sopra, vedrai lo scrolling con accelerazione e decelerazione.
Ora questo è un modo per creare una lista nel nostro progetto, ma sembrerà piuttosto noioso se avremo bisogno di creare un elenco con ancora più elementi. Ciò significherebbe scrivere
La documentazione ufficiale di Ionic mostra come utilizzare un approccio diverso per compilare un elenco con gli elementi:
La mia lista
La magia nel codice sopra è l'uso della direttiva Angular: * ngFor. Non ci addentreremo più in profondità su cosa sia questa direttiva e cosa faccia, ma in breve, itera su una raccolta di dati, permettendoci di creare elenchi e tabelle di presentazione dei dati nella nostra app. elementi è una variabile che contiene i nostri dati, e articolo è compilato con ogni voce in quella lista. Se vuoi saperne di più su questa direttiva, dai un'occhiata alla documentazione ufficiale di Angular.
Con quella conoscenza, miglioriamo il nostro progetto con * ngFor direttiva. Modifica il my-list.html file per riflettere quanto segue:
La mia lista 
Titolo dell'oggetto
Item.subTitle
Molte cose stanno accadendo qui. Il voce-start attributo significa che l'avatar sarà allineato sul lato destro. Ogni voce di elenco contiene anche un tag di intestazione () e un tag di paragrafo ().
Quindi, in sostanza, puoi anche aggiungere componenti aggiuntivi all'interno del componente lista. Dai un'occhiata a un altro grande esempio di come ottenere questo risultato nell'Elenco schede in esempio dai documenti ionici. Di nuovo, implementando * ngFor in quell'esempio sarà di beneficio.
Ora, torniamo al nostro codice, il nostro articolo nel elementi contiene titolo, sottotitolo, e Immagine. Andiamo avanti e facciamo i seguenti cambiamenti all'interno del nostro my-list.ts file:
export class MyListPage items: any; costruttore (public navCtrl: NavController, public navParams: NavParams) this.items = [title: 'Item 1', sottotitolo: 'Sub title 1', image: 'http://placehold.it/50', titolo: "Articolo 2", sottotitolo: "Titolo secondario 2", immagine: "http://placehold.it/50", titolo: "Articolo 3", sottotitolo: "Titolo secondario 3", immagine: "http : //placehold.it/50 ', title:' Item 4 ', sottotitoli:' Sub title 4 ', immagine:' http://placehold.it/50 ', title:' item 5 ', sottotitolo: "Sottotitolo 5", immagine: "http://placehold.it/50", titolo: "elemento 6", sottotitolo: "Sottotitolo 6", immagine: "http://placehold.it/50 ', titolo:' elemento 7 ', sottotitolo:' Titolo secondario 7 ', immagine:' http://placehold.it/50 ', titolo:' elemento 8 ', sottotitolo:' Titolo secondario 8 ', immagine: 'http://placehold.it/50', titolo: 'item 9', sottotitolo: 'Sub title 9', immagine: 'http://placehold.it/50', titolo: 'item 10', sottotitolo: "Sottotitolo 10", immagine: "http://placehold.it/50"]
Nell'esempio sopra, stiamo popolando i nostri articoli all'interno del nostro file costruttore, my-list.ts. Questi saranno visualizzati all'interno del nostro modello di pagina, il my-list.html file. Questi dati possono provenire da qualsiasi fonte: un database locale, un input dell'utente o un'API REST esterna. Ma per il bene di questo esempio, stiamo solo hard-coding dei dati.
Sebbene non abbiamo trattato tutti i componenti ionici, gli stessi principi si applicano agli altri. Vorrei incoraggiarti a giocare e testare il resto dei componenti e iniziare a familiarizzare con il loro utilizzo. Come ho detto all'inizio, questi componenti saranno gli elementi costitutivi di ogni applicazione ionica che tu abbia mai costruito!
Nel frattempo, controlla alcuni dei nostri altri post sullo sviluppo di app Ionic.
Accentsconagua
