Erste Schritte

Eine CSS-/JS-Theme-Bibliothek, die das Designsystem Material Design 3 auf Ionic-Anwendungen anwendet.

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

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

Installation

In einem bestehenden Ionic-Projekt:

npm install @rdlabo/ionic-theme-md3

Hinweis: Wenn Sie @ionic/core@ < 8.8.0 verwenden, verwenden Sie @rdlabo/ionic-theme-md3@1.0.2.

Importieren Sie außerdem das Theme in die Haupt-CSS-Datei Ihres Projekts, beispielsweise src/styles.scss.

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

Animationen konfigurieren

Wenn Sie nur das MD3-Theme installiert haben, konfigurieren Sie dessen Animation wie folgt.

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

// Angular
provideIonicAngular({
    ...
    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
});

// React
setupIonicReact({
    ...
    navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
});

// Vue
createApp(App)
    .use(IonicVue, {
        ...
        navAnimation: isPlatform('ios') ? undefined: mdTransitionAnimation,
})

Das Theme prüfen

Testen Sie unter Android. Setzen Sie bei einer Desktop-Vorschau den Ionic-Modus in Ihrer bestehenden Framework-Initialisierung auf md, beispielsweise mit mode: 'md'.

Mit diesem Markup können Sie das Erscheinungsbild eingerückter gruppierter Listen ausprobieren. Die vom Theme erwartete Listenstruktur finden Sie unter Verwendung von ion-item-group.

<ion-list mode="md" 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>

Optional: Das MD3- und iOS-26-Theme gemeinsam verwenden

Installieren Sie das iOS-26-Theme, um beide Ionic-Modi in derselben Anwendung zu gestalten.

Die aktuellen Versionen beider Themes benötigen @ionic/core ab 8.8.1. Aktualisieren Sie Ionic vor der Verwendung dieser Konfiguration, wenn Ihre Anwendung 8.8.0 oder eine ältere Version verwendet.

npm install @rdlabo/ionic-theme-ios26

Wenn Ihr globales Stylesheet Sass verwendet, initialisieren Sie die Themes in dieser Reihenfolge:

@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';

Das Beispiel verwendet den klassenbasierten dunklen Modus von Ionic. Ihr globales Stylesheet muss auch die passende dunkle Ionic-Palette laden, beispielsweise @ionic/angular/css/palettes/dark.class.css für Angular. Wählen Sie bei dark-system oder dark-always dieselbe Variante für die Ionic-Palette und das iOS-26-Theme. Siehe die Dokumentation zum dunklen Modus von Ionic. Die ausdrücklich gesetzten Namensräume ios26-vars und md3-vars verhindern, dass beide Variablenmodule denselben Standardnamensraum verwenden.

Konfigurieren Sie bei Installation beider Themes beide Übergangsimplementierungen:

import { isPlatform } from '@ionic/core'; // Oder @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,
    });

Dokumentation

Verwendung von ion-item-group — gemeinsames Markup für eingerückte Listen unter iOS 26 und MD3.
Spezielles Markup — ausdrücklich aktivierbare Komponentenkombinationen der Demo.
ESLint — die Listenstruktur mit ESLint-Regeln prüfen.
Migration — notwendige Änderungen beim Aktualisieren des Theme-Markups.

UI-Werkzeuge