IONIC NETFLIX: Construire un clone de Netflix avec Ionic

Bonjour à tous! On se retrouve aujourd’hui pour un nouveau tuto Ionic et un nouveau défi: créer un clone de l’application Netflix avec Ionic!

Cet exercice va vous permettre d’apprendre de nombreuses et très utiles notions de design et de CSS avec Ionic.

Nous allons recréer un clone purement visuel de l’application Netflix avec Ionic, mais qui nous permettra de créer rapidement une application qui en jette!

Nous allons travailler sur plusieurs fonctionnalités CSS très utiles dans le développement mobile, comme la création d’un thème sombre.

En plus du thème sombre de l’application Netflix, nous travailler sur le scroll horizontal d’une boîte HTML, par exemple pour afficher des films et les faire défiler.

Enfin nous allons créer la page de détail d’un film sur Netflix, avec l’ouverture en modal et l’affichage des boutons correspondants.

Voici en détail les étapes que nous allons suivre:

• Le thème sombre et rouge pour votre application Ionic
• Les tabs pour notre application Ionic clone de Netflix
• La page d’accueil de l’application Netflix
• Ouvrir une page de détail sous forme de modal
• La page de détail d’une série/film Netflix

Comment créer un thème sombre et rouge pour votre application Ionic ?

L’une des principales particularités de l’application Netflix est son thème sombre, en anglais un dark theme.

Nous allons recréer étapes par étapes notre application clone de Netflix avec Ionic, en commençant par la création de celle-ci.

Pour plus de détails sur la création d’application Ionic, consultez le tuto suivant: https://drissas.com/installer-ionic-4-pc-mac/

Sinon, entrez la commande suivante pour créer une application de type Tabs:

ionic start Netflix tabs

Une fois que notre application est créé par Ionic, nous pouvons commencer à travailler sur le thème sombre Ionic.

Je vous invite à utiliser le site d’Ionic et l’interface qu’il propose pour déclarer de nouvelles couleurs dans vos application Ionic.

Consultez le site d’Ionic et l’interface Ionic Color Generator: https://ionicframework.com/docs/theming/colors#new-color-creator

En ce qui concerne les couleurs de l’application et de la marque Netflix nous allons en ajouter deux, le rouge et le noir de Netflix.

Pour accéder aux couleurs officielles de Netflix consultez ce lien et copiez-les valeur Hexadécimales: https://brandpalettes.com/netflix-color-codes/

Il ne vous reste plus qu’à entrer le nom et la valeur Hexadécimal de votre nouvelle couleur pour qu’Ionic vous génère le code nécessaire.

Pour déclarer et même gérer toutes nos couleurs dans Ionic, vous devez le faire depuis le fichier suivant:

src/theme/variables.scss

Ils nous reste plus qu’à copier/coller le code généré par Ionic en fin de votre fichier comme ceci:

// Nouvelle couleur Netflix Red
:root {
  --ion-color-netflix-red: #E50914;
  --ion-color-netflix-red-rgb: 229,9,20;
  --ion-color-netflix-red-contrast: #ffffff;
  --ion-color-netflix-red-contrast-rgb: 255,255,255;
  --ion-color-netflix-red-shade: #ca0812;
  --ion-color-netflix-red-tint: #e8222c;
}

.ion-color-netflix-red {
  --ion-color-base: var(--ion-color-netflix-red);
  --ion-color-base-rgb: var(--ion-color-netflix-red-rgb);
  --ion-color-contrast: var(--ion-color-netflix-red-contrast);
  --ion-color-contrast-rgb: var(--ion-color-netflix-red-contrast-rgb);
  --ion-color-shade: var(--ion-color-netflix-red-shade);
  --ion-color-tint: var(--ion-color-netflix-red-tint);
}
// Nouvelle couleur Netflix Dark
:root {
  --ion-color-netflix-dark: #000000;
  --ion-color-netflix-dark-rgb: 0,0,0;
  --ion-color-netflix-dark-contrast: #ffffff;
  --ion-color-netflix-dark-contrast-rgb: 255,255,255;
  --ion-color-netflix-dark-shade: #000000;
  --ion-color-netflix-dark-tint: #1a1a1a;
}

