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

npm install @rdlabo/ionic-theme-ios26

Après le CSS de base d’Ionic, ajoutez la feuille de style sombre système à votre feuille de style globale.

@import '@rdlabo/ionic-theme-ios26/styles/system.css';

Déployez ios26ThemeConfig par spread dans les options de votre initialiseur Ionic existant. La configuration fournit le mode iOS et les animations du thème.

import { ios26ThemeConfig } from '@rdlabo/ionic-theme-ios26';

const ionicConfig = {
  ...ios26ThemeConfig,
  // animated: false,
};

Suivez Installer le thème pour les exemples Angular, React et Vue, le choix du mode sombre et un aperçu. Utilisez la configuration pour les exports individuels de CSS et d’animation, les options personnalisées et la combinaison iOS 26 avec MD3. Les applications existantes peuvent adopter les wrappers à l’aide de la migration.

Documentation

• Utiliser ion-item-group — balisage requis pour les listes en retrait.
• Balisage et classes particuliers — balisage à activer explicitement et classes utilitaires du thème.
• ESLint — vérifier la structure des listes avec les règles ESLint.
• Fonctionnalités — variables CSS, Liquid Glass, importations sélectives et mode sombre.
• Animation expérimentale — effets de barre d’onglets et de recherche.
• iOS 18 — charger le thème uniquement sur iOS 26.
• Migration — adoption facultative des wrappers et étapes de mise à niveau propres à chaque version.