🖼️ 3.3 Les composants UI d'Ionic

Composants d’interface pour le mobile

Ionic fournit une bibliothèque complète de composants conçus pour créer des interfaces mobiles modernes, cohérentes et adaptatives.

Tous les composants ion-* :

respectent automatiquement les conventions visuelles iOS et Android
vous évitent de réécrire vos propres styles CSS
s’intègrent directement avec Vue 3

🤔 3.3.1 – Pourquoi utiliser les composants Ionic ?

Les composants Ionic ne sont pas de simples <div> stylées.

Ils offrent :

Adaptation automatique selon la plateforme
- Style Cupertino (iOS) ou Material Design (Android)
- Comportements natifs (animations, transitions, réactions tactiles)
Composants pensés pour le mobile
- zones tactiles suffisantes
- structure optimisée pour le scroll
- respect des patterns UI standards
Intégration Vue 3
- composants déclaratifs
- props / events compatibles avec l’écosystème Vue

💬 En résumé : Vous vous concentrez sur la logique et l’expérience, Ionic se charge du rendu natif.

🔁 Parallèle avec Vuetify

💡 Ça vous rappelle quelque chose… ? 😉

Si vous avez bien suivi au module 294, ceci vous rappellera fortement Vuetify :

même idée : librairie de composants UI
moderne, cohérente, responsive
gain de temps énorme pour les maquettes et écrans

La différence ici :

Vuetify → ciblait le web
Ionic → cible le mobile natif (smartphones / tablettes) via Capacitor

📱 Rendu iOS vs Android

Ionic applique automatiquement le style adéquat :

Un même code Vue :

ressemble à une app iOS sur iPhone
ressemble à une app Android sur Android
reste utilisable dans un simple navigateur

⚠️ Documentation & responsabilité

🚨 IMPORTANT

La liste de ce chapitre n’est pas exhaustive
Elle couvre les composants les plus utiles pour démarrer

Pour aller plus loin, consultez la doc officielle : 👉 https://ionicframework.com/docs/components

🧠 Responsabilité étudiante : explorer d’autres composants et leurs variantes pour enrichir vos projets.

📐 3.3.2 – Les composants de structure (Layout)

Ces composants forment la colonne vertébrale d’une page Ionic :

ion-app
ion-page
ion-header / ion-toolbar / ion-title
ion-content
ion-footer

🔳 `ion-app`

Conteneur racine obligatoire pour toute app Ionic
Créé automatiquement dans main.ts (rarement modifié à la main)
Gère :
- le thème global
- les variables CSS
- le contexte Ionic

En pratique : ➡️ vous le voyez peu, mais il est toujours là.

📄 `ion-page`

Conteneur d’une page individuelle (lié à une route Vue).

<ion-page>
  <ion-header>...</ion-header>
  <ion-content>...</ion-content>
</ion-page>

Rôles :

gère les transitions entre pages
permet à Ionic de calculer correctement la zone visible
obligatoire pour un rendu mobile cohérent

🔼 `ion-header` / `ion-toolbar` / `ion-title`

Barre supérieure de la page (header).

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Mes notes</ion-title>
  </ion-toolbar>
</ion-header>

Usages :

afficher le titre de l’écran
insérer des boutons d’action (retour, menu, search…)
changer le thème / couleur de la barre

📜 `ion-content`

Zone centrale et scrollable de la page.

<ion-content>
  <p>Bienvenue dans l’application.</p>
</ion-content>

Propriétés utiles :

fullscreen → occupe toute la hauteur sous le header
scroll-events → écouter les événements de scroll

💡 C’est ici que se trouve 90% du contenu de vos écrans.

🔽 `ion-footer`

Barre inférieure de l’écran (footer).

<ion-footer>
  <ion-toolbar>
    <ion-button expand="block">Valider</ion-button>
  </ion-toolbar>
</ion-footer>

Utilisations typiques :

actions persistantes (Valider, Continuer, Acheter…)
infos fixes (totaux, statuts…)

