Zum Inhalt springen
rdlabo.devdocs

Erste Schritte

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

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

Installation

In einem bestehenden Ionic-Projekt:

npm install @rdlabo/ionic-theme-ios26

Hinweis: Wenn Sie @ionic/core@ < 8.8.1 verwenden, verwenden Sie @rdlabo/ionic-theme-ios26@2.2.1.

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

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

/**
 * Diese Datei gleicht die Auswirkungen geänderter Klassennamen für iOS26 aus.
 * Beispielsweise ist `ion-buttons ion-button[fill=default]` normalerweise nicht implementiert, kann jedoch für iOS26 erforderlich sein.
 * Diese Datei gleicht solche Auswirkungen aus.
 * Hinweis: Dieses Stylesheet ist nicht in `@rdlabo/ionic-theme-md3` enthalten.
 */
@import '@rdlabo/ionic-theme-ios26/dist/css/md-remove-ios-class-effect.css';

/**
 * Importieren Sie es, wenn Sie das Design von ion-item-group mit ion-list auch unter Android verwenden möchten.
 * Weitere Informationen: https://docs.rdlabo.dev/projects/ionic-theme-ios26/docs/using-ion-item-group
 * Hinweis: Dieses Stylesheet ist in `@rdlabo/ionic-theme-md3` enthalten.
 * @import '@rdlabo/ionic-theme-ios26/dist/css/md-ion-list-inset.css';
 */

/*
 * Unterstützung des dunklen Modus
 * Der dunkle Modus von Ionic wird unterstützt. Weitere Informationen: https://ionicframework.com/docs/theming/dark-mode
 * Immer verwenden:       @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-always.css'
 * Systemmodus verwenden: @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-system.css'
 * CSS-Klasse verwenden:  @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css'
 */

Animationen konfigurieren

Wenn Sie nur das iOS-26-Theme installiert haben, konfigurieren Sie dessen Animationen wie folgt.

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

// 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,
})

Das Theme prüfen

Testen Sie unter iOS. Setzen Sie bei der Vorschau auf dem Desktop den Ionic-Modus in Ihrer bestehenden Framework-Initialisierung auf ios, beispielsweise mit mode: 'ios'.

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="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>

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

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

Die aktuellen Versionen beider Themes benötigen @ionic/core ab 8.8.1.

npm install @rdlabo/ionic-theme-md3

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

Diese Seite auf GitHub bearbeiten