IONIC Section 4 - 4.5 Présentation de la documentation IONIC

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Maintenant que notre projet Ionic est configuré, la question naturelle est : quels composants pouvons-nous utiliser ? Ionic en propose plus d'une centaine, prêts à l'emploi, et tous sont catalogués dans la documentation officielle. Cette doc va devenir votre meilleure compagne tout au long du cours et au-delà.

Naviguer dans la doc officielle

Le site ionicframework.com propose une section Docs dans laquelle on retrouve tous les composants. Je n'insisterai jamais assez : ne cherchez pas à les retenir par cœur, parcourez-les, utilisez-les, et la mémorisation viendra naturellement. Cette documentation est tenue à jour automatiquement à partir du code source, ce qui en fait la source de vérité la plus fiable.

Prenons l'exemple de la catégorie Buttons. Sur la droite, un aperçu smartphone montre les variations possibles : boutons success, warning, danger, mais aussi des tailles différentes avec light, medium ou dark. L'attribut expand contrôle le comportement de remplissage en largeur. Chaque composant dispose de sa propre fiche avec son rôle, ses méthodes de configuration générale (comme fill pour outline / solid / clear), et de nombreux exemples de code.

Sur chaque fiche, vous trouverez aussi :

• la version JavaScript et la version Angular du même exemple ;
• la liste exhaustive des propriétés que l'on peut passer comme attributs, avec leurs valeurs autorisées ;
• les événements émis par le composant (clic, focus, change…) ;
• les variables CSS que l'on peut surcharger pour personnaliser l'apparence.

Ce dernier point devient capital dès qu'on aborde le style, car il permet d'ajuster finement chaque composant sans casser son encapsulation. Cette documentation est donc une mine d'informations. Avec ces repères en tête, nous pouvons maintenant nous lancer dans la construction de notre petit plan budgétaire. Direction la prochaine vidéo.