Aller au contenu
WebView Native UIdocs

Premiers pas

Thème CSS/JS pour les applications Ionic, qui prend Android Settings comme référence visuelle tout en préservant les API des composants et la sémantique des couleurs Ionic.

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

Conçu pour être compatible avec @rdlabo/ionic-theme-ios27, afin qu’un même arbre de balisage permette de styliser les deux modes Ionic.

Installation

Utilisez le guide d’installation pour installer le package, importer @rdlabo/ionic-theme-md3/styles/theme.css et déployer md3ThemeConfig par spread dans les options de votre initialiseur Ionic existant. Ionic >=8.8.0 <10 est pris en charge. Les applications utilisant une ancienne version d’Ionic peuvent utiliser @rdlabo/ionic-theme-md3@1.0.2.

Pour les applications existantes, suivez la simplification facultative de la configuration. Pour les fichiers CSS individuels et les réglages d’animation, utilisez la configuration.

Apparence Android Settings

Le thème conserve la sémantique des couleurs Ionic et les polices définies par l’application. Les interrupteurs standard sont sans icônes. La police MD par défaut utilise Google Sans Flex local sur l’appareil lorsqu’il est disponible, avec les polices de repli standard ; elle est incluse dans le CSS du thème. Aucun code d’initialisation de police ni plugin Capacitor n’est requis. Les icônes de retour restent gérées par Ionic.

Consultez Apparence Android Settings pour l’installation, les polices de repli et les personnalisations des composants. Les utilisateurs existants doivent lire les notes de migration 9.2.0 concernant les dimensions des barres d’outils, listes et interrupteurs.

Facultatif : utiliser les thèmes MD3 et iOS 27 ensemble

Suivez la configuration combinée des thèmes pour l’ordre des feuilles de style et la sélection des animations selon la plateforme.

Documentation

  • Installation — installer et configurer le thème avec sa feuille de style et son objet de configuration.

  • Configuration — feuilles de style individuelles, animations et maintien de la sélection existante du mode.

  • Couleurs dynamiques Android — configuration facultative Material You, apparence claire/sombre, cycle de vie et correspondance des rôles.

  • Système de couleurs — palette Ionic par défaut, rôles Material facultatifs et attribution des couleurs aux composants.

  • Apparence Android Settings — géométrie et polices CSS par défaut, personnalisation Ionic.

  • Utiliser ion-item-group — balisage commun des listes en retrait pour iOS 27 et MD3.

  • Balisage particulier — combinaisons facultatives de composants utilisées par la démo.

  • ESLint — vérifier la structure des listes avec les règles ESLint.

  • Migration — simplification facultative de la configuration et étapes de mise à niveau propres à chaque version.

Projets connexes

Si vous avez besoin d’une implémentation plus complète de Material Design 3, ce projet peut aussi vous intéresser :

Remarque : ce thème vise la compatibilité avec l’approche de conception d’Ionic et @rdlabo/ionic-theme-ios27 ; il ne cherche pas à reproduire MD3 intégralement et strictement.

Modifier cette page sur GitHub