Erste Schritte

Installieren Sie das Paket mit npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable. Für 1.x verwenden Sie die Anleitung für v1.2.1.
Ein Theme für Ionic-Anwendungen, das iOS 27 Liquid Glass und dessen Bewegungseffekte ins Web bringt. Capacitor-Anwendungen für iOS können zusätzlich Native UI für unterstützte Bedienelemente aktivieren; sie wird ab Version 2.0.0 offiziell unterstützt.

Ionic-9-Demo · Einrichtungsanleitung

Was möchten Sie tun?

Erste Schritte

Die Standardanleitungen verwenden das eigenständige Theme-Paket mit Capacitor als standardmäßigem nativen Host. Die reine Theme-Nutzung im Browser bleibt unterstützt. Für Cordova-Anwendungen beschreibt die optionale Cordova-Anleitung das mitgelieferte Theme und den hostspezifischen Start.

Als Standardintegration für das Gerätelayout verwenden wir Capacitor Foldable, ein hervorragendes Community-Plugin von Erkam Yaman. Es stellt Ihrer Anwendung Faltzustand, Scharniergeometrie, Leistenposition und Änderungsereignisse bereit, damit Sie die Layoutreaktionen steuern können. Foldable meldet den Gerätezustand, das Theme stellt Web-Layout-Helfer bereit und Native UI projiziert Bedienelemente. Installieren Sie es neben dem verwendeten Paket und verbinden Sie anschließend seine Ereignisse mit Ihrer App.

Installieren Sie das Theme, fügen Sie ein globales Theme-Stylesheet nach Ionics CSS-Basisimporten hinzu und übergeben Sie die Theme-Konfiguration an Ihre bestehende Ionic-Initialisierung. Beispiele für Angular, React und Vue finden Sie in der Einrichtungsanleitung.

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

@import '@rdlabo/ionic-theme-ios27/styles/system.css';

import { ios27ThemeConfig } from '@rdlabo/ionic-theme-ios27';

provideIonicAngular({
  ...ios27ThemeConfig,
  // animated: false,
});

Wählen Sie styles/class.css für den von der Anwendung gesteuerten Dunkelmodus oder styles/always.css für eine stets dunkle Darstellung. Das Stylesheet enthält die passende dunkle Ionic-Palette. Die Theme-Konfiguration verwendet standardmäßig den iOS-Modus und dessen Animationen; anwendungsspezifische Optionen haben Vorrang. Der Ionic-Kompatibilitätsbereich ist >=8.8.1 <10. Reine Browser-Apps benötigen kein natives Capacitor-Projekt.

Das Theme gestaltet Werkzeugleisten, Tabs, Listen, Schaltflächen, Suche und Overlays mit heller und dunkler Darstellung. Es aktiviert keine nativen Bedienelemente. Sobald das Web-Theme funktioniert, können Sie optional Native UI hinzufügen.

Ihre App anpassen

Verwenden Sie die Konfiguration für einzelne CSS- und Animationseinstellungen. Bestehende Anwendungen können ihre Einrichtung optional anhand der Migrationsanleitung vereinfachen.

• Funktionen: CSS-Variablen, Liquid Glass und selektive Komponentenimporte.
• Spezielles Markup und Klassen: optionales Komponentenverhalten.
• ion-item-group verwenden: Markup für eingerückte Listen.
• Animation: Tab-, Segment- und Sucheffekte.
• ESLint: nicht unterstützte Listenstrukturen erkennen.
• Vertical Bars-Layout: Abstände, RTL, Geräteposition, Faltstellung und Split Panes.

Zuständigkeiten der Repositorys

Das Capacitor-Plugin wird in webview-native-ui/capacitor-plugin gepflegt. Dieses Repository verwaltet das Ionic-Theme, die kombinierte Demo, Browser-Screenshots und Simulator-Integrationstests. Die Demo installiert @rdlabo/capacitor-native-ui von npm; Theme-Releases veröffentlichen das Plugin nicht und ändern dessen Version nicht.

Das Cordova-Plugin wird separat gepflegt. Es verteilt eine festgelegte Kopie dieses Themes, deren Integrationsimporte mit Cordova verbunden sind. Gemeinsame Theme-Korrekturen gehören hierher; Cordova aktualisiert seine festgelegte Theme-Version in einem späteren Plugin-Release. Die Capacitor-Demo und die nachfolgenden Kandidatenprüfungen validieren Cordova nicht.

Um ein unveröffentlichtes Plugin-Archiv mit der echten Demo zu prüfen, führen Sie Folgendes aus:

npm run test:native-candidate -- /absolute/path/rdlabo-capacitor-native-ui-VERSION.tgz --e2e

Dies erstellt einen isolierten temporären Checkout und lässt Ihre Manifeste und Lockfiles unverändert. Ergänzen Sie --shard=1/2 neben --e2e, um einen Playwright-Shard auszuführen; führen Sie alle Shards aus, um die gesamte Suite abzudecken. Jeder Shard umfasst weiterhin Paketprüfungen, Unit-Tests und den Produktionsbuild. Ergänzen Sie --simulator=UDID für die Simulator-Suiten für native UI, Suche und Ränder. Diagnoseinformationen und die temporäre Demo bleiben unter dem ausgegebenen Pfad erhalten. Plugin-spezifische Unit-Tests und native Bibliothekstests liegen im Plugin-Repository. Dessen CI testet jedes Kandidatenarchiv gegen den main-Branch dieses Repositorys.

Wartung

Veröffentlichen Sie das Theme-Paket im Repository-Stamm mit npm run release von einem sauberen, aktuellen main. Der Workflow für ios27-v…-Tags veröffentlicht nur das Theme, mit next für Vorabversionen und latest für stabile Versionen.

Theme und Plugin werden unabhängig versioniert. Beim eigenständigen Paket @rdlabo/ionic-theme-ios27 ist Capacitor Native UI eine erforderliche Peer-Abhängigkeit, damit Theme und Anwendung dieselbe Plugin-Instanz nutzen. npm 7+ installiert sie bei reinen Theme-Apps automatisch; bei anderen Paketmanagern müssen erforderliche Peer-Abhängigkeiten installiert werden. Apps mit nativen Steuerelementen müssen das Plugin zusätzlich direkt deklarieren, damit Capacitor es erkennt. Eine veröffentlichte npm-Version kann nicht überschrieben werden.