Comment créer une page de profil dans Ionic ?

Bonjour à tous! Dans cet article et ce tuto Ionic 4 je vais vous montrer comment créer une page de profil dans votre application Ionic.

Cette page de profil sera très simple et nous ne traiterons bien que de la partie design dans ce tutoriel Ionic.

Vous serez également capable de personnaliser comme bon vous semble cette page de profil, en termes de couleurs mais aussi de disposition.

Voilà les étapes à suivre dans ce tutoriel:

• Créer le header pour notre page de profil
• Afficher une photo de profil centrée et mise en valeur
• Créer un tweet ou une publication
• Afficher une photo et des boutons de partage

Comment créer un header pour notre page de profil ?

Commençons par le header, c’est-à-dire la partie supérieur de notre page que nous souhaitons afficher de manière très colorée.

Vous commencer vous pouvez supprimer la balise <ion-header> et son contenu de votre page HTML, car nous ne souhaitons pas afficher de titre sur cette page.

Pour le moment, votre page HTML doit uniquement contenir la balise <ion-content> suivante:

<ion-content>
</ion-content>

À l’intérieur de votre <ion-content>, nous allons commencer une boîte <div> de base à laquelle nous donnons la classe « header« :

<div class="header">
</div>

Nous pouvons ensuite immédiatement donner à cette classe header certaines propriétés CSS, car sans cela nous ne pourrions pas visualiser notre boîte header.

Nous donnons ainsi à notre classe header, une hauteur de 180 pixels, une largeur de 100% et surtout une couleur de fond bleu (ou celle de votre choix):

.header {
    height: 180px;
    background-color: #03A9F4;
    width: 100%;
    padding-top: 1px;
}

Une fois que notre cadre de fond est crée, nous pouvons commencer à le remplir, notamment avec le nom de l’utilisateur actuel.

Vous l’avez remarqué, j’ai choisi quelques personnalités du monde de la technologie, par exemple Elon Musk:

<h2>Elon Musk</h2>

Je créé donc un titre <h2> pour contenir le nom de mon utilisateur, mais je dois également lui donner certaines propriétés CSS, notamment la couleur blanche et le centrer:

.header h2 {
    color: white;
    text-align: center;
    font-weight: bold;
}

À la suite du nom de mon utilisateur, je souhaite maintenant afficher son nombre d’abonnées et d’abonnements. Pour cela je vais espacer ces deux éléments dans une boîte dans laquelle je vais utiliser les flex-box.

Je créé donc une boîte <div> avec la classe space-between que je déclarer ensuite:

<div class="space-between">
  
</div>

Les propriétés de la classe space-between sont très simples, on créé une boîte flex, on lui demande d’aligner son contenu à l’horizontale et de l’espacer au maximum.

On ajoute également une marge intérieure à notre boîte pour ce pas coller le bord:

.space-between {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0px 10px;
}

On passe ensuite à l’affichage du nombre d’abonnées, qui se divise en deux éléments HTML: un <ion-badge> pour afficher le nombre et un paragraphe <p> pour le type de celui-ci.

Le tout est contenu dans une boîte <div> associée à la classe followings que nous allons déclarer ensuite.

Vous pouvez donc créer une boîte pour les abonnées:

<div class="followings">
  <ion-badge color="primary" mode="ios">42</ion-badge>
  <p>Abonnés</p>
</div>

Et une autre pour les abonnements de l’utilisateur:

<div class="followings">
  <ion-badge color="primary" mode="ios">42</ion-badge>
  <p>Abonnements</p>
</div>

Je donne également un ensemble de propriétés CSS à mes différents éléments, à commencer par la boîte <div> et la classe followings.

Notamment je fais en sorte de centré à l’horizontale le contenu de ma boite, et aussi que le <ion-badge> ne prenne pas toute la largeur de celle-ci.

