Das iOS-27-Theme einrichten

Geben Sie einer bestehenden Ionic-App in vier Schritten die iOS-27-Darstellung. Diese Anleitung verwendet ausschließlich das iOS-27-Theme und den systemgesteuerten Dunkelmodus. Für browserabhängige iOS-26/27-Stile oder MD3 verwenden Sie stattdessen adaptive Themes.

Vorbereitungen

Verwenden Sie eine bestehende Ionic-Angular-, React- oder Vue-Anwendung mit Ionic >=8.8.1 <10. Behalten Sie Ionics grundlegende CSS-Importe. Reine Browser-Apps benötigen kein natives Capacitor-Projekt.

1. Theme und Foldable installieren

npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable

Capacitor Foldable ist unsere Standardintegration für den Gerätezustand. Seine APIs für Position und Faltstellung ermöglichen Ihrer App, Layoutanpassungen zu steuern; nach der Installation müssen Anfangswerte und Änderungsereignisse verbunden werden. Folgen Sie beim Einrichten des Gerätelayouts der Layoutanleitung.

2. Stylesheets laden

Fügen Sie diese Importe in Ihrem globalen Stylesheet nach Ionics Basisstilen ein. Ersetzen Sie einen vorhandenen Import einer dunklen Ionic-Palette, statt mehrere Paletten zu laden:

@import '@ionic/core/css/palettes/dark.system.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/md-remove-ios-class-effect.css';
@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css';

Ein Dunkelmodus-Paar auswählen

Verwenden Sie genau eine zusammenpassende Ionic-Palette und Theme-Variante. Die folgenden Pfade sind relativ zu @ionic/core/css/palettes/ beziehungsweise @rdlabo/ionic-theme-ios27/dist/css/.

Wenn Sie zusätzlich Native UI aktivieren, liefern diese Stile deren Kennzeichnung für helle/dunkle Darstellung. Kombinieren Sie die passende Ionic-Palette und Theme-Variante, damit Web- und native Bedienelemente übereinstimmen. Die Auflösungsreihenfolge und das Verhalten gemeinsam genutzter Seitenleisten beschreibt Vererbung der nativen Darstellung.

3. Ionic-Animationen konfigurieren

Setzen Sie diese Optionen vor dem Rendern der App in Ihrer bestehenden Ionic-Initialisierung:

import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';

const ionicConfig = {
  mode: 'ios' as const,
  navAnimation: iosTransitionAnimation,
  popoverEnter: popoverEnterAnimation,
  popoverLeave: popoverLeaveAnimation,
};

Dieses Beispiel verwendet bewusst den Modus ios, damit auch Desktopbrowser das Theme anzeigen. Übergeben Sie ionicConfig an die bereits von Ihrer App verwendete Initialisierung:

Führen Sie die Optionen mit vorhandenen Optionen zusammen; initialisieren Sie Ionic nicht zweimal. Um unter Android den Material-Design-Modus zu behalten, lassen Sie Ihre plattformabhängige Modusauswahl bestehen und wenden Sie die Animationsoptionen nur auf die iOS-Konfiguration an. Ein vollständiges plattformabhängiges Beispiel finden Sie unter adaptive Themes.

4. Den ersten Bildschirm ansehen

Starten Sie den üblichen Entwicklungsserver Ihrer Anwendung und öffnen Sie eine vorhandene Seite. Fügen Sie dieses Markup innerhalb ihres ion-content ein; verwenden Sie dabei die Komponentensyntax Ihres Frameworks:

<ion-list 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>

Sie sollten eine eingerückte Gruppe mit abgerundeten Rändern sehen. Wechseln Sie die Systemdarstellung zwischen hell und dunkel und navigieren Sie anschließend zwischen Seiten, um den Theme-Übergang zu sehen. Die Listenstruktur beschreibt ion-item-group verwenden.

Nächste Schritte

• Stile und Komponenten anpassen.
• Native UI hinzufügen, um unterstützte Bedienelemente in einer Capacitor-iOS-App zu verwenden. Die Theme-Installation allein aktiviert keine nativen Bedienelemente.
• Vertical Bars zu einem bestehenden Theme hinzufügen.
• Eine bestehende App migrieren.