.ion-color-netflix-dark {
  --ion-color-base: var(--ion-color-netflix-dark);
  --ion-color-base-rgb: var(--ion-color-netflix-dark-rgb);
  --ion-color-contrast: var(--ion-color-netflix-dark-contrast);
  --ion-color-contrast-rgb: var(--ion-color-netflix-dark-contrast-rgb);
  --ion-color-shade: var(--ion-color-netflix-dark-shade);
  --ion-color-tint: var(--ion-color-netflix-dark-tint);
}

Vous avez donc maintenant deux nouvelles couleurs de disponibles dans votre application Ionic!

La prochaine étape de la création de notre thème sombre consiste à donner une couleur noir à notre menu tabs en bas de l’écran.

Ouvrez donc le fichier HTML de votre tabs où nous allons lui ajouter la couleur dark-netflix :

src/app/tabs/tabs.page.html

Puisque nous avons déclaré nos deux couleurs de manière officielle dans votre fichier variables.scss, nous pouvez les utiliser avec l’attribut color d’Ionic:

color="netflix-dark"

Vous pouvez ainsi ajouter cet attribut à votre balise ion-tab-bar comme ceci:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="netflix-dark">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Accueil</ion-label>
    </ion-tab-button>
    [...]

Passons maintenant à notre page d’accueil, ici la page Tab1 que nous voulons convertir au thème sombre.

Ouvrez donc votre fichier HTML pour ajouter notamment l’attribut color:

src/app/tab1/tab1.page.html

Vous pouvez ajouter l’attribut color= »netflix-dark » à votre ion-toolbar pour la coloré en noir profond et afficher votre titre ainsi que vos boutons en blanc:

<ion-header>
  <ion-toolbar color="netflix-dark">
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

La dernière étape consiste à donner un fond sombre à notre page, nous nous rendez ainsi dans le fichier CSS suivant:

src/app/tab1/tab1.page.scss

Nous pouvons ainsi modifier la propriétés CSS d’Ionic background-color et lui affecter la couleur noir.

Nous ne lui donnons pas la couleur netflix-dark, car celle-ci représente un noir absolu donc très foncé, mais nous choisissons d’utiliser la couleur dark d’Ionic car c’est un noir plus léger (gris très foncé).

Voilà donc le code CSS pour modifier le fond de votre page d’accueil:

ion-content{
  --ion-background-color: var(--ion-color-dark);
}

Maintenant que notre application possède un thème sombre, nous pouvons passer à la prochaine étape.

Comment créer des tabs pour notre application Ionic clone de Netflix ?

Votre menu tabs devrait maintenant s’afficher en noir, et refléter plutôt bien le thème de l’application Netflix.

Nous pouvons prendre quelques instants pour modifier l’apparence et les noms de nos tabs pour créer le meilleur clone de Netflix avec Ionic.

Pour cela nous ouvrons le fichier HTML de nos tabs:

src/app/tabs/tabs.page.html

Une tab dans notre menu est constituée de ces trois balises:

<ion-tab-button tab="tab1">
  <ion-icon name="home"></ion-icon>
  <ion-label>Accueil</ion-label>
</ion-tab-button>

La première concerne l’icône de notre tab par exemple ici l’icône maison ou « home » en anglais. Il vous suffit de modifier l’attribut name de votre balise ion-icon:

<ion-icon name="home"></ion-icon>

Vous pouvez choisir parmi toutes les icônes que propose Ionic sur le site suivant: https://ionicons.com/

La deuxième est celle du nom ou du titre de notre tab, il s’agit de la balise ion-label, vous pouvez tout simplement modifier son contenu:

<ion-label>Accueil</ion-label>

Voilà donc le rendu des quatre tabs de l’application Netflix, à savoir Accueil, Recherche, Vidéos et Plus:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="netflix-dark">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Accueil</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="search"></ion-icon>
      <ion-label>Recherche</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="download"></ion-icon>
      <ion-label>Vidéos</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="menu"></ion-icon>
      <ion-label>Plus</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Certaines version de l’application Netflix ne propose pas de titre à ses tabs, pour faire de même il vous suffit d’enlever pour chaque tab la balise ion-label.

Comment créer la page d’accueil de l’application Netflix avec Ionic ?

Passons maintenant au vif du sujet, la création de la page d’accueil de Netflix.

Nous cela rendez-vous dans le fichier HTML de votre page d’accueil:

src/app/tab1/tab1.page.html

Vous pouvez dors et déjà télécharger le logo de Netflix que nous afficherons dans le header de notre page d’accueil.

Faites clique-droit puis « Enregistrer l’image » sous sur l’image ci-dessous et enregistrez-la dans le dossier sr/assets/ de votre application Ionic.

