IONIC Section 4 - 4.3 Description des composants Ionics

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

Bonjour à tous et bienvenue dans cette vidéo. Dans la dernière vidéo, nous avons vu le bloc de construction d’application de base. Maintenant, on peut se poser la question de comment utilisons-nous ces components ? Dans un projet où nous avons importé cette bibliothèque de component Ionics, il existe différentes de manière de l’importer, comme vous le découvrirez également dans ce cours. Ainsi, dans un projet dans lequel nous importons cette bibliothèque, nous avons accès à ce noyau d’Ionic. Et nous les utilisons comme des éléments HTML normaux. Il est maintenant très important de comprendre que si vous n’avez jamais travaillé avec des component web, le terme peut être ou sera tout nouveau pour vous et vous ne saurez peut-être pas comment les utiliser. En fait, vous devez simplement les ajouter avec leurs balises dans votre code HTML, aux emplacements où vous souhaitez les utiliser, comme pour les éléments HTML classique. En voici un exemple, ce serait le bouton « ion», essentiellement un bouton fourni par Ionic qui enveloppe un bouton HTML normal natif, puis lui ajoute un style supplémentaire, ce qui est également important. Ces composants web ne concernent pas seulement des éléments pré-stylés, ils leur ajoutent également une logique Javascript ou du moins le peuvent-ils souvent, puis ce bouton peut être configurer ici, il peut recevoir des attributs, tout comme vous pouvez définir des attributs sur des éléments HTML normaux. Mais bien sûr, les attributs que vous pouvez définir ici les propriétés que vous pouvez définir sur ce bouton dépendent également du component Web que vous utilisez, car tout ce que vous pouvez configurer ici, comme « fill» qui définit le style de bouton. Ce sont des paramètres que vous pouvez configurer et les documents officiels sont le lieu idéal pour connaître les attributs et propriétés que vous pouvez définir sur ces components Web. Donc nous l’utilisons comme un élément HTML normal il supporte les attributs et les propriétés et ces éléments peuvent également émettre des événements. C’est aussi très intéressant, en fait, vous émettez également des évènements clients que vous pouvez écouter, par exemple, un évènement spécial de changement d’ion pour certains menus déroulants, et nous verrons certains de ces événements tout au long du cours. Maintenant, un bouton que j’ai mentionné est finalement une combinaison des 3 moteurs principaux du développement Web frontal. Il contient du code HTML et ici, nous avons les éléments HTML normaux pris en charge, et à la fin, tous les component Web sont constitués de ces éléments HTML. C’est fondamentalement un morceau de code HTML pré-structuré. Cependant, nous n’avons pas seulement du code HTML, nous avons aussi du style CSS et ici vous voyez quelque chose de spécial pour la valeur, pour la couleur, pour ce qui est différent. Il s’agit d’une variable CSS qui facilite le style de ce component Web depuis l'extérieur et l’application d’un thème général. Nous y plongerons de plus près dans le style et le thème du cours. Mais comme je l’ai mentionné, un component Web n’est pas simplement une combinaison de HTML et de CSS, nous avons également une partie Javascript qui ajoute certaines fonctionnalités à ce component, qui exposées propriétés pouvant être définies, qui contrôle les éléments de ce type que nous pouvons définir. La couleur ou le mode de remplissage de ce bouton. Donc tout cela est contrôlé par Javascript et tout cela est emballé ensemble et encapsulé dans un objet Javascript que vous pouvez ajouter et que nous pouvons ajouter au code HTML du DOM avec ce sélecteur de boutons Ionics. Maintenant dans notre process, cela utilise également technique appelée les variables DOM et CSS de « Shadow», qui aide à encapsuler les styles de ce component de sorte que le style appliqué aux éléments de ce component ne se répandent pas sur votre application ou bien sur d’autres. De plus, les composants Ionic Web chargent automatiquement tous les polyfill nécessaires pour les faire fonctionner sur des navigateurs plus anciens en remplissant automatiquement toutes les informations requises. Cette vidéo touche à sa fin, je vous retrouve donc dans la prochaine vidéo