🧱 3.3.3 – Composants d’affichage (Display & Content)

Pour présenter le contenu de manière claire :

ion-card
ion-list / ion-item
ion-label
ion-avatar
ion-chip
ion-icon

🪪 `ion-card`

Bloc d’information polyvalent.

Usages : fiches, cartes de profils, résumé d’info…

<ion-card>
  <ion-card-header>
    <ion-card-title>Note importante</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Voici un texte à l’intérieur d'une carte.
  </ion-card-content>
</ion-card>

📋 `ion-list` et `ion-item`

Affichage de listes (paramètres, messages, tâches…).

Propriétés utiles sur ion-item :

button → rend l’item cliquable
detail → ajoute la petite flèche (navigation)

<ion-list>
  <ion-item v-for="task in tasks" :key="task.id">
    <ion-label>{{ task.title }}</ion-label>
  </ion-item>
</ion-list>

🏷️ `ion-label`

Texte principal à l’intérieur d’un ion-item.

<ion-item>
  <ion-label>Paramètres</ion-label>
</ion-item>

S’adapte automatiquement : ➜ gestion de la taille, ellipsis, alignement…

👤 `ion-avatar`

Photo de profil / image ronde.

🎯 Parfait pour les listes de contacts, messages, profils.

<ion-item>
  <ion-avatar slot="start">
    <img src="/assets/avatar.png" />
  </ion-avatar>
  <ion-label>Jean Dupont</ion-label>
</ion-item>

💬 `ion-chip`

Petit badge (tag, statut, catégorie).

Usages :

filtres
tags
statuts (En cours, Terminé…)

<ion-chip color="success">Terminé</ion-chip>

🔣 `ion-icon`

Icônes Ionicons intégrées.

iconographie cohérente avec le mobile
idéal combiné avec ion-button, ion-item, etc.

<ion-icon :icon="checkmarkCircle" />

🎛️ 3.3.4 – Formulaires & interactions

Composants principaux :

ion-input
ion-textarea
ion-toggle
ion-checkbox
ion-radio / ion-radio-group
ion-select
ion-button

⌨️ `ion-input`

Champ de texte simple.

🔁 À combiner avec v-model pour la gestion de formulaire.

<ion-item>
  <ion-input
    label="Prénom"
    placeholder="Entrez votre prénom">
  </ion-input>
</ion-item>

📝 `ion-textarea`

Texte multiligne.

auto-grow → grandit automatiquement
idéal pour les notes, descriptions, commentaires

<ion-textarea v-model="content" auto-grow />

🔘 `ion-toggle`

Interrupteur On / Off.

💡 À utiliser pour les préférences (notifications, thème, options…).

<ion-toggle v-model="isEnabled">
  Activer
</ion-toggle>

☑️ `ion-checkbox`

Case à cocher.

➜ convient bien pour les conditions générales, options multiples…

<ion-checkbox v-model="checked">
  Accepter
</ion-checkbox>

🔘 `ion-radio` & `ion-radio-group`

Choix exclusif (un seul élément sélectionné).

La valeur par défaut est strawberries → définie sur le groupe.

<ion-radio-group value="strawberries">
  <ion-radio value="grapes">Grapes</ion-radio><br />
  <ion-radio value="strawberries">Strawberries</ion-radio><br />
  <ion-radio value="pineapple">Pineapple</ion-radio><br />
  <ion-radio value="cherries">Cherries</ion-radio>
</ion-radio-group>

🔽 `ion-select`

Menu déroulant mobile.

<ion-select v-model="category" placeholder="Choisir une catégorie">
  <ion-select-option value="work">Travail</ion-select-option>
  <ion-select-option value="home">Maison</ion-select-option>
</ion-select>

🟢 `ion-button`

Bouton polyvalent.

Propriétés utiles :

expand="block" → pleine largeur
color="primary" → couleur du thème
fill="outline" → bouton contour

<ion-button expand="block" @click="saveNote">
  Sauvegarder