.followings {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Pour le paragraphe <p>, je lui donne simplement la couleur blanche, je l’aligne au centre de ma boîte et je lui supprime la marge extérieur qu’Ionic lui donne par défaut.

.followings p {
    color: white;
    margin: 8px 0px 0px 0px;
}

Et voilà également le code HTML complet du header de votre page profil:

<div class="header">
  <h2>Elon Musk</h2>
  <div class="space-between">
    <div class="followings">
      <ion-badge color="primary" mode="ios">42</ion-badge>
      <p>Abonnés</p>
    </div>
    <div class="followings">
      <ion-badge color="primary" mode="ios">42</ion-badge>
      <p>Abonnements</p>
    </div>
  </div>
</div>

Comment afficher une photo de profil centrée et mise en valeur ?

Nous souhaitons maintenant afficher sur notre header la photo de profil d’un utilisateur.

Pour commencer je vous invite à télécharger une photo de profil d’utilisateur, ou comme dans mon cas d’une personnalité célèbre.

Placez ensuite cette image dans le dossier assets de votre application Ionic à l’adresse suivante: /src/assets/elon-musk.jpg

Vous pouvez désormais afficher la photo de profil de votre utilisateur en utilisant la balise <img> avec comme source l’adresse de votre image dans le dossier assets:

<img src="../../assets/elon-musk.jpg">

Pour commencer nous souhaitons rogner cette image et l’afficher avec des bords ronds. Il existe plusieurs techniques pour obtenir un tel résultat, dans mon cas je vais inclure ma balise <img> dans une boîte avec la classe img-box:

<div class="img-box">
  <img src="../../assets/elon-musk.jpg">
</div>

Ensuite, je n’ai plus qu’à donner quelques propriétés CSS à ma classe img-box, les plus importantes étant border-radius: 50% et overflow: hidden pour que ma boite ait des bords ronds et qu’elle cache le contenu qui dépasse.

.img-box {
    border-radius: 50%;
    overflow: hidden;
    height: 130px;
    width: 130px;
}

Pour mettre encore plus en avant ma photo de profil, je vous propose d’ajouter à celle-ci deux bordures, la premières blanche et la deuxième bleu, ou de la couleur du thème de votre application.

J’inclus donc mes deux balises précédentes dans une nouvelle boîte <div> à laquelle j’attribue la classe border-white:

<div class="border-white">
  <div class="img-box">
    <img src="../../assets/elon-musk.jpg">
  </div>
</div>

Puis, je donne à cette classe un bord blanc plutôt épais (4 pixels) et surtout rond (border-radius: 50%) avec un contenu qui va automatiquement prendre la largeur de mon image (fit-content):

.border-white {
    border: white solid 4px;
    border-radius: 50%;
    width: fit-content;
}

Je souhaite lui donner un deuxième bord, cette fois de couleur pour mettre la photo encore plus en valeur et rester dans le thème de mon application.

Pour cela, je créé une nouvelle boîte <div> avec la classe border-blue, dans laquelle j’inclus tout mon contenu HTML précédent, qui contient mon image et ses boîtes:

<div class="border-blue">
  <div class="border-white">
    <div class="img-box">
      <img src="../../assets/elon-musk.jpg">
    </div>
  </div>
</div>

Ensuite je n’ai plus qu’à donner à cette dernière classe border-blue les propriétés CSS quasiment identiques à la précédente, ici je change juste la couleur et l’épaisseur:

.border-blue {
    border: 7px solid #006bbf;
    border-radius: 50%;
    width: fit-content;
}

Pour terminer le design et l’affichage de mon image de profil, je créé une dernière boîte <div> avec la classe flex, dans laquelle nous allons utiliser les flexbox pour centrer mon image mais aussi pour la décaler par rapport à notre header:

<div class="flex">
  <div class="box-border">
    <div class="border-white">
      <div class="img-box">
        <img src="../../assets/elon-musk.jpg">
      </div>
    </div>
  </div>
</div>

Les propriétés CSS de ma boîte flex sont les suivantes:

.flex {
    display: flex;
    justify-content: center;
    margin-top: -76px;
}

Comment créer un tweet ou une publication ?

Maintenant que vous avez créé le header et l’image de profil de votre utilisateur, nous pouvons passer à la partie suivante qui consiste à afficher les publications d’un utilisateurs.

Bien-sûr libre à vous de choisir le type de publication et du design, ici il s’agit d’une version modifiée de Twitter, et nous allons donc afficher l’équivalent de Tweet.

On commence par créer une <ion-card>, c’est-à-dire une boîte préconçue par Ionic pour proposer du contenu dans un carte aux bords arrondis et avec un effet d’ombre derrière.

<ion-card>
</ion-card>

Ensuite, à l’intérieur de ma <ion-card>, je créé un <ion-item> pour proposer du contenu en ligne et notamment en premier temps afficher les informations de l’utilisateur.

Vous pouvez donc ajouter un <ion-item> avec pour commencer l’attribut lines= »none » pour ne pas afficher de ligne à la fin de celui-ci:

<ion-card>
  <ion-item lines="none">
    
  </ion-item>
</ion-card>

À l’intérieur de notre <ion-item>, nous pouvons commencer par afficher le nom de l’utilisateur, ainsi que l’heure de publication de son tweet.

Pour cela nous utilisons la balise <ion-label> comme ceci:

<ion-card>
  <ion-item lines="none">
    <ion-label>
      
    </ion-label>
  </ion-item>
</ion-card>

Puis à l’intérieur de notre <ion-label>, nous lui ajoutons deux balises, un titre <h2> et un paragraphe <p> pour afficher notamment le nom de l’utilisateur.

<ion-card>
  <ion-item lines="none">
    <ion-label>
      <h2><b>Elon Musk</b></h2>
      <p>Il y a 14 heures</p>
    </ion-label>
  </ion-item>
</ion-card>

Nous allons maintenant utiliser une autre balise préconçu par Ionic <ion-avatar> qui permet d’afficher une image circulaire de taille réduite:

<ion-avatar slot="start">
  <img src="../../assets/elon-musk.jpg" />
</ion-avatar>

Vous pouvez donc insérer cette balise ion-avatar dans votre ion-item avec l’attribut slot= »start » pour positionner la photo de profil en début de ligne:

<ion-card>
  <ion-item lines="none">
    <ion-avatar slot="start">
      <img src="../../assets/elon-musk.jpg" />
    </ion-avatar>
    <ion-label>
      <h2><b>Elon Musk</b></h2>
      <p>Il y a 14 heures</p>
    </ion-label>
  </ion-item>
</ion-card>

Passons maintenant à l’affiche de notre Tweet, ou plutôt de son contenu écrit notamment.

Nous créons un nouvel ion-item pour ne contenir que le texte du tweet, toujours avec l’attribut lines= »none » mais avec la classe tweet que nous allons déclarer par la suite.

À l’intérieur de notre ion-item, nous ajoutons à nouveau la balise <ion-label> mais cette fois sans titre h2 ou paragraphe, simplement avec la propriété text-wrap pour autoriser le retour à la ligne de notre texte:

<ion-item lines="none" class="tweet">
  <ion-label text-wrap>Production version will be a lot more polished than this prototype, but still fun to see</ion-label>
</ion-item>

Ensuite vous pouvez donner quelques propriétés CSS à votre ion-label notamment pour se rapprocher le plus possible de l’apparence d’un véritable tweet:

.tweet ion-label {
    line-height: 1!important;
    font-size: 15px;
    margin: 6px 0px 6px 0px!important;
    min-height: 34px;
}

Enfin, je donne également un propriété à ma classe tweet, donc au ion-item pour que celui-ci soit plus proche du nom de l’utilisateur et de sa photo de profil.

.tweet {
    margin-top: -10px!important;
}

Encore une fois, ceux sont de petites améliorations pour proposer un rendu le plus proche possible d’un réseau social comme Twitter.

Voilà donc le contenu HTML d’un tweet avec uniquement du contenu texte:

<ion-card>
  <ion-item lines="none">
    <ion-avatar slot="start">
      <img src="../../assets/elon-musk.jpg" />
    </ion-avatar>
    <ion-label>
      <h2><b>Elon Musk</b></h2>
      <p>Il y a 14 heures</p>
    </ion-label>
  </ion-item>
  <ion-item lines="none" class="tweet">
    <ion-label text-wrap>Production version will be a lot more polished than this prototype, but still fun to see</ion-label>
  </ion-item>
</ion-card>

Comment afficher une photo et des boutons de partage ?

Pour terminer ce tutoriel Ionic 4, je vous propose maintenant d’ajouter des images à vos tweet pour les rendre plus complet.

Cette partie est extrêmement simple et rapide, vous pouvez tout simplement ajouter la balise <img> dans votre <ion-card>, avec la classe tweet-img car nous allons lui donner quelques propriétés CSS:

<img class="tweet-img" src="">

Concernant la classe tweet-img, ses propriétés CSS sont très simples, on lui donne un bord arrondis de quelques pixels, et on centre cette image dans notre carte de manière à ce qu’elle ne soit pas collé aux bords:

.tweet-img {
    border-radius: 10px;
    width: 95%;
    margin-left: 2.5%;
}

On termine maintenant avec l’affichage de nos boutons de partage, de like ou de retweet dans le cas de Twitter.

Pour cela nous allons utiliser la balise ion-button avec plusieurs attributs d’Ionic qui nous facilite le travail.

On créer un bouton de taille petite (size= »small ») avec un fond transparent (fill= »clear »), puis à l’intérieur de ce bouton on ajoute une icône que le place à gauche dans celui-ci (slot= »start »):

<ion-button size="small" fill="clear">
  <ion-icon slot="start" name="text"></ion-icon> 34
</ion-button>

Vous pouvez faire pareil pour toutes sortes de type de bouton, ici je n’ai repris que les plus classiques, commentaires, like et partage:

<ion-button size="small" fill="clear">
  <ion-icon slot="start" name="text"></ion-icon> 34
</ion-button>
<ion-button size="small" fill="clear">
  <ion-icon slot="start" name="repeat"></ion-icon> 116
</ion-button>
<ion-button size="small" fill="clear">
  <ion-icon slot="start" name="heart-empty"></ion-icon> 210
</ion-button>

Voilà donc le rendu de votre publication avec une photo et des boutons d’interactions dans celle-ci:

<ion-card>
  <ion-item lines="none">
    <ion-avatar slot="start">
      <img src="../../assets/elon-musk.jpg" />
    </ion-avatar>
    <ion-label>
      <h2><b>Elon Musk</b></h2>
      <p>Il y a 14 heures</p>
    </ion-label>
  </ion-item>
  <ion-item lines="none" class="tweet">
    <ion-label text-wrap>Starship at our launch facility in Cameron County, Texas. Watch as <i>@elonmusk</i> gives an update on the vehicle today at ~7:00 p.m. CDT → <i>http://spacex.com/webcast</i></ion-label>
  </ion-item>
  <img class="tweet-img" src="https://pbs.twimg.com/media/EFjhHzwUEAIM2n_?format=jpg&name=medium">
  <ion-button size="small" fill="clear" (click)="onClick()">
    <ion-icon slot="start" name="text"></ion-icon> 34
  </ion-button>
  <ion-button size="small" fill="clear" (click)="onClick()">
    <ion-icon slot="start" name="repeat"></ion-icon> 116
  </ion-button>
  <ion-button size="small" fill="clear" (click)="onClick()">
    <ion-icon slot="start" name="heart-empty"></ion-icon> 210
  </ion-button>
</ion-card>

Vous êtes libres de télécharger le code source de cette application en cliquant sur l’image ci-dessous: