@rdlabo/ionic-theme-ios27 2.0.0-beta.pr303.shaf4f5ca16816f → 2.0.0-beta.pr304.sha56daf151ad80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/add-native-ui.md
CHANGED
|
@@ -46,7 +46,7 @@ Run the app on a supported iOS device or simulator. Eligible fixed controls shou
|
|
|
46
46
|
|
|
47
47
|
## Optional: Vertical Bars
|
|
48
48
|
|
|
49
|
-
For a side rail, load the [Vertical Bars layout stylesheet](vertical-bars-layout.md) and configure [device placement](iphone-duo.md). The Shell includes the rail runtime; no additional startup call is needed. To
|
|
49
|
+
For a side rail, load the [Vertical Bars layout stylesheet](vertical-bars-layout.md) and configure [device placement](iphone-duo.md). The Shell includes the rail runtime; no additional startup call is needed. To automatically select rail controls, use `enableNativeUI({ controls: 'verticalOnly' })` instead of the default startup call. See [configuration options](../../capacitor-native-ui/docs/configuration.md).
|
|
50
50
|
|
|
51
51
|
## Upgrading an existing native integration
|
|
52
52
|
|
|
@@ -20,7 +20,7 @@ Read [how projection works](../../capacitor-native-ui/README.md#how-projection-w
|
|
|
20
20
|
|
|
21
21
|
The rest of this page is for **Ionic apps**. Both Ionic `ios` and `md` modes are supported. Tabs and supported toolbar actions move to the side; content and horizontal controls keep their existing appearance.
|
|
22
22
|
|
|
23
|
-
Available
|
|
23
|
+
Available as a **preview** feature. APIs and supported behavior may change.
|
|
24
24
|
|
|
25
25
|
## Try it in your existing Ionic app
|
|
26
26
|
|
|
@@ -113,7 +113,7 @@ Call this once from your application startup after `ion-app` exists in the DOM:
|
|
|
113
113
|
```ts
|
|
114
114
|
import { enableNativeUI } from '@rdlabo/capacitor-native-ui';
|
|
115
115
|
|
|
116
|
-
const rail = await enableNativeUI({
|
|
116
|
+
const rail = await enableNativeUI({ controls: 'verticalOnly' });
|
|
117
117
|
```
|
|
118
118
|
|
|
119
119
|
**What you should see:** your existing tab bar moves to the side, and fixed-toolbar buttons with an `ion-icon` or SVG using `slot="icon-only"` appear there too. Content keeps its existing theme and leaves room for the controls. The Web tab rail displays icons; pressing and dragging reveals tab labels.
|
|
@@ -124,12 +124,15 @@ When the application owner is disposed, call `await rail.destroy()` to restore t
|
|
|
124
124
|
|
|
125
125
|
### Optional: choose native button appearance
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
See [Choose button appearance](../../capacitor-native-ui/docs/vertical-bars.md#choose-button-appearance) for appearance settings and local overrides.
|
|
128
128
|
|
|
129
129
|
The default is `system`: SwiftUI styles vertical buttons and tints their icons. If your existing theme should supply their fill and colors, replace the startup call in step 4 with:
|
|
130
130
|
|
|
131
131
|
```ts
|
|
132
|
-
const rail = await enableNativeUI({
|
|
132
|
+
const rail = await enableNativeUI({
|
|
133
|
+
controls: 'verticalOnly',
|
|
134
|
+
ionic: { verticalBars: { buttonProjection: 'source', buttonDefaultFill: 'solid' } },
|
|
135
|
+
});
|
|
133
136
|
```
|
|
134
137
|
|
|
135
138
|
The `solid` default suits ordinary Ionic buttons. Buttons inside `ion-buttons` still default to clear; set `fill="solid"` explicitly to project their background. For one-off exceptions, use the [local projection settings](../../capacitor-native-ui/docs/vertical-bars.md#override-individual-buttons-or-groups). These settings affect native vertical buttons only; Web clones keep their existing appearance.
|
|
@@ -139,7 +142,7 @@ The `solid` default suits ordinary Ionic buttons. Buttons inside `ion-buttons` s
|
|
|
139
142
|
| What you see | What to check |
|
|
140
143
|
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
141
144
|
| No space at the side | Load `vertical-bars.css` and put the class on `ion-app`. |
|
|
142
|
-
| Space appears, but controls stay horizontal | Start `enableNativeUI({
|
|
145
|
+
| Space appears, but controls stay horizontal | Start `enableNativeUI({ controls: 'verticalOnly' })` after mounting the app root. Use existing tabs or `slot="icon-only"` actions in a fixed header/footer toolbar. |
|
|
143
146
|
| One action stays horizontal | Check for `slot="icon-only"` on the icon and a fixed toolbar outside scrolling content. Explicitly excluded controls and controls in centered modals stay horizontal; `fill` and `type="submit"` do not prevent movement. See [control requirements](../../capacitor-native-ui/docs/vertical-bars.md#toolbar-actions). |
|
|
144
147
|
|
|
145
148
|
## Connect an iPhone Duo
|
package/docs/iphone-duo.md
CHANGED
|
@@ -8,12 +8,12 @@ Adapt your Ionic app to iPhone Duo: place navigation and actions in its vertical
|
|
|
8
8
|
|
|
9
9
|
**New here?** Start with [iPhone Duo with your existing theme](iphone-duo-with-original-theme.md) to preview the side layout in Chrome. This page explains device events, placement and split panes. [Vertical Bars](../../capacitor-native-ui/docs/vertical-bars.md) documents control projection and the runtime API.
|
|
10
10
|
|
|
11
|
-
Available
|
|
11
|
+
Available as a **preview** feature alongside [Native UI](../../capacitor-native-ui/docs/native-ui.md). APIs and supported behavior may change before stable status. Stable status is planned after the official release of Xcode 27.1. The real system rail and hinge reporting require iOS 27.1 or later and an app built with Xcode 27.1 or newer.
|
|
12
12
|
|
|
13
13
|
Use the theme layout and native plugin independently for that hardware. Neither requires the full iOS 27 appearance:
|
|
14
14
|
|
|
15
15
|
- Theme: `dist/css/vertical-bars.css` — opt-in classes that reserve the rail's safe area, plus a registered custom property for a posture-driven split-pane width.
|
|
16
|
-
- Native UI: `enableNativeUI({
|
|
16
|
+
- Native UI: `enableNativeUI({ controls: 'verticalOnly' })` — selects eligible tabs and toolbar controls placed in the reserved area. On Capacitor iOS they are rendered by a native SwiftUI `TabView` and toolbar; everywhere else the same controls appear as Web clones.
|
|
17
17
|
|
|
18
18
|
Device state belongs to [`@erkamyaman/capacitor-foldable`](https://github.com/erkamyaman/capacitor-foldable). The **application** subscribes to its events and chooses its layout. The theme reserves space and adapts the split pane; Native UI projects eligible controls. The theme does not monitor hinge state or bar placement.
|
|
19
19
|
|
|
@@ -21,12 +21,12 @@ Device state belongs to [`@erkamyaman/capacitor-foldable`](https://github.com/er
|
|
|
21
21
|
|
|
22
22
|
To keep your existing theme and add only the standalone support, follow [iPhone Duo with your existing theme](iphone-duo-with-original-theme.md). This page covers the shared device-layout rules.
|
|
23
23
|
|
|
24
|
-
| Goal | Stylesheet | Runtime
|
|
25
|
-
| ------------------------------------------ | ------------------- |
|
|
26
|
-
| Hinge posture only (layout switches) | none | none — subscribe to `Foldable` directly
|
|
27
|
-
| Posture-driven split-pane width | `vertical-bars.css` | none — subscribe to `Foldable` directly
|
|
28
|
-
| Vertical rail for tabs and toolbar actions | `vertical-bars.css` | `enableNativeUI({
|
|
29
|
-
| Native shell plus the rail | `vertical-bars.css` | `enableNativeUI()` — includes rail projection
|
|
24
|
+
| Goal | Stylesheet | Runtime |
|
|
25
|
+
| ------------------------------------------ | ------------------- | ---------------------------------------------- |
|
|
26
|
+
| Hinge posture only (layout switches) | none | none — subscribe to `Foldable` directly |
|
|
27
|
+
| Posture-driven split-pane width | `vertical-bars.css` | none — subscribe to `Foldable` directly |
|
|
28
|
+
| Vertical rail for tabs and toolbar actions | `vertical-bars.css` | `enableNativeUI({ controls: 'verticalOnly' })` |
|
|
29
|
+
| Native shell plus the rail | `vertical-bars.css` | `enableNativeUI()` — includes rail projection |
|
|
30
30
|
|
|
31
31
|
```scss
|
|
32
32
|
@use '@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css';
|
|
@@ -87,7 +87,7 @@ import { Foldable } from '@erkamyaman/capacitor-foldable';
|
|
|
87
87
|
import { setVerticalBarsLayout } from '@rdlabo/ionic-theme-ios27';
|
|
88
88
|
import { enableNativeUI } from '@rdlabo/capacitor-native-ui';
|
|
89
89
|
|
|
90
|
-
const rail = await enableNativeUI({
|
|
90
|
+
const rail = await enableNativeUI({ controls: 'verticalOnly' });
|
|
91
91
|
const listener = await Foldable.addListener('barPlacementChange', ({ verticalBarEdge, inset }) =>
|
|
92
92
|
setVerticalBarsLayout({ edge: verticalBarEdge, inset }),
|
|
93
93
|
);
|
|
@@ -104,7 +104,7 @@ await rail.destroy();
|
|
|
104
104
|
|
|
105
105
|
Native UI detects native availability independently through its own device metrics. The theme helper controls Web layout only. The measured `inset` is passed through instead of assuming a fixed width. Devices without a reported rail, including Web and Android, return a null edge and retain the ordinary layout. For browser simulation, use the [class-based preview](vertical-bars-layout.md#reserve-the-vertical-rail) without connecting device placement.
|
|
106
106
|
|
|
107
|
-
Start either `enableNativeUI({
|
|
107
|
+
Start either `enableNativeUI({ controls: 'verticalOnly' })` or the full `enableNativeUI()` — not both. If the app already uses Native UI, keep that runtime and use the same `setVerticalBarsLayout` callback. The application owner removes its listeners and destroys its runtime on teardown.
|
|
108
108
|
|
|
109
109
|
On supported iOS versions the runtime hands eligible tabs, back navigation, menu buttons, and fixed-toolbar actions to a native SwiftUI `TabView` and toolbar; on Web, Android, or when native projection is unavailable, Web clones remain the fallback. See [Toolbar actions](../../capacitor-native-ui/docs/vertical-bars.md#toolbar-actions) for control eligibility.
|
|
110
110
|
|
package/docs/special-markup.md
CHANGED
|
@@ -49,7 +49,7 @@ These classes do not reposition a separate `ion-fab`; leave room for it when cho
|
|
|
49
49
|
|
|
50
50
|
## Support iPhone Duo (preview)
|
|
51
51
|
|
|
52
|
-
iPhone Duo support, including standalone vertical bars, is available as a **preview**
|
|
52
|
+
iPhone Duo support, including standalone vertical bars, is available as a **preview** alongside Native UI. Its APIs and supported behavior may change.
|
|
53
53
|
|
|
54
54
|
iPhone Duo support — the vertical system rail, hinge posture, and the posture-driven split-pane layout — is independent of the iOS 27 theme and the full Native UI. See [iPhone Duo support](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/theme-ios27/docs/iphone-duo.md) for the complete setup, including device-layout monitoring without a projection runtime.
|
|
55
55
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rdlabo/ionic-theme-ios27",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.pr304.sha56daf151ad80",
|
|
5
5
|
"description": "iOS27 Theme for Ionic Framework",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
},
|
|
47
47
|
"homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@rdlabo/capacitor-native-ui": "2.0.0-beta.
|
|
49
|
+
"@rdlabo/capacitor-native-ui": "2.0.0-beta.pr304.sha56daf151ad80",
|
|
50
50
|
"@rdlabo/ionic-theme-utils": "0.1.4",
|
|
51
51
|
"@stencil/core": "^4.43.5",
|
|
52
52
|
"ionicons": "^8.1.0"
|