IONIC Section 4 - 4.3 Description des composants Ionics

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

Dans la vidéo précédente, nous avons survolé les blocs de construction d'une application Ionic. Reste une question essentielle : comment utilise-t-on concrètement ces composants Ionic dans un projet ? Il existe plusieurs manières d'importer la bibliothèque, et nous les verrons au fil du cours. Le principe de base : on importe le cœur Ionic et on utilise ses composants comme on utiliserait des éléments HTML natifs.

Web Components : la base

Si vous n'avez jamais travaillé avec des Web Components, le terme peut être nouveau. Concrètement, vous placez simplement leur balise dans votre HTML, à l'endroit où vous voulez les utiliser, exactement comme une balise standard. Exemple typique : <ion-button>, qui enveloppe un <button> HTML natif et lui applique le style et les comportements Ionic. Ce qui distingue un Web Component d'un simple sélecteur CSS, c'est qu'il embarque aussi de la logique JavaScript en plus du style.

Ces composants se configurent via des attributs — exactement comme une balise HTML classique. Les attributs disponibles dépendent du composant : fill, color, shape, expand… Et c'est précisément pour les connaître que la documentation officielle est la référence : elle liste les propriétés, leurs valeurs autorisées et les événements émis. Car ces composants émettent aussi des événements personnalisés (par exemple ionChange sur certains menus déroulants) que vous pouvez écouter.

Un Web Component est en réalité la combinaison des trois piliers du développement front : du HTML structurant, du CSS (avec ici des variables CSS dédiées qui rendent le restylage simple depuis l'extérieur) et du JavaScript qui expose des propriétés configurables et contrôle le comportement. Le tout est encapsulé dans un objet JavaScript injecté dans le DOM grâce au sélecteur dédié, par exemple ion-button.

Ionic exploite aussi le Shadow DOM, qui isole les styles internes du composant pour qu'ils n'entrent pas en conflit avec ceux de votre application. En prime, la librairie charge automatiquement les polyfills nécessaires sur les navigateurs anciens, garantissant la compatibilité partout sans intervention de votre part. Rendez-vous dans la prochaine vidéo.