Ionic From Scratch: Travailler avec des composants ioniques

Que sont les composants ioniques?

Composants ioniques, pour la plupart, c’est ce qui donne vie à votre application hybride. Les composants fournissent l’interface utilisateur de votre application et Ionic est livré avec plus de 28 composants. Ceux-ci vous aideront à créer une première impression incroyable de votre application.

Bien sûr, vous ne pouvez pas utiliser tous ces 28 composants dans une seule application. Comment décider lesquels utiliser?

Eh bien, heureusement, il existe des composants que vous trouverez dans presque toutes les applications. Dans l’article précédent, je vous ai montré comment accéder à une autre vue en utilisant le Bouton de composant ionique. Tout ce dont nous avions besoin pour créer ce bouton était le code suivant:

Ici, nous utilisons déjà l’un des composants Ionic dont nous disposons. C’est la beauté d’Ionic: nous n’avons pas à nous préoccuper de la façon dont le composant bouton est construit, tout ce que nous devons savoir est comment utiliser correctement le composant concerné.

Quand utiliser les composants ioniques?

En tant que débutant, je doute qu’il y ait jamais une application que vous développerez qui n’utilisera pas de composants Ionic. Il vous est également possible de développer vos propres composants personnalisés, mais c’est un sujet pour un autre jour pour une utilisation avancée de Ionic et Angular.

Cela dit, voyons comment utiliser le le plus couramment utilisé composants dans les applications mobiles Ionic:

Composant de diapositives

le composant de diapositives sert normalement d’intro pour les applications, et ci-dessous est une image de son utilisation courante:

Diapositives utilisées dans une introduction pour une application

Composant de liste

Listes sont l’un des composants que vous utiliserez également régulièrement dans vos applications Ionic. Jetez un œil à la capture d’écran ci-dessous pour un exemple.

Exemple de liste dans une application

Ajout de composants à votre projet

Maintenant que nous avons rassemblé un peu d’informations sur les composants Ionic, essayons de rassembler quelques-uns de ces «blocs de construction». Allons-y et ajoutons quelques composants à notre projet Ionic.

Nous utiliserons le projet que nous avons créé dans le tutoriel précédent, et depuis domicile est le point d’entrée de notre application, nous ajouterons des diapositives au home.html fichier pour ajouter nos diapositives. Nous le ferons en accédant au home.html déposer dans src / pages / accueil et apportez les modifications suivantes au fichier:

Comme vous pouvez le voir ci-dessus, nous avons ajouté trois diapositives à l’aide du composant diapositives. C’est à l’intérieur <ion-slide>Content here...</ion-slide>. Vous pouvez générer autant de diapositives que vous le souhaitez, mais pour les besoins de cet exemple, nous n’en avons créé que trois.

Nous utiliserons un autre composant Ionic: le composant list. Pour ce faire, allons-y et générons une nouvelle page intitulée ma liste. Vous devez vous rappeler comment générer une nouvelle page à partir du didacticiel précédent à l’aide de la commande suivante: ionic generate page my-list.

Avec notre page nouvellement créée ajoutée à notre application, allons-y et accédez à ma-liste.html et modifiez le fichier comme suit:

Avec le code ci-dessus ajouté à votre application, vous devriez pouvoir voir une liste avec trois éléments. Maintenant c’est bien, mais je suis sûr que vous aimeriez voir un défilement fluide avec accélération et décélération lorsque vous faites défiler la liste, n’est-ce pas? Eh bien, c’est facile à réaliser – nous avons juste besoin d’une liste plus longue!

Considérez le code suivant dans le ma-liste.html fichier:

Si vous mettez à jour votre fichier avec la liste plus longue ci-dessus, vous verrez un défilement avec accélération et décélération.

Maintenant, c’est une façon de créer une liste dans notre projet, mais cela semblera assez ennuyeux si nous devons créer une liste avec encore plus d’éléments. Cela voudrait dire écrire <ion-item>...content...</ion-item> pour chacun. Heureusement, il existe un meilleur moyen, et même en tant que débutant, vous devriez essayer de suivre cette même méthode lorsque vous travaillez avec de grandes quantités de données et d’informations.

L’officiel Documentation ionique montre comment utiliser une approche différente pour remplir une liste avec des éléments:

La magie dans le code ci-dessus est l’utilisation de la directive Angular: *ngFor. Nous n’allons pas approfondir ce qu’est cette directive et ce qu’elle fait, mais en bref, elle itère sur une collection de données, ce qui nous permet de créer des listes et des tableaux de présentation de données dans notre application. items est une variable qui contient nos données, et item est rempli avec chaque élément de cette liste. Si vous souhaitez en savoir plus sur cette directive, veuillez jetez un œil à la documentation officielle Angular.

Forts de ces connaissances, améliorons notre projet avec le *ngFor directif. Modifier le ma-liste.html fichier pour refléter ce qui suit:

Beaucoup de choses se passent ici. le <ion-list> contient une série de <ion-avatar> Composants. le item-start attribut signifie que l’avatar sera aligné sur le côté droit. Chaque élément de liste contient également une balise d’en-tête (<h2>) et une balise de paragraphe (<p>).

Donc, fondamentalement, vous pouvez également ajouter des composants supplémentaires à l’intérieur du composant de liste. Jetez un œil à un autre excellent exemple de la façon d’y parvenir dans le Exemple de liste dans les cartes de la documentation Ionic. Encore une fois, la mise en œuvre *ngFor dans cet exemple sera utile.

Maintenant, revenons à notre code, notre article dans articles contient Titre, Sous-titre, et image. Allons-y et apportons les modifications suivantes dans notre ma-liste.ts fichier:

Dans l’exemple ci-dessus, nous remplissons nos éléments dans notre fichier constructeur, ma-liste.ts. Ceux-ci seront affichés dans notre modèle de page, le ma-liste.html fichier. Ces données peuvent provenir de n’importe quelle source: une base de données locale, une entrée utilisateur ou une API REST externe. Mais pour le bien de cet exemple, nous codons simplement les données en dur.

Conclusion

Bien que nous n’ayons pas couvert tous les composants ioniques, les mêmes principes s’appliquent aux autres. Je voudrais vous encourager à jouer et à tester le reste des composants et à commencer à vous familiariser avec leur utilisation. Comme je l’ai mentionné au début, ces composants seront les éléments de base de chaque application Ionic que vous construirez jamais!

En attendant, consultez certains de nos autres articles sur le développement d’applications Ionic.

En relation :  Créez de belles pages de journal de bulletins numériques avec ces 6 applications de prise de notes
Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.