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.
En résumé
Les composants Ionic sont des éléments web réutilisables que vous utilisez comme des balises HTML normales dans votre code. Chaque composant est une combinaison de trois éléments fondamentaux : HTML (structure), CSS avec variables (style et thème), et JavaScript (fonctionnalités et logique). Les composants supportent les attributs, propriétés et événements, tout en encapsulant leurs styles via Shadow DOM pour éviter qu'ils n'interfèrent avec le reste de votre application.
Points clés
- Les composants Ionic s'ajoutent au code HTML comme des balises normales (ex: ion-button)
- Chaque composant enveloppe un élément HTML natif et y ajoute du style CSS et de la logique JavaScript
- Les composants peuvent être configurés via des attributs et des propriétés documentées dans la documentation officielle Ionic
- Les composants Ionic émettent des événements personnalisés que vous pouvez écouter et exploiter dans votre application
- L'architecture repose sur trois piliers : HTML (structure), CSS avec variables CSS (style et thème), JavaScript (contrôle et fonctionnalités)
- Shadow DOM et encapsulation des styles permettent une isolation visuelle et une application de thèmes généraux sans effets de bord
Questions fréquentes
Comment utilise-t-on un composant Ionic dans une application ?
Vous l'ajoutez simplement comme un élément HTML normal dans votre code, aux emplacements où vous souhaitez l'utiliser. Par exemple, le bouton Ionic s'ajoute avec la balise ion-button, exactement comme n'importe quel élément HTML classique.
Quels attributs et propriétés peut-on configurer sur les composants Ionic ?
Les attributs et propriétés disponibles dépendent du composant spécifique utilisé. La documentation officielle d'Ionic est le meilleur endroit pour connaître toutes les options de configuration possibles pour chaque composant, incluant des propriétés comme le style et le mode de remplissage.
Les composants Ionic peuvent-ils émettre des événements ?
Oui, les composants Ionic émettent des événements personnalisés que vous pouvez écouter et traiter. Par exemple, certains composants comme les menus déroulants émettent des événements de changement que vous pouvez capturer dans votre code.