Vous pouvez ensuite afficher ce logo dans une balise img HTML classique comme ceci, en indiquant la source de votre image:

<img src="../../assets/netflix-logo.png">

Dans l’application Netflix, le logo est placé dans le header, je place donc ma balise img dans mon ion-title, et je lui donne également la classe logo-header que nous allons déclarer:

<ion-header>
  <ion-toolbar color="netflix-dark">
    <ion-title>
      <img class="logo-header" src="../../assets/netflix-logo.png">
    </ion-title>
  </ion-toolbar>
</ion-header>

Nous ajoutons quelques propriétés à notre image pour ajuster sa taille et sa position dans le header. Pour cela ouvrez le fichier CSS de votre page:

src/app/tab1/tab1.page.scss

Et déclarez la classe logo-header pour lui donner une taille de 40px et la décaler du bord haut de quelques picels:

.logo-header {
  height: 40px;
  margin-top: 5px;
}

Nous retrouvons également dans l’application Netflix, un bouton de partage d’écran placé à la fin du header.

Nous pouvons créer un tel bouton avec l’icône télé de la manière suivante:

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="tv"></ion-icon>
  </ion-button>
</ion-buttons>

Que nous positionnons après le titre de notre header comme ceci:

<ion-header>
  <ion-toolbar color="netflix-dark">
    <ion-title>
      <img class="logo-header" src="../../assets/netflix-logo.png">
    </ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="tv"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Parfait, notre header est maintenant terminé, passons au premier contenu de notre page: l’image d’accueil.

En fonction à nouveau des version de l’application Netflix, on retrouve des variantes sur la page d’accueil.

Je vous propose de reprendre celle affichant une image d’un film en premier lieu. Vous pouvez télécharger cette image ci-dessous et la mettre dans votre dossier assets.

Cette fois, nous travaillons dans la balise ion-content, à laquelle nous ajoutons la balise img comme pour le logo:

<ion-content>
  <img class="img-intro" src="../../assets/bright-netflix.jpg">
 </ion-content>

Nous indiquons à cette balise img la source de notre image de film Netflix, puis nous lui ajoutons la classe img-intro.

J’ai créé cette classe img-intro simplement pour que le bouton que nous allons ajouter à la suite de notre image se positionne de manière collé à l’image:

.img-intro {
  margin-bottom: -7px;
}

De cette manière, le bouton que allons créer sera directement collé à cette image.

Le bouton en question est créé à partir de la balise ion-button, avec l’attribut expand= »full » pour lui faire prendre toute la largeur de la page et color= »netflix-dark » pour colorer le bouton en noir:

<ion-button expand="full" color="netflix-dark">Regarder maintenant</ion-button>

Après l’affichage de notre image d’accueil et du bouton qui lui est associé, nous pouvons passer à l’affichage des films.

Pour commencer je créé un petit titre pour ma première section de film: Ma liste:

<p class="box-title">Ma liste</p>

Je donne une classe à ma balise paragraphe p pour pouvoir modifier la couleur ainsi que l’épaisseur de mon texte:

.box-title {
  color: white;
  margin: 10px 0px 5px 5px;
  font-weight: 500;
}

Juste après le titre, nous pouvons passer à l’affichage des films dans une boîte à défilement.

On commence par créer une boîte vierge div à laquelle nous donnons la classe scroll-box que nous allons déclarer:

<div class="scroll-box">
  
</div>

À cette classe scroll-box nous donnons les propriétés CSS d’une flex-box ainsi que la capacité à scroller le contenu qui dépasse:

.scroll-box {
  display: flex;
  overflow: scroll;
}

Ensuite nous créons une première boîte pour afficher un film, associé à la classe movie:

<div class="movie">
</div>

Nous donnons simplement à cette classe movie la propriété CSS de se décaler à gauche de 5px, notamment les une par rapport aux autres:

.movie {
  margin-left: 5px;
}

Avant de passer à l’affichage des images des films Netflix, je vous invite à télécharger le dossier assets de mon application Netflix. Il contient toutes les images de films que j’utilise dans le tuto, vous y avez accès juste en dessous (à dézipper):

Vous pourrez ainsi afficher l’image d’un premier film simplement avec la balise img et la source vers le fichier de votre image:

<img src="../../assets/MV5BM2IxMjFmNWEtNmEyNS00MmNmLTk5ZWYtYTY5YTA1NjgwNDFmXkEyXkFqcGdeQXVyMzY0MTE3NzU@._V1_UY209_CR3,0,140,209_AL_.jpg">

On donne juste quelques propriétés à nos images de film, notamment une taille particulière:

.movie img {
  height: 150px;
  max-width: none;
}

Voilà donc finalement toute ma première boîte de film qui défile à l’horizontal:

<div class="scroll-box">
  <div class="movie">
    <img src="../../assets/MV5BM2IxMjFmNWEtNmEyNS00MmNmLTk5ZWYtYTY5YTA1NjgwNDFmXkEyXkFqcGdeQXVyMzY0MTE3NzU@._V1_UY209_CR3,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BMjA5NzgxODE2NF5BMl5BanBnXkFtZTcwNTI1NTI0OQ@@._V1_UY209_CR0,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BMjc4OTc0ODgwNV5BMl5BanBnXkFtZTcwNjM1ODE0MQ@@._V1_UY209_CR0,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BMTgxMmJhNjItMmFlMS00MWVlLWIyMjktYjUyYTI4MzA0YzgxXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UY209_CR3,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BMzg4MDJhMDMtYmJiMS00ZDZmLThmZWUtYTMwZDM1YTc5MWE2XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UY209_CR0,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BNGYyZGM5MGMtYTY2Ni00M2Y1LWIzNjQtYWUzM2VlNGVhMDNhXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY209_CR0,0,140,209_AL_.jpg">
  </div>
  <div class="movie">
    <img src="../../assets/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX140_CR0,0,140,209_AL_.jpg">
  </div>
</div>
<br>

De la même manière, vous pouvez créer une boîte de défilement pour les films sélectionné ou encore les plus succès de Netflix:

<p class="box-title">Sélectionné pour vous</p>
  <div class="scroll-box">
    <div class="movie">
      <img src="../../assets/MV5BZTNkZmU0ZWQtZjQzMy00YTNmLWFmN2MtZGNkMmU1OThmMGYwXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UX140_CR0,0,140,209_AL_.jpg">
    </div>
    [...]
  </div>
  <br>

  <p class="box-title">Les plus gros succès de Netflix</p>
  <div class="scroll-box">
    <div class="movie">
      <img src="../../assets/MV5BOTUwODM5MTctZjczMi00OTk4LTg3NWUtNmVhMTAzNTNjYjcyXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX140_CR0,0,140,209_AL_.jpg">
    </div>
    [...]
  </div>
  <br>

Notre page d’accueil Netflix est maintenant terminée, nous pouvons passer à la page de détail d’un film!

Comment ouvrir une page de détail sous forme de modal avec Ionic ?

Pour commencer, nous devons créer cette nouvelle page et ensuite l’ouvrir sous forme de modal.

Pour créer une page dans Ionic, rien de plus simple, entrez la commande suivante dans votre terminal:

ionic g page movie

Pour pouvoir ensuite ouvrir cette page en tant que modal, nous devons également la déclarer dans le fichier suivant:

src/app/app.module.ts

Ajoutez alors la ligne de code suivante pour importer le Module de votre page Movie:

import { MoviePageModule } from './movie/movie.module';

Déclarez ensuite ce module dans votre tableau imports à la fin de votre fichier:

imports: [
  BrowserModule,
  IonicModule.forRoot(),
  AppRoutingModule,
  MoviePageModule
],

Nous pouvons maintenant ouvrir cette page comme un modal! Pour cela rendons-nous d’abord dans le fichier Typescript de notre page d’accueil:

src/app/tab1/tab1.page.ts

Ajoutez alors ces deux lignes de codes, l’une pour importer le plugin créateur de Modal, l’autre notre page en question pour pouvoir l’ouvrir:

import { ModalController } from '@ionic/angular';
import { MoviePage } from '../movie/movie.page';

Comme d’habitude vous pouvez déclarer le plugin dans votre constructor() pour pouvoir l’utiliser dans le reste de votre page:

constructor(
    public modalController: ModalController
  ) {}

De cette manière, nous pouvons créer un modal comme le propose la documentation d’Ionic: https://ionicframework.com/docs/api/modal

Ici je ne transmet aucun paramètre, car notre application est statique et sans base de données, je lui indique juste la destination c’est-à-dire ma page Movie:

async openMovie() {
  const modal = await this.modalController.create({
    component: MoviePage
  });
  return await modal.present();
}

Je peux ensuite exécuter cette fonction lors du clique sur le bouton d’accueil avec l’attribut (click):

<ion-button (click)="openMovie()" expand="full" color="netflix-dark">Regarder maintenant</ion-button>

Vous pouvez ajouter cette attribut (click) sur toutes les images de la page d’accueil, car chacune d’entre elle est censé nous rediriger vers un film.

Comment créer la page de détail d’une série/film Netflix avec Ionic ?

Passons enfin à notre page détail du film: Movie, ouvrez pour commencer son fichier TypeScript(TS):

src/app/movie/movie.page.ts

Nous devons permettre à l’utilisateur de fermer la page du film qu’il vient d’ouvrir. Pour cela nous devons importer le plugin ModalController:

import { ModalController } from '@ionic/angular';

Ensuite il faut comme pour la page,d’accueil déclarer le plugin dans notre constructor() pour l’utiliser dans notre page:

constructor(
  public modalController: ModalController
) { }

Une fois que le plugin est importé et déclaré, nous pouvons créer la fonction pour fermer le modal, close() qui utilise la fonction dismiss() du plugin modalController:

close() {
  this.modalController.dismiss();
}

Passons maintenant à la partie HTML, notamment pour afficher le bouton fermer:

src/app/movie/movie.page.html

Vous pouvez créer le header suivant, avec un titre de série arbitraire, comme Stranger Things, avec un menu de couleur noir et surtout à la fin un bouton fermer:

<ion-header>
  <ion-toolbar color="netflix-dark">
    <ion-title>Stranger Things</ion-title>
    <ion-buttons slot="end">
      <ion-button color="light" (click)="close()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Pour conserver le thème sombre de notre application Netflix avec Ionic, nous devons aussi modifier la propriété CSS background-color à notre ion-content:

ion-content{
    --ion-background-color: var(--ion-color-dark);
}

Pour le titre et le thème sombre de la page, c’est maintenant terminé. Passons au contenu de notre page, à commencer par l’image qui s’affiche en fond, comme sur Netflix.

Pour cela nous créons une boîte div avec la classe bg-img dans notre ion-content:

<ion-content>
  <div class="bg-img">
  </div>

Puis nous déclarons cette classe dans notre fichier CSS, en donnant à cette boîte un fond avec image:

