Zum Inhalt springen
WebView Native UIdocs

Erste Schritte

Ein CSS/JS-Theme für Ionic-Anwendungen mit Android Settings als visueller Referenz, das Ionics Komponenten-APIs und Farbsemantik bewahrt.

Die Demo finden Sie hier: https://ionic-theme-md3.rdlabo.dev/

Für die Kompatibilität mit @rdlabo/ionic-theme-ios27 entwickelt, sodass ein Markup-Baum beide Ionic-Modi gestalten kann.

Installation

Verwenden Sie die Einrichtungsanleitung, um das Paket zu installieren, @rdlabo/ionic-theme-md3/styles/theme.css zu importieren und md3ThemeConfig per Spread in die Optionen Ihrer bestehenden Ionic-Initialisierung zu übernehmen. Ionic >=8.8.0 <10 wird unterstützt. Apps mit älteren Ionic-Versionen können @rdlabo/ionic-theme-md3@1.0.2 verwenden.

Folgen Sie für bestehende Apps der optionalen Vereinfachung der Einrichtung. Einzelne CSS-Dateien und Animationseinstellungen beschreibt die Konfiguration.

Android Settings-Darstellung

Das Theme bewahrt Ionics Farbsemantik und Schriftanpassungen der Anwendung. Standard-Toggles sind ohne Symbole. Die MD-Standardschrift nutzt lokal auf dem Gerät verfügbares Google Sans Flex mit üblichen Ersatzschriften und ist im Theme-CSS enthalten. Weder Schriftinitialisierungscode noch ein Capacitor-Plugin ist erforderlich. Zurück-Symbole bleiben Ionics Zuständigkeit.

Installation, Ersatzschriften und Komponenten-Anpassungen beschreibt Android Settings-Darstellung. Bestehende Nutzer sollten die Migrationshinweise zu 9.2.0 zu geänderten Toolbar-, Listen- und Toggle-Abmessungen lesen.

Optional: MD3- und iOS-27-Themes gemeinsam verwenden

Folgen Sie der kombinierten Theme-Konfiguration für die Reihenfolge der Stylesheets und die plattformabhängige Auswahl der Animationen.

Dokumentation

  • Einrichtung — das Theme mit dem Theme-Stylesheet und Konfigurationsobjekt installieren und konfigurieren.

  • Konfiguration — einzelne Stylesheets, Animationen und die vorhandene Modusauswahl.

  • Dynamische Android-Farben — optionale Material You-Einrichtung, helle/dunkle Darstellung, Lebenszyklus und Rollenzuordnung.

  • Farbsystem — Ionic-Palettenstandards, optionale Material-Rollen und Farbzuordnungen für Komponenten.

  • Android Settings-Darstellung — Standardgeometrie, CSS-Standardschriften und Ionic-Anpassungen.

  • ion-item-group verwenden — gemeinsames Markup für eingerückte Listen in iOS 27 und MD3.

  • Besonderes Markup — optionale Komponentenkombinationen der Demo.

  • ESLint — Listenstruktur mit ESLint-Regeln prüfen.

  • Migration — optionale Vereinfachung der Einrichtung und versionsspezifische Aktualisierungsschritte.

Verwandte Projekte

Wenn Sie eine umfassendere Implementierung von Material Design 3 benötigen, könnte Sie auch Folgendes interessieren:

Hinweis: Dieses Theme ist gezielt auf Kompatibilität mit Ionics Designansatz und @rdlabo/ionic-theme-ios27 ausgelegt; es soll MD3 nicht streng und vollständig nachbilden.

Diese Seite auf GitHub bearbeiten