Skip to content

ios27-v1.2.0

Latest
Latest

Choose a tag to compare

View all tags
@rdlabo rdlabo released this 30 Sep 02:37
· 4 commits to main since this release
ios27-v1.2.0
d00a27d

New features

iPhone Duo support — with your existing Ionic theme

Bring Ionic navigation and actions into iPhone Duo's vertical system rail without replacing your app's theme. The standalone vertical-bars.css stylesheet and enableVerticalControlArea() runtime work independently of the full Native UI Shell, including with Ionic MD mode and custom themes.

  • Eligible tabs, back buttons, menu buttons and icon-only toolbar actions move into Vertical Bars. Supported iOS layouts use native SwiftUI controls; Web clones provide the fallback.
  • Safe-area handling supports either rail edge, RTL, split panes and full-width modal surfaces.
  • applyFoldStateClasses() applies application-provided fold state to ion-app. Opt-in split panes can adapt their width to the device's posture.
  • Device events come from @erkamyaman/capacitor-foldable; your application owns subscriptions and placement.

Start with iPhone Duo with your existing theme, then see iPhone Duo support and the Vertical Bars reference.

Native UI Shell and Vertical Bars enter Preview

Native UI Shell and iPhone Duo / Vertical Bars support move from experimental to Preview in 1.2.0. Ionic markup remains the source of actions, routing, labels and state while supported controls render natively. Preview APIs and supported behavior may still change; stable status is planned after the official Xcode 27.1 release.

The real iPhone Duo system rail and hinge APIs require iOS 27.1 and Xcode 27.1 or newer. Browser previews can be used to check the layout before native deployment.

Choose native button appearance

  • buttonProjection: 'system' | 'source' selects SwiftUI appearance or supported Ionic fill and colors for native vertical buttons. The default is system.
  • Use data-projection="source" / "system" for individual buttons or ion-buttons groups. Equivalent ios-theme-projection-source / ios-theme-projection-system classes remain supported.
  • buttonDefaultFill: 'solid' | null controls omitted fill for source-projected buttons outside ion-buttons. Use solid for Ionic's default design; omission or null retains this theme's glass default. Buttons inside ion-buttons correctly default to clear.
  • data-shell="disabled" keeps a control or subtree on the Web without changing its Web theme. ios-theme-shell-disabled remains supported.

See button appearance and fill rules.

Keep your navigation animations

withNativeUIShellTransition() coordinates native controls with Ionic's default or your custom navigation animation, including interactive back navigation. The package's own iosTransitionAnimation already includes this integration and needs no extra wrapper. See the transition migration guide.

Breaking changes and migration

For users of the 1.2.0 experimental releases

  • Device-state APIs were removed from the theme. Replace DeviceLayout, HingeStatus, getDeviceLayout(), deviceLayoutChange and start/stop device-layout monitoring with the Foldable plugin's getFoldState() / foldStateChange and getBarPlacement() / barPlacementChange. Pass placement into setVerticalControlAreaPlacement(). See the device-layout migration.
  • Native vertical buttons now default to system appearance. Set buttonProjection: 'source' to retain source-based fill and color projection. Explicit fill takes precedence; omitted or default fill inside ion-buttons resolves to clear.

Packaging and integration

  • The package now explicitly declares ESM ("type": "module") and emits resolvable ESM imports. Use the documented package entry points through ESM imports; CommonJS require() compatibility is not provided.
  • The standalone /vertical-bars entry requires @capacitor/core, including in browser builds. CSS-only use does not require the runtime.
  • Keep one runtime: use either enableVerticalControlArea() or enableNativeUIShell(). The full shell already includes Vertical Bars.

Fixes and improvements

  • Searchable FABs move into the Web vertical rail as soon as Vertical Bars is enabled, above visible tabs or at the bottom when tabs are hidden. Native vertical search uses SwiftUI's searchable presentation.
  • Web searchable tabs now follow the native editing and dismissal flow, retain the query when closed, and align correctly with the tab bar beside a desktop split-pane menu.
  • Improved vertical tab selection and drag animations, back-button projection, and navigation cancellation handling.
  • Corrected top safe-area reservation and full-width modal control placement in vertical layouts.
  • Native controls refresh after foreground and viewport changes.
  • Fixed package ESM resolution during compilation.

Upgrade

npm install @rdlabo/ionic-theme-ios27@1.2.0
npx cap sync

Run cap sync for Capacitor projects using native projection. Install @erkamyaman/capacitor-foldable separately if your app needs device-driven fold and rail placement events.

Full changelog: ios27-v1.1.0...ios27-v1.2.0

Assets 2
Loading