本文へ移動
WebView Native UIdocs

Ionic Theme iOS27

npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable でインストールします。1.x は v1.2.1 のガイドを使用してください。Ionic アプリに iOS 27 の Liquid Glass とアニメーションを適用します。Capacitor iOS では、2.0.0から正式対応した Native UI を対応コントロールへ追加できます。

Ionic 9 デモ · セットアップ

何をしたいですか？

目的 ガイド
既存の Ionic アプリにテーマを適用する はじめる
iOS 26/27 の選択と任意の MD3 併用 適応テーマ
Capacitor アプリに iOS のネイティブコントロールを追加する Native UI を追加
既存テーマを維持して Ionic にサイドレールを追加する Vertical Bars の導入
任意で Cordova からテーマと Native UI を使う Cordova の設定
スタイル・ダークモード・アニメーションを個別に設定する 設定
既存環境を更新する 移行

はじめる

標準ガイドは単独テーマパッケージを使用し、ネイティブホストは Capacitor を標準とします。テーマだけをブラウザーで使うこともできます。Cordova アプリには、同梱テーマとホスト固有の起動を説明する Cordova ガイドがあります。

デバイスレイアウトには、Erkam Yaman によるコミュニティプラグイン Capacitor Foldable を標準連携として使用します。折りたたみ状態、ヒンジの形状、バー配置と変更イベントをアプリへ提供し、レイアウトの応答を制御できます。Foldable はデバイス情報、テーマは Web レイアウト、Native UI はコントロールの投影を担当します。使用するパッケージと一緒に導入し、アプリでイベントを接続してください。

テーマを導入し、Ionic の基本 CSS の後にグローバルのテーマ CSS を1つ読み込み、既存の Ionic 初期化へテーマ設定を渡します。Angular・React・Vue の手順はセットアップを参照してください。

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

手動のダークモードには styles/class.css、常時ダークには styles/always.css を選びます。対応する Ionic ダークパレットも含まれます。テーマ設定は iOS モードとアニメーションを既定とし、アプリのオプションで上書きできます。対応する Ionic は >=8.8.1 <10 です。ブラウザー専用アプリにネイティブ Capacitor プロジェクトは不要です。

テーマは toolbar、tabs、list、button、search、overlay のライト・ダーク外観を提供しますが、ネイティブコントロールは有効にしません。Web テーマの動作後に任意で Native UI を追加できます。

アプリをカスタマイズする

個別の CSS とアニメーションは設定、既存アプリの任意の簡略化は移行を参照してください。

リポジトリの責務

Capacitor プラグインは webview-native-ui/capacitor-plugin で保守します。このリポジトリはテーマ、統合デモ、ブラウザー撮影とシミュレーター連携テストを管理します。デモは npm の @rdlabo/capacitor-native-ui を使用し、テーマのリリースでプラグインの公開や版の変更は行いません。

Cordova プラグインは別に保守し、連携 import を Cordova に接続した固定版テーマを配布します。共通テーマの修正はテーマ側で行い、Cordova は後続のプラグインリリースで同梱版を更新します。以下の Capacitor デモと候補検証は Cordova を検証しません。

未公開のプラグインアーカイブを実際のデモで検証する場合:

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

隔離した一時チェックアウトを作成し、既存の manifest と lockfile は変更しません。--e2e と一緒に --shard=1/2 を渡すと Playwright の1シャードを実行します。全体を検証するには全シャードを実行してください。各シャードでパッケージ検証、unit test、本番ビルドを維持します。--simulator=UDID は Native UI・検索・edge のシミュレーター検証を追加します。診断情報と一時デモは表示された場所に残ります。プラグイン単体とネイティブライブラリのテストはプラグイン側で管理し、その CI は候補をこのリポジトリの main と組み合わせて検証します。

メンテナンス

最新のクリーンな main から npm run release でテーマをリリースします。ios27-v… のタグワークフローはテーマだけを公開し、プレリリースには next、安定版には latest を使います。

テーマとプラグインは独立したバージョンです。単独の @rdlabo/ionic-theme-ios27 は、アプリと同じインスタンスを使うため Capacitor Native UI を必須 peer dependency とします。npm 7+ はテーマ専用アプリでも自動導入し、ほかのパッケージマネージャーでは必須 peer を導入する必要があります。ネイティブコントロールを使うアプリは Capacitor の検出用にプラグインを直接依存へ宣言してください。公開済み npm バージョンは上書きできません。

GitHubでこのページを編集