Share
Wat zijn ionische componenten?
Ionische componenten zijn voor het grootste deel wat uw hybride app tot leven brengt. Componenten bieden de gebruikersinterface voor uw app en Ionic wordt geleverd met meer dan 28 onderdelen. Hiermee kun je een geweldige eerste indruk van je app maken.
Natuurlijk kunt u al deze 28 componenten niet in één app gebruiken. Hoe te beslissen welke te gebruiken?
Welnu, gelukkig zijn er componenten die je in bijna elke app zult vinden. In het vorige artikel heb ik je laten zien hoe je naar een andere weergave kunt navigeren met de Ionic Component Button. Alles wat we nodig hadden om deze knop te maken was de volgende code:
Hier gebruiken we al een van de Ionische componenten die voor ons beschikbaar zijn. Dat is het mooie van Ionic: we hoeven ons niet bezig te houden met hoe de knopcomponent is geconstrueerd, het enige wat we moeten weten is hoe we de relevante component correct kunnen gebruiken.
Wanneer Ionische componenten te gebruiken?
Als een beginner, betwijfel ik dat er ooit een app die je ontwikkelt zal zijn die geen gebruik zal maken van Ionische componenten. Het is ook mogelijk voor u om uw eigen aangepaste componenten te ontwikkelen, maar dat is een onderwerp voor een andere dag voor geavanceerd gebruik van Ionic en Angular.
Laten we, met het bovenstaande gezegd, eens kijken hoe we het kunnen gebruiken meest gebruikt componenten in Ionische mobiele applicaties:
De dia-component dient normaal gesproken als een intro voor apps, en hieronder ziet u een afbeelding van het algemene gebruik ervan:
Lijsten zijn een van de componenten die u ook regelmatig zult gebruiken in uw Ionische apps. Bekijk de screenshot hieronder voor een voorbeeld.
Nu we wat informatie over Ionische componenten hebben verzameld, laten we proberen een paar van deze 'bouwstenen' bij elkaar te voegen. Laten we doorgaan en een aantal componenten toevoegen aan ons Ionische project.
We zullen het project gebruiken dat we in de vorige tutorial en sindsdien hebben gemaakt huisis het beginpunt van onze app, we zullen dia's toevoegen aan de home.html bestand om onze dia's toe te voegen. We doen dit door te navigeren naar de home.html bestand in src / pages / home en de volgende wijzigingen in het bestand aanbrengen:
Welkom Welkom bij Hello World
Lees hier wat en ga naar links
Ionische wereld
Nog wat meer hier te lezen en naar links te vegen
Goed jatten werkt ook :)
Af hebben
Je kunt de hele dag niet vegen. Bekijk meer van mijn app
Zoals u hierboven kunt zien, hebben we drie dia's toegevoegd met behulp van de component dia's. Dit is binnen
We zullen een andere Ionische component gebruiken: de lijstcomponent. Om dit te doen, laten we doorgaan en een nieuwe pagina genereren met de titel mijn lijst. U moet onthouden hoe u een nieuwe pagina uit de vorige zelfstudie genereert met behulp van de volgende opdracht: ionische genereren pagina mijn-lijst.
Met onze nieuw gemaakte pagina toegevoegd aan onze app, laten we doorgaan en navigeren naar mijn-list.html en bewerk het bestand als volgt:
Mijn lijst 1 2 3
Met de bovenstaande code toegevoegd aan uw app, zou u een lijst met drie items moeten kunnen zien. Dat is goed, maar ik ben er zeker van dat je soepel wilt scrollen met versnelling en vertraging wanneer je door de lijst bladert, toch? Nou, dat is eenvoudig te bereiken - we hebben alleen een grotere lijst nodig!
Beschouw de volgende code in de mijn-list.html het dossier:
Mijn lijst 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Als u uw bestand bijwerkt met de langere lijst hierboven, ziet u scrollen met versnelling en vertraging.
Dit is een manier om een lijst in ons project te maken, maar het zal behoorlijk vervelend lijken als we een lijst met nog meer items moeten maken. Dat zou schrijven betekenen
De officiële Ionic-documentatie laat zien hoe u een andere aanpak kunt gebruiken voor het invullen van een lijst met items:
Mijn lijst
De magie in de bovenstaande code is het gebruik van de hoekige richtlijn: * ngFor. We zullen niet dieper ingaan op wat deze richtlijn is en wat deze doet, maar kortweg itereert het over een verzameling gegevens, waardoor we lijsten met gegevenspresentaties en tabellen kunnen bouwen in onze app. items is een variabele die onze gegevens bevat, en item wordt ingevuld met elk item in die lijst. Als u meer wilt weten over deze richtlijn, bekijk dan de officiële hoekige documentatie.
Met die kennis, laten we ons project verbeteren met de * ngFor richtlijn. Bewerk de mijn-list.html bestand om het volgende weer te geven:
Mijn lijst 
titel van het item
Item.subTitle
Er gebeuren hier veel dingen. De post-start attribuut betekent dat de avatar wordt uitgelijnd aan de rechterkant. Elk item in de lijst bevat ook een header-tag () en een alineatag ().
In principe kunt u dus ook extra componenten toevoegen binnen het lijstonderdeel. Kijk eens naar een ander goed voorbeeld van hoe dit te bereiken in het List In Cards-voorbeeld van de Ionic-documenten. Nogmaals, implementeren * ngFor in dat voorbeeld zal van nut zijn.
Nu, terug naar onze code, onze item in items bevat titel, subtitel, en beeld. Laten we doorgaan en de volgende veranderingen aanbrengen in onze mijn-list.ts het dossier:
exportklasse MyListPage items: any; constructor (public navCtrl: NavController, public navParams: NavParams) this.items = [title: 'Item 1', subTitle: 'Sub title 1', image: 'http://placehold.it/50', titel: 'Item 2', ondertitel: 'Subtitel 2', afbeelding: 'http://placehold.it/50', title: 'Item 3', subTitle: 'Sub title 3', afbeelding: 'http : //placehold.it/50 ', title:' Item 4 ', subTitle:' Sub title 4 ', afbeelding:' http://placehold.it/50 ', title:' item 5 ', subtitel: 'Subtitel 5', afbeelding: 'http://placehold.it/50', titel: 'item 6', subtitel: 'Subtitel 6', afbeelding: 'http://placehold.it/50 ', titel:' item 7 ', subTitle:' Subtitel 7 ', afbeelding:' http://placehold.it/50 ', titel:' item 8 ', subTitle:' Sub title 8 ', afbeelding: 'http://placehold.it/50', titel: 'item 9', subTitle: 'Subtitel 9', afbeelding: 'http://placehold.it/50', titel: 'item 10', subtitel: 'Subtitel 10', afbeelding: 'http://placehold.it/50']
In het bovenstaande voorbeeld vullen we onze items in ons constructorbestand, mijn-list.ts. Deze worden weergegeven in onze paginasjabloon, de mijn-list.html het dossier. Deze gegevens kunnen afkomstig zijn van elke bron: een lokale database, gebruikersinvoer of een externe REST-API. Maar omwille van dit voorbeeld, coderen we de gegevens gewoon hard.
Hoewel we niet alle Ionische componenten hebben behandeld, zijn dezelfde principes van toepassing op de andere. Ik zou je willen aanmoedigen om rond te spelen en de rest van de componenten te testen en vertrouwd te raken met het gebruik ervan. Zoals ik al in het begin heb genoemd, zullen deze componenten de bouwstenen worden van elke Ionische applicatie die je ooit zult bouwen!
Bekijk in de tussentijd enkele van onze andere berichten over de ontwikkeling van Ionische apps.
Accentsconagua
