Share
Quels sont les composants ioniques?
Les composants ioniques, pour la plupart, sont 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. Cela vous aidera à 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?
Heureusement, il existe des composants que vous trouverez dans presque toutes les applications. Dans l'article précédent, je vous ai montré comment naviguer vers une autre vue à l'aide du 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 ioniques disponibles. C’est la beauté d’Ionic: nous n’avons pas à nous préoccuper de la façon dont le composant bouton est construit, nous avons simplement besoin de savoir comment utiliser correctement le composant approprié..
Quand utiliser les composants ioniques?
En tant que débutant, je doute qu'il y ait une application que vous développez qui n'utilise pas de composants ioniques. 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 des technologies ionique et angulaire..
Ceci étant dit, voyons comment utiliser le le plus couramment utilisé composants dans les applications mobiles ioniques:
Le composant diapositives sert normalement d’introduction pour les applications. Vous trouverez ci-dessous une image de son utilisation courante:
Les listes sont l’un des composants que vous utiliserez régulièrement dans vos applications Ionic. Regardez la capture d'écran ci-dessous pour un exemple.
Maintenant que nous avons rassemblé quelques informations sur les composants ioniques, essayons de rassembler quelques-uns de ces "blocs de construction". Allons-y et ajoutons quelques composants à notre projet Ionic.
Nous allons utiliser le projet que nous avons créé dans le précédent tutoriel, et depuis maisonest le point d'entrée de notre application, nous allons ajouter des diapositives au home.html fichier pour ajouter nos diapositives. Nous le ferons en naviguant vers le home.html déposer dans src / pages / home et en apportant les modifications suivantes au fichier:
Bienvenue Bienvenue dans Hello World
Faites un peu de lecture ici et balayez à gauche
Monde ionique
Encore un peu de lecture ici et glissez à gauche
Glisser à droite fonctionne aussi :)
terminer
Vous ne pouvez pas glisser toute la journée. Voir plus de mon application
Comme vous pouvez le voir ci-dessus, nous avons ajouté trois diapositives en utilisant le composant diapositives. C'est à l'intérieur
Nous allons utiliser un autre composant ionique: le composant liste. Pour ce faire, allons de l'avant 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: ionique générer une page ma liste.
Avec notre page nouvellement créée ajoutée à notre application, allons de l'avant et accédez à ma-liste.html et éditez le fichier comme suit:
Ma liste 1 2 3
Avec le code ci-dessus ajouté à votre application, vous devriez pouvoir voir une liste de trois éléments. Bon, ça va, mais je suis sûr que vous aimeriez voir défiler en douceur avec accélération et décélération lorsque vous faites défiler la liste, non? Eh bien, c'est facile à réaliser - nous avons juste besoin d'une liste plus longue!
Considérez le code suivant à l'intérieur du ma-liste.html fichier:
Ma liste 1 2 3 4 5 6 7 8 9 dix 11 12 13 14 15 16 17 18 19 20
Si vous mettez à jour votre fichier avec la liste plus longue ci-dessus, vous verrez défiler avec accélération et décélération.
C’est maintenant une façon de créer une liste dans notre projet, mais cela peut sembler assez ennuyant si nous devons créer une liste avec encore plus d’articles. Cela voudrait dire écrire
La documentation officielle d'Ionic montre comment utiliser une approche différente pour remplir une liste avec des éléments:
Ma liste
La magie dans le code ci-dessus est l'utilisation de la directive angulaire: * ngFor. Nous n'approfondirons pas en quoi consiste cette directive et ce qu'elle fait, mais en bref, elle parcourt une collection de données, ce qui nous permet de créer des listes et des tableaux de présentation des données dans notre application.. articles est une variable qui contient nos données, et article est rempli avec chaque élément de cette liste. Si vous souhaitez en savoir plus sur cette directive, veuillez consulter la documentation officielle Angular..
Avec cette connaissance, améliorons notre projet avec le * ngFor directif. Modifier le ma-liste.html fichier pour refléter les éléments suivants:
Ma liste 
item.title
item.subTitle
Beaucoup de choses se passent ici. le point de départ attribut signifie que l'avatar sera aligné sur le côté droit. Chaque élément de la liste contient également une balise d’en-tête () et une étiquette de paragraphe ().
Ainsi, vous pouvez également ajouter des composants supplémentaires au sein du composant de liste. Jetez un coup d'œil à un autre excellent exemple de la manière de réaliser ceci dans l'exemple Liste dans les cartes de la documentation Ionic. Encore une fois, la mise en œuvre * ngFor dans cet exemple sera bénéfique.
Maintenant, revenons à notre code, notre article dans articles contient Titre, Sous-titre, et image. Allons de l'avant et apportons les modifications suivantes dans notre my-list.ts fichier:
classe d'exportation MyListPage items: any; constructeur (navCtrl publique: NavController, navParams publique: NavParams) this.items = [titre: 'Item 1', sous-titre: 'Sub title 1', image: 'http://placehold.it/50', titre: 'Item 2', sous-titre: 'Sub title 2', image: 'http://placehold.it/50', titre: 'Item 3', sous-titre: 'Sub title 3', image: 'http : //placehold.it/50 ', title:' Item 4 ', sous-titre:' Sub title 4 ', image:' http://placehold.it/50 ', title:' item 5 ', sous-titre: "Sous-titre 5", image: "http://placehold.it/50", titre: "élément 6", sous-titre: "Sous-titre 6", image: "http://placehold.it/50 ', titre:' élément 7 ', sous-titre:' Sous titre 7 ', image:' http://placehold.it/50 ', titre:' élément 8 ', sous-titre:' Sous titre 8 ', image: 'http://placehold.it/50', titre: 'élément 9', sous-titre: 'Sous titre 9', image: 'http://placehold.it/50', titre: 'élément 10', sous-titre: 'Sous-titre 10', image: 'http://placehold.it/50']
Dans l'exemple ci-dessus, nous remplissons nos éléments dans notre fichier constructeur., my-list.ts. Celles-ci seront affichées 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 dans l’intérêt de cet exemple, nous ne faisons que coder en dur les données..
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 à vous familiariser avec leur utilisation. Comme je l'ai mentionné au début, ces composants vont être les blocs de construction de toutes les applications Ionic que vous construirez jamais.!
En attendant, consultez certains de nos autres articles sur le développement d'applications Ionic.
Accentsconagua
