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

npm install @rdlabo/ionic-theme-ios26

Fügen Sie nach Ionics CSS-Basisimporten das Stylesheet für den systemgesteuerten Dunkelmodus in Ihrem globalen Stylesheet hinzu.

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

Übernehmen Sie ios26ThemeConfig per Spread in die Optionen Ihrer bestehenden Ionic-Initialisierung. Die Konfiguration stellt den iOS-Modus und die Theme-Animationen bereit.

import { ios26ThemeConfig } from '@rdlabo/ionic-theme-ios26';

const ionicConfig = {
  ...ios26ThemeConfig,
  // animated: false,
};

Die Einrichtungsanleitung bietet Angular-, React- und Vue-Beispiele sowie Informationen zur Auswahl des Dunkelmodus und eine Vorschau. Verwenden Sie die Konfiguration für einzelne CSS- und Animationsexporte, eigene Optionen sowie iOS 26 zusammen mit MD3. Bestehende Anwendungen können die Wrapper anhand der Migration einführen.

Dokumentation

Verwendung von ion-item-group — erforderliches Markup für eingerückte Listen.
Spezielles Markup und Klassen — gezielt aktivierbares Markup und Hilfsklassen des Themes.
ESLint — die Listenstruktur mit ESLint-Regeln prüfen.
Funktionen — CSS-Variablen, Liquid Glass, selektive Imports und dunkler Modus.
Experimentelle Animation — Effekte für Tab-Leiste und Suche.
iOS 18 — das Theme nur unter iOS 26 laden.
Migration — optionale Einführung der Wrapper und versionsspezifische Aktualisierungsschritte.

Diese Seite auf GitHub bearbeiten