Share
Care sunt componentele ionice?
Componentele ionice, în cea mai mare parte, sunt ceea ce face ca aplicația dvs. hibrid să revină la viață. Componentele furnizează interfața cu utilizatorul pentru aplicația dvs., iar Ionic vine în pachet cu peste 28 de componente. Acestea vă vor ajuta să creați o primă impresie uimitoare a aplicației dvs..
Desigur, nu puteți utiliza toate aceste 28 de componente într-o singură aplicație. Cum să decideți ce dintre acestea să utilizați?
Ei bine, din fericire există componente pe care le veți găsi în aproape fiecare aplicație. În articolul precedent v-am arătat cum să navigați la o altă vizualizare utilizând butonul Componenta ionică. Tot ce aveam nevoie pentru a crea acest buton a fost următorul cod:
Aici, deja folosim una din componentele ionice disponibile pentru noi. Aceasta este frumusețea ionică: nu trebuie să ne preocupăm de modul în care este construită componenta buton, tot ce trebuie să știm este cum să folosim în mod corespunzător componenta relevantă.
Când să utilizați componentele ionice?
Ca începător, mă îndoiesc că va exista vreodată o aplicație pe care o dezvolți, care nu va folosi componentele ionice. Este, de asemenea, posibil să vă dezvoltați propriile componente personalizate, dar acesta este un subiect pentru o altă zi pentru utilizare avansată a ionic și unghiular.
Cu cele spuse mai sus, să aruncăm o privire asupra modului de utilizare cel mai frecvent utilizat componente în aplicații mobile ionice:
Componenta de diapozitive servește în mod normal ca un intro pentru aplicații, iar mai jos este o imagine a utilizării comune:
Listele sunt una dintre componentele pe care le veți folosi în mod regulat și în aplicațiile dvs. ionice. Uitați-vă la imaginea de mai jos pentru un exemplu.
Acum, că am adunat câteva informații despre componentele ionice, să încercăm să punem împreună câteva dintre aceste "blocuri". Să mergem mai departe și să adăugăm câteva componente la proiectul nostru ionic.
Vom folosi proiectul pe care l-am creat în tutorialul anterior și de atunci Acasăeste punctul de intrare al aplicației, vom adăuga diapozitive la home.html fișier pentru a adăuga diapozitivele noastre. Vom face acest lucru navigând la home.html fișier în src / pagini / home și efectuarea următoarelor modificări ale fișierului:
Bine ati venit Bun venit la Hello World
Faceți câteva citiri aici și glisați la stânga
Lumea Ioneză
Citiți mai multe aici și glisați la stânga
Deplasarea corectă funcționează prea :)
finalizarea
Nu poți să treci toată ziua. Vedeți mai multe din aplicația mea
După cum puteți vedea mai sus, am adăugat trei diapozitive utilizând componenta diapozitive. Asta e înăuntru
Vom folosi o altă componentă ionică: componenta listă. Pentru a face acest lucru, hai să mergem mai departe și să generăm o pagină nouă intitulată lista mea. Ar trebui să vă amintiți cum să generați o pagină nouă din tutorialul anterior utilizând următoarea comandă: ionic genera pagina mea lista.
Prin adăugarea noii noastre pagini în aplicația noastră, hai să mergem și să navigăm la mi-list.html și editați fișierul după cum urmează:
Lista mea 1 2 3
Cu codul de mai sus adăugat la aplicația dvs., ar trebui să puteți vedea o listă cu trei elemente. Acum e bine, dar sunt sigur că doriți să vedeți o derulare ușoară cu accelerație și decelerare când parcurgeți lista, nu? E ușor de realizat - avem nevoie de o listă mai mare!
Luați în considerare următorul cod în interiorul mi-list.html fişier:
Lista mea 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Dacă actualizați fișierul cu lista mai lungă de mai sus, veți vedea derularea cu accelerație și decelerare.
Acum, aceasta este o modalitate de a crea o listă în proiectul nostru, dar va părea destul de enervant dacă va trebui să creați o listă cu mai multe elemente. Asta ar însemna scrierea
Documentația oficială ionică arată cum se folosește o abordare diferită pentru popularea unei liste cu elemente:
Lista mea
Magia din codul de mai sus este folosirea directivei Angulare: * ngFor. Nu vom fi scufundați mai adânc în ceea ce este această directivă și ceea ce face, dar pe scurt, aceasta reiterează o colecție de date, permițându-ne să construim liste de prezentări de date și tabele în aplicația noastră. articole este o variabilă care conține datele noastre și articol este completat cu fiecare articol din această listă. Dacă doriți să aflați mai multe despre această directivă, vă rugăm să aruncați o privire la documentația oficială angulară.
Cu aceste cunoștințe, să îmbunătățim proiectul nostru cu * ngFor directivă. Editați mi-list.html fișier pentru a reflecta următoarele:
Lista mea 
Item.title
Item.subTitle
Multe lucruri se întâmplă aici. element de pornire atributul înseamnă că avatarul va fi aliniat la partea dreaptă. Fiecare element de listă conține, de asemenea, o etichetă antet () și un etichetă paragraf ().
Prin urmare, în principiu, puteți adăuga componente suplimentare în componenta listei. Aruncați o privire la un alt exemplu minunat de a realiza acest lucru în exemplul List In Cards din documentele ionice. Din nou, punerea în aplicare * ngFor în acest exemplu va fi de folos.
Acum, înapoi la codul nostru, al nostru articol în articole conține titlu, subtitlu, și imagine. Să mergem mai departe și să facem următoarele schimbări în interiorul nostru mi-list.ts fişier:
clasa de export MyListPage items: any; constructor (public navCtrl: NavController, navParams public NavParams) this.items = [title: 'Item 1', subtitlu: 'Subtitul 1', image: 'http://placehold.it/50', title: 'Subtitlul 2', subtitlu: 'Subtitlul 2', imagine: 'http://placehold.it/50', title: 'Item 3', subtitlu: : // placehold.it/50 ', title:' Item 4 ', subtitlu:' Subtitlul 4 ', imagine:' http://placehold.it/50 ', title:' item 5 ', subtitlu: 'Subtitlul 5', imagine: 'http://placehold.it/50', titlu: 'item 6', subtitlu: 'Subtitlul 6', image: 'http://placehold.it/50 ', titlu:' item 7 ', subtitlu:' Subtitlul 7 ', imagine:' http://placehold.it/50 ', titlul:' item 8 ' "http://placehold.it/50", titlu: "element 9", subtitlu: "Subtitlul 9", imagine: "http://placehold.it/50", titlul: "elementul 10"; subtitlu: "Subtitlul 10", imagine: "http://placehold.it/50"]
În exemplul de mai sus, stocăm articolele noastre în fișierul constructor, mi-list.ts. Acestea vor fi afișate în interiorul șablonului paginii noastre mi-list.html fişier. Aceste date pot proveni din orice sursă: o bază de date locală, o intrare de utilizator sau un API REST extern. Dar, de dragul acestui exemplu, suntem doar greu de codificare a datelor.
Deși nu am acoperit toate componentele ionice, aceleași principii se aplică și celorlalte. Aș dori să vă încurajez să jucați și să testați restul componentelor și să începeți să vă familiarizați cu utilizarea acestora. Așa cum am menționat chiar la început, aceste componente vor fi elementele de bază ale fiecărei aplicații ionice pe care o veți construi vreodată!
Între timp, verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor ionice.
Accentsconagua
