API

function registerTabBarEffect

(targetElement: HTMLElement) => registeredEffect | undefined

Ionic Tab BarにLiquid Glassの選択effectを登録します。

function registerSegmentEffect

(targetElement: HTMLElement) => registeredEffect | undefined

Ionic SegmentにLiquid Glassの選択effectを登録します。

interface registeredEffect

interface EffectScales

function attachTabBarSearchable

(ionTabBar: HTMLElement, ionFabButton: HTMLElement, ionFooter: HTMLElement) => TabBarSearchableFunction

Searchable Tab Barのtransitionを設定し、event handlerを返します。

enum TabBarSearchableType

type alias TabBarSearchableFunction

(event: Event, type: TabBarSearchableType) => Promise<void>

function withNativeUIShellTransition

(builder: AnimationBuilder) => AnimationBuilder

Ionicの画面遷移builderをラップし、返されるアニメーションを維持しながら、ネイティブ部品の退避、スワイプの進捗、キャンセルを連携します。パッケージrootと /vertical-bars からexportされます。navAnimation に登録し、遷移ごとに新しい Animation を使ってください。本パッケージの iosTransitionAnimation には既に組み込まれています。Ionic標準と独自builderの設定は既存テーマでの導入を参照してください。

function iosTransitionAnimation

(navEl: HTMLElement, opts: TransitionOptions) => Animation

PackageのiOS navigation transitionを生成します。

function setConfig

(config: Partial<IosTransitionConfig>) => void

画面遷移の角丸半径を設定します。既定値は 0 で、ネイティブアプリでは計測したWebViewの半径を渡せます。

interface IosTransitionConfig

function popoverEnterAnimation

(baseEl: HTMLElement, opts?: any) => Animation

iOS Popoverのenter animationを生成します。

function popoverLeaveAnimation

(baseEl: HTMLElement) => Animation

iOS Popoverのleave animationを生成します。

function supportSeachbarCancelButtonIcon

(searchbar: HTMLIonSearchbarElement) => SearchbarCancelButtonIconSupport

iOS modeでIonicの cancelButtonIcon を描画する一時的な補助です。公開API名の Seachbar はこの綴りでimportします。初期化済みの要素を渡してください。

interface SearchbarCancelButtonIconSupport

function enableNativeUIShell

(options?: NativeUIShellOptions) => Promise<NativeUIShellHandle>

起動時に一度呼びます。同じ設定で繰り返すと稼働中のruntimeを共有し、稼働中に異なる設定を指定するとエラーになります。非対応環境ではWeb状態のhandleを返します。enabled: false で稼働中のネイティブ描画を停止し、Web描画に戻します。

function configureNativeTransition

() => Promise<WebViewMetrics>

ネイティブWebViewの角丸半径を取得し、ネイティブ部品を有効にせず画面遷移へ適用します。他のプラットフォームでは半径は 0 です。

interface NativeUIShellOptions

VerticalControlAreaOptions を継承します。縦型ボタンの描画設定は以下を参照してください。

interface NativeUIShellControls

interface NativeUIShellHandle

interface NativeUIShellSuspension

interface WebViewMetrics

interface NativeUIShellStatus

interface NativeUIShellStatus {
  state: 'web' | 'native' | 'stopped';
  projected: number;
  updates: number;
  reason?: string;
}

projected はネイティブ描画中の部品数、updates は更新数、reason はWebフォールバック・停止理由です。bridge障害による stopped から自動再接続はしません。handleを destroy() してから再度有効化します。

type alias NativeUIShellComponent

'ion-button' | 'ion-buttons' | 'ion-back-button' | 'ion-menu-button' | 'ion-tab-bar' | 'ion-segment' | 'ion-fab'

runtimeが扱うコンポーネントtagのunionです。個別の対応条件はガイドを参照してください。

function enableVerticalControlArea

(options?: VerticalControlAreaOptions) => Promise<VerticalControlAreaHandle>

縦の領域の操作部品だけにruntimeを起動します。これと enableNativeUIShell() の一方だけを起動してください。同じ設定で繰り返すと共有し、稼働中に異なる設定を指定するとエラーになります。

interface VerticalControlAreaOptions

水平の部品とWebクローンには作用しません。要素単位の data-projection とfillの優先順位はVertical Barsを参照してください。実験的リリースの外観を維持するには buttonProjection: 'source' を明示します。

function setVerticalControlAreaPlacement

(placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean) => void

ion-app のマウント後、アプリが選んだ配置をCSSとWeb・ネイティブの操作部品へ適用します。論理方向は最も近い dir 属性か明示的な rtl で解決します。null を渡すと通常のレイアウトへ戻ります。

function applyFoldStateClasses

(root: HTMLElement, fold: FoldState) => void

@rdlabo/ionic-theme-ios27/vertical-bars からimportします。Foldable.getFoldState() / foldStateChange の状態を渡すと、rootに ios-theme-fold-flat、ios-theme-fold-half-opened、ios-theme-fold-closed のいずれかを設定します。半開き、またはヒンジ形状を持つflat状態では ios-theme-fold-expanded も設定し、それ以外では解除します。無関係なクラスは維持します。端末の購読やsplit paneの when の変更は行いません。FoldState は state: 'flat' | 'half-opened' | 'closed' と任意の hingeBounds: { x: number; y: number; width: number; height: number } を持つ構造です。

interface VerticalControlAreaHandle

NativeUIShellHandle に setPlacement を追加した型です。setVerticalControlAreaPlacement と同じ関数です。

type alias VerticalBarEdge

'leading' | 'trailing' | null

読む方向に対する論理的な端です。null は縦の操作領域がない状態を表します。

interface VerticalBarPlacement

module IonicNativeUIShell

同梱のCapacitorプラグインは描画用のWebView寸法を提供します。Web実装はないため、Capacitor.getPlatform() === 'ios' で呼び出しを制限してください。端末の開閉状態と操作領域の配置には、アプリ側で @erkamyaman/capacitor-foldable を使います。iPhone Duo対応を参照してください。

スナップショットや操作のbridgeメソッドは内部実装です。従来の DeviceLayout、HingeStatus、getDeviceLayout() と端末レイアウトの監視APIは削除されています。