Comment créer une page de connexion ou de login design avec Ionic 4 ? Je vous propose aujourd’hui un tuto très simple pour créer une jolie page de connexion avec formulaire ainsi que des boutons Facebook et Google.
Vous pouvez télécharger le code source de cette application à la fin de ce tuto Ionic 4 et suivre les étapes suivantes:
- Modifier l’arrière-plan (background) de notre page Ionic
- Créer le formulaire de connexion par mail
- Afficher les boutons de connexion et d’inscription
- Coder les boutons de connexion Facebook et Google
- Ajouter le logo de sa marque dans la page
Comment modifier l’arrière-plan (background) de notre page Ionic ?
Commençons par ce qui donne rapidement une apparence originale à notre page: l’arrière-plan. D’une manière générale il n’est pas recommandé de trop abusé de cette fonctionnalité, car le contenu n’est plus forcément lisible, mais la page de connexion s’y prête bien.
Voilà rapidement les étapes pour modifier l’arrière-plan de notre page Ionic:
- Ouvrir le fichier home.page.scss
- Ajouter une propriété à la balise ion-content
- Donner une nouvelle valeur à la variable –ion-background-color
- Utiliser la fonction linear-gradient() pour créer des dégradés
En fait la technique pour modifier le background d’une page Ionic est très simple, mais il faut l’avoir vu au moins une fois.
On va directement modifier l’arrière-plan de notre balise <ion-content> qui contient tout le contenu de notre page à l’exception du header. D’ailleurs sur cette page de connexion j’ai supprimé le <ion-header>.
Commencez donc par ouvrir le fichier CSS de votre page, par exemple le fichier home.page.scss et ajouter le code suivant:
ion-content {
}C’est à l’intérieur de cette accolade que nous allons ajouter les nouvelles propriétés de notre <ion-content>.
Comme Ionic propose déjà une variable pour affecter une couleur à notre arrière-plan, nous devons réécrire cette variable, ou lui affecter une nouvelle valeur.
Cette variable s’appelle –ion-background-color et nous commençons par lui la valeur black:
ion-content {
--ion-background-color: black;
}Cette propriété devrait colorer notre arrière-plan en noir, mais nous pouvons aussi utiliser les variables couleurs d’Ionic avec la fonction var():
ion-content{
--ion-background-color: var(--ion-color-dark);
}Enfin, pour ajouter un fond avec des couleurs en dégradé, on peut utiliser la fonction linear-gradient() comme ceci:
ion-content {
--ion-background-color: linear-gradient(#f5af19, #f12711);
}Si vous cherchez des dégradés déjà conçus avec des couleurs harmonieuses, je vous conseille le site uiGradients.
Pour en savoir plus sur les dégradés en CSS, je vous invite à consulter la documentation open source de Mozilla.
Comment créer le formulaire de connexion par mail ?
Passons maintenant à la création du formulaire de connexion ou d’inscription. Voilà les étapes très simples que nous allons suivre:
- Ouvrir le fichier home.page.html
- Créer deux balises <ion-item>
- Ajouter un titre dans la balise <ion-label>
- Ajouter les champs textes avec la balise <ion-input>
- Donner la couleur blanche (color= »light) aux labels et inputs
On commence par créer des item dans notre page, pour contenir nos champs dans des lignes bien distinctes.
<ion-item> </ion-item>
Ensuite nous ajoutons un titre à notre item pour indiquer à l’utilisateur l’utilité de ce champ. Pour cela on utilise la balise <ion-label>:
<ion-item > <ion-label>Email</ion-label> </ion-item>
À la suite de notre <ion-label>, nous pouvons ajouter votre champ de type text <ion-input> pour permettre à l’utilisateur d’entrer son adresse:
<ion-item > <ion-label>Email</ion-label> <ion-input></ion-input> </ion-item>
Nous pouvons également ajouter quelques attributs à notre input, par exemple le type email et le placeholder (pour afficher du texte en fond de l’input):
<ion-item > <ion-label>Email</ion-label> <ion-input type="mail" placeholder="Adresse email"></ion-input> </ion-item>
Finalement j’ajoute l’attribut color= »light » pour colorer le texte de mon titre et de mon input en blanc pour les rendre visible:
<ion-item > <ion-label color="light">Email</ion-label> <ion-input color="light" type="mail" placeholder="Adresse email"></ion-input> </ion-item>
Voilà le code du formulaire complet avec le champ input mot de passe de type password:
<ion-item > <ion-label color="light">Email</ion-label> <ion-input color="light" type="mail" placeholder="Adresse email"></ion-input> </ion-item> <ion-item> <ion-label color="light">Mot de passe</ion-label> <ion-input color="light" type="password" placeholder="Mot de passe"></ion-input> </ion-item>
On peut également ajouter à la suite de nos champs inputs, un petit bouton « Mot de passe oublié« . Nous le plaçons dans un <ion-item> pour le placer en fin de ligne:
<ion-item lines="none"> <ion-button color="light" slot="end" fill="clear">Mot de passe oublié ?</ion-button> </ion-item>
Comment créer les boutons de connexion et d’inscription ?
Maintenant que notre formulaire est créé, nous pouvons passer à la création de nos boutons de connexion et d’inscription. Les étapes que nous allons voir son très simple:
- Créer les deux boutons avec la balise <ion-button>
- Donner au premier bouton connexion l’attribut fill= »outline »
- Donner la couleur light au bouton connexion
- Et celle de votre choix au bouton inscription
Pour commencer, nous utilisons la balise très pratique <ion-button> pour créer deux boutons d’applications mobiles:
<ion-button>Connexion</ion-button> <ion-button>Inscription</ion-button>
Ensuite nous ajoutons le premier attribut expand= »block » pour nos deux boutons prennent toute la largeur de notre page.
<ion-button expand="block">Connexion</ion-button> <br> <ion-button expand="block">Inscription</ion-button>
De même, pour afficher des boutons arrondis, il nous suffit d’utiliser l’attribut shape= »round » pour donner à nos boutons de connexion et d’inscription des bords circulaires:
<ion-button expand="block" shape="round">Connexion</ion-button>
<br>
<ion-button expand="block" shape="round">Inscription</ion-button>Également, pour bien différencier nos deux boutons, je donne au bouton de connexion l’attribut fill= »outline » pour n’afficher que le texte et le bord du bouton:
<ion-button expand="block" shape="round" fill="outline">Connexion</ion-button> <br> <ion-button expand="block" shape="round">Inscription</ion-button>
Finalement, pour rendre mon bouton de connexion plus lisible, je le colore en blanc et pour le bouton d’inscription je vous laisse le choix: tertiary, primary, secondary, etc.
<ion-button color="light" expand="block" shape="round" fill="outline">Connexion</ion-button> <br> <ion-button color="tertiary" expand="block" shape="round">Inscription</ion-button>
Comment créer les boutons de connexion Facebook et Google
Voyons maintenant comment créer nos deux boutons de connexion avec Facebook et Google. Encore une fois, ici il ne s’agit que de la partie visuel de notre page de connexion. Les étapes à suivre sont les suivantes:
- Créer une boîte <div> avec la classe flex-box
- Créer deux boutons ronds avec icônes
- Ajouter la propriété justify-content: space-between
Tout d’abord, on commencer par afficher le texte centré « Connectez-vous avec » pour indiquer à l’utilisateur qu’il s’agit d’une autre méthode de connexion.
J’intègre ce <ion-label> dans un <ion-item> sans ligne, que je centre avec l’attribut text-center:
<ion-item lines="none"> <ion-label color="light" text-center>Ou connectez-vous avec</ion-label> </ion-item>
Ensuite je passe à l’affichage des boutons, que je souhaite aligner sur une même ligne. Pour cela je vais utiliser les flex-box que j’ai déjà abordé dans le tuto sur le design d’Ionic.
Je créé donc une boîte <div> avec la classe « flex« :
<div class="flex"> </div>
Puis je déclare ma classe « flex » dans mon fichier home.page.scss et je lui donne les propriétés suivantes:
.flex {
display: flex;
justify-content: space-between;
}Ainsi, le contenu de ma boîte flex va s’aligner à l’horizontal, et mes éléments vont s’espacer de manière à placer un maximum d’espace entre eux, dans notre cas sur les côtés.
On ajoute alors mon premier bouton, rond et avec l’icône Facebook à gauche:
<ion-button color="facebook" shape="round"> <ion-icon slot="start" name="logo-facebook"></ion-icon> Facebook </ion-button>
Puis le bouton de connexion Google, rond également et avec l’icône de l’entreprise:
<ion-button color="google" shape="round"> <ion-icon slot="start" name="logo-google"></ion-icon> Google </ion-button>
Voilà le code complet de mes deux boutons, et vous l’avez peut-être remarqué j’ai utilisé deux nouvelles couleurs pour mes boutons: facebook et google.
<div class="flex">
<ion-button color="facebook" shape="round">
<ion-icon slot="start" name="logo-facebook"></ion-icon>
Facebook
</ion-button>
<ion-button color="google" shape="round">
<ion-icon slot="start" name="logo-google"></ion-icon>
Google
</ion-button>
</div>En fait j’ai déclaré deux nouvelles couleurs dans mon fichier variables.scss avec la méthode proposée par Ionic. Déclarez vos variables couleurs dans l’objet :root {}:
/** Ionic CSS Variables **/
:root {
/** facebook **/
--ion-color-facebook: #3b5999;
--ion-color-facebook-rgb: 59, 89, 153;
--ion-color-facebook-contrast: #ffffff;
--ion-color-facebook-contrast-rgb: 255, 255, 255;
--ion-color-facebook-shade: #324b81;
--ion-color-facebook-tint: #476bb8;
/** google **/
--ion-color-google: #cd201f;
--ion-color-google-rgb: 245, 61, 61;
--ion-color-google-contrast: #ffffff;
--ion-color-google-contrast-rgb: 255, 255, 255;
--ion-color-google-shade: #cd201f;
--ion-color-google-tint: #cd201f;
[...]
}Puis déclarez la classe de chaque couleur en dehors de l’objet root {}:
.ion-color-facebook {
--ion-color-base: var(--ion-color-facebook) !important;
--ion-color-base-rgb: var(--ion-color-facebook-rgb) !important;
--ion-color-contrast: var(--ion-color-facebook-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-facebook-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-facebook-shade) !important;
--ion-color-tint: var(--ion-color-facebook-tint) !important;
}
.ion-color-google {
--ion-color-base: var(--ion-color-google) !important;
--ion-color-base-rgb: var(--ion-color-google-rgb) !important;
--ion-color-contrast: var(--ion-color-google-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-google-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-google-shade) !important;
--ion-color-tint: var(--ion-color-google-tint) !important;
}Comment ajouter le logo de sa marque dans la page ?
Finissons par l’ajout d’un logo ou d’une icône tout simplement dans votre page de connexion pour donner une vrai identité à votre page.
Voilà les quelques étapes à suivre:
- Choisissez l’icône de votre choix
- Copiez son code html dans une balise <div>
- Ajouter la position absolue à cette icône pour la centrer
On commencer par créer une boîte <div> qui va contenir notre icône ou notre logo. On donne justement à cette boîte la classe « logo« :
<div class="logo"> </div>
Puis on attribue à cette classe les propriétés suivantes qui vont nous permettre de centrer son contenu:
.logo {
position: relative;
height: 250px;
}Vous pouvez maintenant chercher l’icône de votre choix sur le site https://ionicons.com/ et copier le code HTML de celle-ci. Ajoutez simplement l’attribut color= »light » pour colorer l’icône en blanc:
<div class="logo"> <ion-icon color="light" name="contact"></ion-icon> </div>
Il ne nous reste plus qu’à donner quelques propriétés CSS à notre icône pour l’agrandir et surtout la centré dans notre boîte « logo« :
.logo ion-icon{
font-size: 9em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Télécharger une page de connexion design Ionic 4
Voilà c’est déjà la fin de ce tuto Ionic 4 où nous avons créé des pages de connexion design, qui s’applique à la plupart des applications et qui peuvent être totalement personnalisé.
Vous pouvez télécharger gratuitement le code source ou le template de cette application en cliquant sur l’image ci-dessous:
