Bonjour à tous! Dans cet article nous allons parler du design des applications Ionic. Concrètement comment vous allez pouvoir modifier l’apparence de vos applications le plus simplement possible.
Nous allons parler du langage qui nous permet de le faire sur Ionic, des méthodes pour chercher de nouvelles fonctionnalités et enfin de l’utilisation de Google Chrome pour tester vos designs en direct !
Comment modifier l’apparence de notre contenu dans Ionic ?
J’imagine que lorsque vous concevez mentalement votre application, vous lui ajoutez toutes sortes de design originaux comme des couleurs bien particulières ou encore un design très épuré.
Je vais vous montrer aujourd’hui qu’avec le framework Ionic et les langages web il est possible d’obtenir une infinité de résultats différents pour vos applications.
Depuis trois ans que je développe des applications avec Ionic, je n’ai jamais été bloqué par un design que je n’ai pas pu récréer. Les possibilités sont vraiment infinies et faciles à reproduire dans votre application.
Quel est le langage pour modifier l’apparence de mon application Ionic ?
Entrons dans le vif du sujet avec le langage qui nous permet de modifier l’apparence de notre application Ionic. Il s’agit ni plus ni moins du très populaire CSS, qui sert à styliser tous les sites web de la planète.
Encore une fois, Ionic est un framework multi-plateforme qui utilise les technologies du web pour construire des applications mobiles, les langages sont donc les mêmes que sur internet.
Par exemple, dans chacune de nos pages Ionic, nous allons trouver un fichier CSS, ou plutôt avec l’extension SCSS qui va nous permettre de modifier l’apparence de cette page.
Je peux prendre l’exemple de la page que je code actuellement:
src/app/contact/contact.page.scss
Et dans ce fichier scss, je vais coder sous forme d’accolades, tous les styles CSS que je souhaite ajouter à ma page Ionic.
Par exemple je peux donner une certaine taille à mes éléments <ion-card> ou encore déclarer des classes dans mon fichier CSS :
.linear_bg {
background-color: linear-gradient(
197deg,
#fdbb2d 0%,
#1a2a6c 100%
) !important;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ion-card {
width: 46%;
margin: 7px;
}Ceci va directement impacter mon fichier contact.page.html qui me permet de créer du contenu visuel dans mon application Ionic.
src/app/contact/contact.page.html
Je vous propose quelques liens pour vous familiariser avec le CSS si ce langage vous est inconnu:
- https://www.w3schools.com/css/
- https://developer.mozilla.org/fr/docs/Web/CSS
- https://openclassrooms.comfr/courses/css
Comment gérer les couleurs dans Ionic ?
Voyons maintenant l’une des choses les plus demandés dans les applications, il s’agit de modifier la couleur d’un éléments, ou plus généralement de donner un thème à votre application.
Ionic propose par défaut une série de couleurs prédéfinies qui conviennent pour la majorité des applications.
Vous pouvez retrouvez les déclarations de ces couleurs dans le fichier variables.scss :
src/theme/variables.scss
Prenons par exemple la couleur principale de votre application, dites « primary » qui sera la couleur par défaut de vos boutons par exemple. Cette couleur est définie de la manière suivante :
/** primary **/ --ion-color-primary: #34c173; --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #18c43c; --ion-color-primary-tint: #02a562;
Chaque variable représente une teinte de notre couleur, par exemple pour changer la couleur d’un bouton lorsque l’utilisateur clique dessus.
Chacune de ces teintes est associée à un code hexadécimal, ce code est unique et se réfère à une couleur très précise.
Pour comprendre les codes couleurs hexadécimaux, je vous invite à visiter le site de w3schools, qui propose une interface de création de couleur : https://www.w3schools.com/colors/colors_picker.asp
Vous pouvez donc consulter les valeurs des couleurs élémentaires de votre application Ionic.
Ce que je fais par exemple pour chacune de mes applications c’est que je modifie les valeurs de ma couleur primaire pour que le thème globale de l’application change.
L’utilité de ces couleurs par défauts d’Ionic, est qu’elle peuvent être utilisées directement dans nos éléments HTML. Prenons l’exemple d’un ion-item à qui nous voulons donner la couleur primaire.
Il nous suffit d’ajouter l’attribut « color » à notre élément, et à lui donner la valeur de notre couleur Ionic, par exemple « primary », « secondary » ou encore « warning »:
<ion-item lines="none" color="primary">
<ion-icon name="cafe" slot="start"></ion-icon>
<ion-icon name="more" slot="end"></ion-icon>
</ion-item>Je peux par exemple créer un ion-item d’une autre couleur, en changeant la valeur de mon attribut color:
<ion-item color="secondary" lines="none">
<ion-label>
ion-item in a card,
</ion-label>
</ion-item>Je peux également créer une boîte ion-card qui va contenir deux ion-item, dont je veux qu’ils soient tous les deux de la couleur tertiary, je dois donc ajouter à chaque ion-item l’attribut color= « tertiary » :
<ion-card>
<ion-item color="tertiary" lines="none">
<ion-icon name="cafe" slot="start"></ion-icon>
<ion-icon name="more" slot="end"></ion-icon>
</ion-item>
<ion-item color="tertiary" lines="none">
<ion-label>
ion-item in a card,
</ion-label>
</ion-item>
</ion-card>Voilà le résultat d’une succession d’ion-card contenant des ion-item de couleurs différentes:
Comment modifier en direct le style de mon application ?
L’un des avantages caché d’Ionic, c’est que vous développez vos applications sur un navigateur internet, ce qui vous donne accès à des tonnes d’outils.
Je vous conseille d’utiliser le navigateur Google Chrome qui propose selon moi les meilleures fonctionnalités pour développeurs.
Lorsque vous lancez votre application sur votre navigateur avec la commande:
ionic serve
Votre application s’ouvrira en plein écran. Vous pouvez à ce moment faire un clique-droit et cliquer sur inspecter. Un menu latéral s’ouvrira et vous permettra d’accéder à de multiples outils.
Je vous invite déjà s’il ne vous l’affiche pas par défaut à cliquer sur le menu « Elements » qui va vous permettre de visualiser en direct votre code HTML ainsi que toutes ses propriétés CSS associées.
Une autre fonctionnalité très utile de Google Chrome est de permettre de voir le rendu de votre application sur toutes les différentes tailles d’écran.
Vous pouvez par exemple cliquer sur la taille iPhone 6/7/8 pour visualiser votre application sur cette taille d’écran. Vous pouvez d’un instant à l’autre passer de l’iPhone à un Pixel, à un iPad ou encore à un Samsung.
Nous allons maintenant faire l’exercice de sélectionner une zone de notre application, et de lui appliquer un certain style CSS.
Cliquez sur le bouton ci-dessus et sélectionnez le header de votre page actuelle, le haut de votre page plus précisément.
Puis rendez-vous dans l’onglet « Styles » qui devrait s’afficher en bas à droite de votre écran. Repérez la première boîte qui comporte le texte grisé suivant:
element.style {
}Vous allez pouvoir dans cette boîte, ajouter toutes les propriétés CSS à votre élément sélectionné, à savoir le header de notre page.
Faisons un test simple en lui appliquant la propriété background-color avec la couleur prédéfinie blue :
element.style {
background-color: blue;
}Voilà ce que vous devriez voir sur votre écran:
Nous pouvons également ajouter d’autres propriétés pour obtenir le meilleur rendu possible. Par exemple dans ce cas, on veut pouvoir faire ressortir le titre de la page pour qu’il soit plus lisible.
On ajoute donc à notre boîte de style la propriété color pour donner une couleur spécifique à notre texte contenu dans le header:
element.style {
background-color: blue;
color: white;
}Voila le rendu de notre page affiché en direct:
Vous pouvez également tester toutes les couleurs de votre choix en cliquant sur une couleur. Chrome vous ouvre une fenêtre pour sélectionner la couleur de votre choix, et les modifications seront instantannées.
Comment ajouter un nouveau style CSS à mon application ?
Imaginons maintenant que vous souhaitez ajouter une propriété bien particulière à votre application, par exemple que vous souhaitez un fond en dégradé de couleur.
Disons que vous vous êtes renseigné sur le site w3shcools, et que vous êtes tombés sur cette page qui explique comment créer des dégradés de couleur en CSS: https://www.w3schools.com/css/css3_gradients.asp
Pour l’appliquer à votre application Ionic, rien de plus simple il suffit de créer une classe CSS à laquelle nous donnerons la propriété d’un fond dégradé.
Rendez-vous dans votre fichier CSS pour créer la classe suivante:
.bg_class{
--background: linear-gradient(
197deg,
#fdbb2d 0%,
#b21f1f 33.5%,
#1a2a6c 100%
) !important;
}Vous venez de créer la classe bg_class qui va vous créer un fond dégradé d’un angle de 197 degrès, de la couleur #fdbb2d à la couleur #1a2a6c, en passant par la couleur #b21f1f.
Il s’agit d’un dégradé bien spécifique, mais il aurait pu être plus simple par exemple:
.bg_class{
--background: linear-gradient(blue, red) !important;
}Mais pourquoi ajouter le mot « !important » à la fin de notre propriété CSS ? Tout simplement parce qu’Ionic propose déjà des propriétés CSS à nos pages, et que nous devons en ajouter « par dessus » celles-ci.
Avec le mot clé « !important », nous indiquons à notre navigateur que cette propriété est prioritaire et que c’est elle qui doit être lue par dessus toutes les autres.
Dernière chose, pourquoi utilisons-nous la variable –background au lieu de directement la propriété background-color ? Tout simplement parce que la couleur de fond de notre page Ionic est stockée dans la variable –background, et nous devons lui affecter une nouvelle valeur tout simplement.
Il est à noter que je dois utiliser cette déclaration uniquement pour certains éléments Ionic, qui possèdent une couleur bien spécifique par défaut.
Maintenant c’est à vous de jouer, ajoutez la classe bg_color à votre boîte ion-content:
<ion-content class="bg_class">
Et vous n’avez plus qu’à vous amusez avec Chrome pour tester tous les fonds dégradés que vous imaginez!
Comment positionner les éléments de mon application ?
Pour finir ce tutoriel sur le design de vos applications Ionic, nous allons voir l’une des fonctionnalités les plus demandées. Il s’agit de personnaliser l’agencement de vos éléments, par exemple de nos ion-card.
Pour cela, nous allons utiliser les Flex Box, il s’agit d’un ensemble de propriétés CSS extrêmement pratiques qui permettent de positionner à la verticale ou à l’horizontale tout votre contenu HTML.
Petite démonstration :
Rendez-vous dans votre fichier HTML, par exemple dans:
src/app/contact/contact.page.html
Et ajoutez la boîte div suivante, à laquelle vous attribuez la classe « flex »:
<div class="flex"> </div>
Maintenant, positionnez toutes vos ion-card à l’intérieur de cette balise div, pour que tout soit contenu à l’intérieur de la boîte div et la classe flex:
<div class="flex">
<ion-card>
<ion-item lines="none" color="primary">
<ion-icon name="cafe" slot="start"></ion-icon>
<ion-icon name="more" slot="end"></ion-icon>
</ion-item>
<ion-item lines="none" color="primary">
<ion-label>
ion-item in a card,
</ion-label>
</ion-item>
</ion-card>
<ion-card >
<ion-item lines="none" color="secondary">
<ion-icon name="cafe" slot="start"></ion-icon>
<ion-icon name="more" slot="end"></ion-icon>
</ion-item>
<ion-item color="secondary" lines="none">
<ion-label>
ion-item in a card,
</ion-label>
</ion-item>
</ion-card>
</div>Nous allons maintenant définir précisément cette classe que nous avons appelé flex pour qu’elle donne le comportement souhaité.
Rendez-vous dans votre fichier CSS, par exemple:
src/app/contact/contact.page.scss
Commençons par déclarer notre classe flex:
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}Nous avons maintenant ajouté trois propriétés à notre classe flex, pour plus de détails sur toutes les possibilités des flex-box, je vous invite à consulter ce lien: https://la-cascade.io/flexbox-guide-complet/
Nous finissons par également ajouter quelques propriétés CSS à nos ion-card, notamment pour que celles-ci prennent un peu moins de la moitié de la largeur de la page, et pour qu’elles soient juste un peu espacées les unes des autres:
ion-card {
width: 46%;
margin: 7px;
}Voilà ce que devrait vous afficher votre application une fois actualisée:
