Aller au contenu
rdlabo.devdocs

Premiers pas

Bibliothèque de thème CSS/JS qui applique le système de design iOS26 aux applications Ionic.

Démonstration : https://ionic-theme-ios26.rdlabo.dev/

Installation

Dans un projet Ionic existant :

npm install @rdlabo/ionic-theme-ios26

Remarque : si vous utilisez @ionic/core@ < 8.8.1, utilisez @rdlabo/ionic-theme-ios26@2.2.1.

Importez ensuite le thème dans le fichier CSS principal de votre projet, par exemple src/styles.scss.

@import '@rdlabo/ionic-theme-ios26/dist/css/default-variables.css';
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';

/**
 * Ce fichier neutralise les effets des changements de noms de classes pour iOS26.
 * Par exemple, `ion-buttons ion-button[fill=default]` n’est normalement pas implémenté, mais peut être nécessaire pour iOS26.
 * Ce fichier neutralise ces effets.
 * Remarque : cette feuille de style ne figure pas dans `@rdlabo/ionic-theme-md3`.
 */
@import '@rdlabo/ionic-theme-ios26/dist/css/md-remove-ios-class-effect.css';

/**
 * Importez cette feuille pour utiliser aussi le design de ion-item-group avec ion-list sur Android.
 * En savoir plus : https://docs.rdlabo.dev/projects/ionic-theme-ios26/docs/using-ion-item-group
 * Remarque : cette feuille de style figure dans `@rdlabo/ionic-theme-md3`.
 * @import '@rdlabo/ionic-theme-ios26/dist/css/md-ion-list-inset.css';
 */

/*
 * Prise en charge du mode sombre
 * Le mode sombre Ionic est pris en charge. En savoir plus : https://ionicframework.com/docs/theming/dark-mode
 * mode Always :    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-always.css'
 * mode System :    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-system.css'
 * mode CSS Class : @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css'
 */

Configurer les animations

Si vous avez installé uniquement le thème iOS 26, configurez ses animations comme suit.

import { isPlatform } from '@ionic/core'; // ou @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';

// Angular
provideIonicAngular({
    ...
    navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
    popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
});

// React
setupIonicReact({
    ...
    navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
    popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
});

// Vue
createApp(App)
    .use(IonicVue, {
        ...
        navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
        popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
})

Vérifier le thème

Testez sur iOS. Pour un aperçu sur ordinateur, définissez le mode Ionic sur ios dans la configuration d’initialisation de votre framework (par exemple mode: 'ios').

Utilisez ce balisage pour prévisualiser l’apparence d’une liste groupée en retrait. Consultez Utiliser ion-item-group pour la structure de liste attendue par le thème.

<ion-list mode="ios" inset="true">
  <ion-item-group>
    <ion-item><ion-label>Notifications</ion-label></ion-item>
    <ion-item><ion-label>Appearance</ion-label></ion-item>
  </ion-item-group>
</ion-list>

Facultatif : associer les thèmes iOS 26 et MD3

Installez le thème MD3 pour appliquer les styles aux deux modes Ionic dans la même application.

Les versions actuelles des deux thèmes nécessitent @ionic/core 8.8.1 ou une version ultérieure.

npm install @rdlabo/ionic-theme-md3

Si votre feuille de style globale utilise Sass, initialisez les thèmes dans cet ordre :

@use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss' as ios26-vars;
@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
@use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
@use '@rdlabo/ionic-theme-md3/dist/css/default-variables.css' as md3-vars;
@use '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';

L’exemple utilise le mode sombre Ionic activé par classe. Votre feuille de style globale doit également charger la palette sombre Ionic correspondante, par exemple @ionic/angular/css/palettes/dark.class.css pour Angular. Avec dark-system ou dark-always, choisissez la même variante pour la palette Ionic et le thème iOS 26. Consultez la documentation du mode sombre d’Ionic. Les espaces de noms explicites ios26-vars et md3-vars empêchent les deux modules de variables d’utiliser le même espace de noms par défaut.

Configurez les deux implémentations de transition lorsque les deux thèmes sont installés :

import { isPlatform } from '@ionic/core'; // ou @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';
import { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';

// Angular
provideIonicAngular({
    ...
    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
});

// React
setupIonicReact({
    ...
    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
});

// Vue
createApp(App)
    .use(IonicVue, {
        ...
        navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
        popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
    });

Documentation

Modifier cette page sur GitHub