</ion-button>

🔔 3.3.5 – Feedback utilisateur

Composants pour informer l’utilisateur :

ion-toast → messages courts, temporaires
ion-alert → confirmations / erreurs bloquantes
ion-loading → état de chargement

🍞 `ion-toast` – Notification temporaire

Imports (Vue) : IonButton, IonToast depuis @ionic/vue.

⭐ Parfait pour : confirmation rapide, info non bloquante.

<ion-button id="open-toast">Open Toast</ion-button>

<ion-toast
  trigger="open-toast"
  message="Hello World!"
  :duration="3000">
</ion-toast>

⚠️ `ion-alert` – Boîte de dialogue

Script (exemple) :

const alertButtons = ['Action']

🔐 À utiliser pour les actions importantes / destructrices.

<ion-button id="present-alert">Click Me</ion-button>

<ion-alert
  trigger="present-alert"
  header="A Short Title Is Best"
  sub-header="A Sub Header Is Optional"
  message="A message should be a short, complete sentence."
  :buttons="alertButtons">
</ion-alert>

⏳ `ion-loading` – Indicateur de chargement

Imports : IonButton, IonLoading.

🎯 Utile pour les appels réseau lents, synchro, login…

<ion-button id="open-loading">
  Show Loading
</ion-button>

<ion-loading
  trigger="open-loading"
  :duration="3000"
  message="Dismissing after 3 seconds...">
</ion-loading>

🧭 3.3.6 – Composants de navigation visuelle

Deux concepts importants :

Tabs → navigation entre quelques sections “principales”
Menu → navigation plus large (sections nombreuses)

🗂️ `ion-tabs` / `ion-tab-bar` / `ion-tab-button`

Navigation par onglets (souvent en bas).

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      Accueil
    </ion-tab-button>
    <ion-tab-button tab="settings">
      Paramètres
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

📌 La logique de routing associée sera détaillée au chapitre 3.5 – Navigation.

📜 `ion-menu`

Menu latéral coulissant.

<ion-menu content-id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    This is the menu content.
  </ion-content>
</ion-menu>

💡 Utile pour les apps avec beaucoup de sections (ex. paramètres, profil, aide…).

🧪 3.3.7 – Activité : construire un écran complet

🎯 Objectif : créer un écran Ionic complet avec plusieurs types de composants.

Dans Tab2Page.vue, vous devez :

Ajouter un header avec :
- un titre
- un bouton d’action (ex. +, filtre, menu…)
Afficher une liste dynamique avec v-for → ex. liste de tâches, notes, paramètres…
Ajouter un bouton pour ouvrir :
- une modal (ou au minimum un alert / toast)
Afficher un toast lorsqu’une action de votre choix est effectuée → ex. “Élément ajouté”, “Action réussie”, etc.

🧠 Essayez d’utiliser au moins :

1 composant de structure

2 composants d’affichage

2 composants de formulaire / interaction

1 composant de feedback (toast, alert, loading)

🖼️ 3.3 Les composants UI d'Ionic

Composants d’interface pour le mobile

🤔 3.3.1 – Pourquoi utiliser les composants Ionic ?

🔁 Parallèle avec Vuetify

📱 Rendu iOS vs Android

⚠️ Documentation & responsabilité

📐 3.3.2 – Les composants de structure (Layout)

🔳 ion-app

📄 ion-page

🔼 ion-header / ion-toolbar / ion-title

📜 ion-content

🔽 ion-footer

🧱 3.3.3 – Composants d’affichage (Display & Content)

🪪 ion-card

📋 ion-list et ion-item

🏷️ ion-label

👤 ion-avatar

💬 ion-chip

🔣 ion-icon

🎛️ 3.3.4 – Formulaires & interactions

⌨️ ion-input

📝 ion-textarea

🔘 ion-toggle

☑️ ion-checkbox

🔘 ion-radio & ion-radio-group

🔽 ion-select

🟢 ion-button