.bg-img {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), #222428),
    url("../../assets/strangers-things.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

Toutes ces propriétés CSS ont pour but de centrer notre image en fond de notre page, et de la masquer progressivement vers le bas de la page.

Maintenant que notre image s’affiche en fond, nous allons passer au contenu même de la page. Mais avant je créé une autre boîte div à l’intérieur de la précédente, cette pour ajouter une marge intérieur à mon contenu:

<div class="ion-padding">
  
</div>

De cette manière, mon contenu, image, bouton et texte ne seront pas collés aux bords de l’écran.

Je commence alors par afficher l’image du film en question, ici toujours la série Stranger Things. J’inclue cette image dans une autre boîte div avec la classe img-header que nous allons déclarer après:

<div class="img-header">
  <img src="../../assets/strangers-things.jpg">
</div>

Je donne à ma classe img-header les propriétés CSS des flex-box pour centrer mon image à l’horizontal:

.img-header {
    display: flex;
    justify-content: center;
}

Je donne ensuite simplement une hauteur de 200 pixels à mon image:

.img-header img{
    height: 200px;
}

Passons ensuite aux petites informations situées en dessous de notre image, il s’agit des avis positifs, de la date de sortie du film ainsi que la classification et le nombre de saisons.

Pour chaque information, je créé une balise paragraphe et je les inclue toute dans une boîte div avec la classe tags:

<div class="tags">
  <p class="green">97% positif</p>
  <p>2017</p>
  <p>TV - 14</p>
  <p>2 Saisons</p>
</div>

Je donne ensuite les propriétés CSS flex-box à ma boîte tags, pour aligner mes paragraphes à l’horizontale et pour s’écarter suffisamment les unes des autres.

.tags {
    display: flex;
    justify-content: space-around;
}

Maintenant que vos paragraphes s’alignent à l’horizontal, il ne nous reste plus qu’à donner la bonne apparence à notre texte, le colorer en blanc et en vert pour le premier, etc:

.tags p{
    color: #9E9E9E;
    font-weight: 500;
    font-size: small;
}
.tags .green{
    color: #6ed86e;
}

En dessous de ces informations, se trouve un grand bouton lecture que propose Netflix. Nous pouvons très simplement le créer avec la balise ion-button et différent attribut:

<ion-button expand="block" color="netflix-red">
  <ion-icon slot="start" name="play"></ion-icon>
  Lecture
</ion-button>

Nous utilisons notamment la couleur netflix-red que nous avons déclaré au début de ce tuto.

Netflix propose ensuite dans son application une série de boutons que nous reproduisons avec l’élément ion-segment d’Ionic.

Vous pouvez en savoir plus à propos de cette balise sur la documentation d’Ionic: https://ionicframework.com/docs/api/segment

Nous créons ainsi une série de trois bouton pour notre page de détail de film Netflix sous Ionic:

<ion-segment color="netflix-red">
  <ion-segment-button value="liste" checked>
    <ion-icon color="light" name="add"></ion-icon>
    <ion-label color="light">Liste</ion-label>
  </ion-segment-button>
  <ion-segment-button color="light" value="rate">
    <ion-icon color="light" name="thumbs-up"></ion-icon>
    <ion-label color="light">Noter</ion-label>
  </ion-segment-button>
  <ion-segment-button value="share">
    <ion-icon color="light" name="share-alt"></ion-icon>
    <ion-label color="light">Partager</ion-label>
  </ion-segment-button>
  <ion-segment-button>
  </ion-segment-button>
</ion-segment>

J’ai ajouté manuellement l’attribut color= »light » pour le texte et l’icône de chaque bouton, pour se rapprocher du style de Netflix.

On passe ensuite à l’affichage des épisodes à commencer par le titre, tout simplement une balise h4:

<h4>ÉPISODES</h4>

Avec les propriétés CSS suivantes pour l’adapter au thème sombre:

h4 {
    color: white;
    font-size: initial;
    font-weight: 600;
    margin-left: 17px;
}

Enfin, on termine avec les miniatures de chaque épisode de la série, pour cela nous utilisons les ion-item pour afficher le contenu dans une même ligne.

On utilise également la balise ion-avatar pour proposer notre image en début de ligne, qui par défaut s’affichera de manière circulaire.

Nous allons lui modifier son apparence dans le CSS juste après, enfin à la suite de notre image nus affichons le titre de l’épisode dans un ion-label et une icône en fin de ligne pour le télécharger.

Voilà le résultat d’un épisode:

<ion-item >
  <ion-avatar slot="start">
    <img src="../../assets/ep1.jpg">
  </ion-avatar>
  <ion-label color="light" text-wrap>
    Chapitre Un: The Vanishing of Will Byers
  </ion-label>
  <ion-icon color="light" slot="end" name="download"></ion-icon>
</ion-item>

Nous devons également indiquer à notre ion-item d’avoir un fond transparent pour faire apparaître le fond de notre page Movie:

ion-item {
    --ion-background-color: transparent!important;
}

Et comme prévu, nous modifions l’apparence de notre image dans la ion-avatar, on modifiant la taille de l’image ainsi que le rayon de bordure ( à 0 puisque nous ne voulons pas de bords ronds):

ion-avatar {
    width: 100px;
    height: 50px;
}
ion-avatar img {
    border-radius: 0px;
}

La dernière étape du CSS consiste à modifier la taille du titre de l’épisode, une simple formamalité:

ion-label {
    font-size: small!important;
}

Pour afficher plusieurs épisodes, ajoutez autant de ces ion-item qu’il n’en faut et changez l’image et le titre de l’épisode:

<ion-item >
  <ion-avatar slot="start">
    <img src="../../assets/ep1.jpg">
  </ion-avatar>
  <ion-label color="light" text-wrap>
    Chapitre Un: The Vanishing of Will Byers
  </ion-label>
  <ion-icon color="light" slot="end" name="download"></ion-icon>
</ion-item>
<ion-item >
  <ion-avatar slot="start">
    <img src="../../assets/ep2.jpg">
  </ion-avatar>
  <ion-label color="light" text-wrap>
    Chapitre Deux: The Weirdo on Maple Street
  </ion-label>
  <ion-icon color="light" slot="end" name="download"></ion-icon>
</ion-item>
[...]
<ion-item >
  <ion-avatar slot="start">
    <img src="../../assets/ep8.jpg">
  </ion-avatar>
  <ion-label color="light" text-wrap>
    Chapitre Huit: The Vanishing of Will Byers
  </ion-label>
  <ion-icon color="light" slot="end" name="download"></ion-icon>
</ion-item>

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