@rdlabo/ionic-theme-ios27 2.0.0-beta.pr303.shaf4f5ca16816f → 2.0.0-beta.pr305.shad485697732f3
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/adaptive-themes.md +11 -1
- package/docs/add-native-ui.md +1 -1
- package/docs/animation.md +18 -2
- package/docs/eslint.md +2 -0
- package/docs/features.md +6 -2
- package/docs/iphone-duo-with-original-theme.md +8 -5
- package/docs/iphone-duo.md +44 -14
- package/docs/migration.md +6 -3
- package/docs/setup.md +11 -1
- package/docs/special-markup.md +37 -6
- package/docs/vertical-bars-layout.md +24 -4
- package/package.json +2 -2
package/docs/adaptive-themes.md
CHANGED
|
@@ -42,7 +42,17 @@ If compilation reports `Can't find stylesheet to import.` for a `meta.load-css()
|
|
|
42
42
|
|
|
43
43
|
Alternatively, use a relative path from the Sass file containing `meta.load-css()` to the installed package, such as `../node_modules/@rdlabo/ionic-theme-ios27/src/styles/default-variables` from `src/styles.scss`. Adjust the `../` prefix for your file's location, and apply the same change to each theme import.
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
### Which styles are selected?
|
|
46
|
+
|
|
47
|
+
The checks select browser capabilities, not iOS versions:
|
|
48
|
+
|
|
49
|
+
| Browser capability in Ionic `ios` mode | Result |
|
|
50
|
+
| ---------------------------------------------------- | ------------------------------- |
|
|
51
|
+
| `overflow-anchor: auto` | iOS 27 theme. |
|
|
52
|
+
| `text-wrap: pretty`, without `overflow-anchor: auto` | iOS 26 theme. |
|
|
53
|
+
| Neither feature | Ionic's default iOS appearance. |
|
|
54
|
+
|
|
55
|
+
The example uses class-based dark mode: also load [Ionic's matching dark palette](https://ionicframework.com/docs/theming/dark-mode). For system or always-dark mode, replace both `-dark-class` imports with the matching variant; see the [dark-mode pairs](setup.md#choose-one-dark-mode-pair). The `md-remove-ios-class-effect` styles prevent iOS-specific classes from affecting Material Design mode.
|
|
46
56
|
|
|
47
57
|
## 3. Configure animations
|
|
48
58
|
|
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
|
|
package/docs/animation.md
CHANGED
|
@@ -61,9 +61,25 @@ const effect = supportSeachbarCancelButtonIcon(searchbar);
|
|
|
61
61
|
// effect.destroy();
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
### Registration and exclusions
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
Register after the Ionic element has initialized (for example, Angular's `ngAfterViewInit`).
|
|
67
|
+
|
|
68
|
+
| Condition | Behavior |
|
|
69
|
+
| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
70
|
+
| Supported iOS-mode searchbar | Preserves Ionic's button and event handlers; `destroy()` restores text content. |
|
|
71
|
+
| MD mode, `searchbar-classic`, `ios-theme-disabled` or `ios26-disabled` | Helper does not apply. |
|
|
72
|
+
| `animated` / `prefers-reduced-motion` | Respected by the CSS animation. |
|
|
73
|
+
| CSS customization | `--background`, `--box-shadow`, `--border-radius` and `--cancel-button-color` remain available. |
|
|
74
|
+
|
|
75
|
+
### Clear and cancel buttons
|
|
76
|
+
|
|
77
|
+
| Button | Ionic appearance settings | Action |
|
|
78
|
+
| ------ | ------------------------------------------------------ | ----------------------------------- |
|
|
79
|
+
| Clear | `clearIcon`, `showClearButton`, `--clear-button-color` | Clears while retaining input focus. |
|
|
80
|
+
| Cancel | `cancelButtonIcon`, `--cancel-button-color` | Ends the search. |
|
|
81
|
+
|
|
82
|
+
Both can appear together beside the input. Set `clearIcon` and `cancelButtonIcon` to the same icon for matching appearance.
|
|
67
83
|
|
|
68
84
|
Both external glass buttons use a 44px resting size and expand while pressed. Reduced motion disables scaling. The clear button appears outside the text field; Ionic supplies the icons.
|
|
69
85
|
|
package/docs/eslint.md
CHANGED
package/docs/features.md
CHANGED
|
@@ -11,9 +11,13 @@ Customize the theme with CSS variables and Sass mixins, or adopt it one componen
|
|
|
11
11
|
To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
|
|
12
12
|
[Default variables](../src/styles/default-variables.scss)
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
| Variable | Default | Purpose |
|
|
15
|
+
| ------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------- |
|
|
16
|
+
| `--ios-theme-menu-background-rgb` | Light: `225, 230, 240`; dark: `26, 31, 34` | Menu surface RGB channels; set on `ion-menu`. |
|
|
17
|
+
| `--ios-theme-menu-background-opacity` | `0.96` | Menu surface opacity; set on `ion-menu`. |
|
|
18
|
+
| `--ios-theme-button-press-duration` | `380ms` | Duration of the button's `:active` scaling with slight overshoot. |
|
|
15
19
|
|
|
16
|
-
|
|
20
|
+
Use `--ios-theme-button-press-duration` instead of the shared activated-transition duration variables to customize button press scaling.
|
|
17
21
|
|
|
18
22
|
## Liquid Glass mixin
|
|
19
23
|
|
|
@@ -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
|
-
|
|
23
|
+
iPhone Duo support and Vertical Bars are stable starting with version 2.0.0.
|
|
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
|
@@ -1,32 +1,40 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: iPhone Duo support
|
|
2
|
+
title: iPhone Duo support
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# iPhone Duo support
|
|
5
|
+
# iPhone Duo support
|
|
6
6
|
|
|
7
7
|
Adapt your Ionic app to iPhone Duo: place navigation and actions in its vertical system rail, and adjust your split pane as the device opens and closes. Existing Ionic markup remains the source of labels, icons, routing, and click handlers.
|
|
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
|
-
|
|
11
|
+
iPhone Duo support is stable starting with version 2.0.0. 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
|
|
|
20
|
+
| Owner | Responsibility |
|
|
21
|
+
| ------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
22
|
+
| Foldable | Report bar placement and hinge posture, initially and when they change. |
|
|
23
|
+
| Application / theme | Subscribe to device events and apply Web layout through `setVerticalBarsLayout` or `applyFoldStateClasses`. |
|
|
24
|
+
| Native UI | Project eligible controls and determine native rail availability independently. |
|
|
25
|
+
|
|
26
|
+
For the native package's integration, including application-owned CSS and plain HTML, see [Use with Capacitor Foldable](../../capacitor-native-ui/docs/vertical-bars.md#use-with-capacitor-foldable).
|
|
27
|
+
|
|
20
28
|
## Choose what to adopt
|
|
21
29
|
|
|
22
30
|
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
31
|
|
|
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
|
|
32
|
+
| Goal | Stylesheet | Runtime |
|
|
33
|
+
| ------------------------------------------ | ------------------- | ---------------------------------------------- |
|
|
34
|
+
| Hinge posture only (layout switches) | none | none — subscribe to `Foldable` directly |
|
|
35
|
+
| Posture-driven split-pane width | `vertical-bars.css` | none — subscribe to `Foldable` directly |
|
|
36
|
+
| Vertical rail for tabs and toolbar actions | `vertical-bars.css` | `enableNativeUI({ controls: 'verticalOnly' })` |
|
|
37
|
+
| Native shell plus the rail | `vertical-bars.css` | `enableNativeUI()` — includes rail projection |
|
|
30
38
|
|
|
31
39
|
```scss
|
|
32
40
|
@use '@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css';
|
|
@@ -66,9 +74,31 @@ await listener.remove();
|
|
|
66
74
|
|
|
67
75
|
Subscribe to changes, then read the current state. The same helper handles initial values and events.
|
|
68
76
|
|
|
69
|
-
|
|
77
|
+
### Posture classes
|
|
78
|
+
|
|
79
|
+
`applyFoldStateClasses` updates the supplied root while preserving unrelated classes:
|
|
80
|
+
|
|
81
|
+
| Class | Applied when |
|
|
82
|
+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
83
|
+
| `ios-theme-fold-flat` | Flat posture. |
|
|
84
|
+
| `ios-theme-fold-half-opened` | Half-opened posture. |
|
|
85
|
+
| `ios-theme-fold-closed` | Closed posture. |
|
|
86
|
+
| `ios-theme-fold-expanded` | Half-opened, or flat with hinge geometry. Cleared for flat without geometry (including Web fallback) and closed posture. |
|
|
87
|
+
|
|
88
|
+
Only one of the first three classes is retained. The helper does not subscribe to the plugin or change Ionic's split-pane `when` property.
|
|
89
|
+
|
|
90
|
+
### Placement values
|
|
91
|
+
|
|
92
|
+
For rail placement, import `setVerticalBarsLayout` from the theme and pass the reported logical `edge` with the measured `inset`:
|
|
93
|
+
|
|
94
|
+
| Value | Web layout effect |
|
|
95
|
+
| ------------------ | ---------------------------------------------------- |
|
|
96
|
+
| `edge: 'leading'` | Physical left in LTR; physical right in RTL. |
|
|
97
|
+
| `edge: 'trailing'` | Physical right in LTR; physical left in RTL. |
|
|
98
|
+
| `edge: null` | Restores ordinary layout. |
|
|
99
|
+
| Measured `inset` | Reserves that width; zero clears the explicit width. |
|
|
70
100
|
|
|
71
|
-
|
|
101
|
+
The helper does not report native availability or activate projection. No start/stop monitoring calls are needed. See [Project controls into the rail](#project-controls-into-the-rail) for the subscription.
|
|
72
102
|
|
|
73
103
|
WebView corner radius remains a rendering concern: `configureNativeTransition()` uses the shell's `getWebViewMetrics()` API, independently of `Foldable`.
|
|
74
104
|
|
|
@@ -87,7 +117,7 @@ import { Foldable } from '@erkamyaman/capacitor-foldable';
|
|
|
87
117
|
import { setVerticalBarsLayout } from '@rdlabo/ionic-theme-ios27';
|
|
88
118
|
import { enableNativeUI } from '@rdlabo/capacitor-native-ui';
|
|
89
119
|
|
|
90
|
-
const rail = await enableNativeUI({
|
|
120
|
+
const rail = await enableNativeUI({ controls: 'verticalOnly' });
|
|
91
121
|
const listener = await Foldable.addListener('barPlacementChange', ({ verticalBarEdge, inset }) =>
|
|
92
122
|
setVerticalBarsLayout({ edge: verticalBarEdge, inset }),
|
|
93
123
|
);
|
|
@@ -104,7 +134,7 @@ await rail.destroy();
|
|
|
104
134
|
|
|
105
135
|
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
136
|
|
|
107
|
-
Start either `enableNativeUI({
|
|
137
|
+
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
138
|
|
|
109
139
|
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
140
|
|
package/docs/migration.md
CHANGED
|
@@ -13,7 +13,7 @@ Theme styles and ordinary theme API imports remain supported. If you previously
|
|
|
13
13
|
| `@rdlabo/ionic-theme-ios27/native` | `@rdlabo/capacitor-native-ui` |
|
|
14
14
|
| `@rdlabo/ionic-theme-ios27/vertical-bars` | `@rdlabo/capacitor-native-ui/vertical-bars` |
|
|
15
15
|
|
|
16
|
-
Add the native package as a direct application dependency, update imports, rebuild Web assets, and run `npx cap sync ios`. Follow the [Native UI migration guide](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/capacitor-native-ui/docs/migration.md) for
|
|
16
|
+
Add the native package as a direct application dependency, update imports, rebuild Web assets, and run `npx cap sync ios`. Follow the [Native UI migration guide](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/capacitor-native-ui/docs/migration.md) for 1.2.1 startup settings and native project changes. Theme-only apps do not need native startup or plugin setup.
|
|
17
17
|
|
|
18
18
|
## From the iOS 26 theme
|
|
19
19
|
|
|
@@ -121,9 +121,12 @@ Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-t
|
|
|
121
121
|
|
|
122
122
|
For the iOS 27 branch or an iOS 27-only app, use `@rdlabo/ionic-theme-ios27`. Its stylesheets are `ionic-theme-ios27.scss` or `ionic-theme-ios27.css`, including the `-dark-always`, `-dark-system`, and `-dark-class` variants. Keep the iOS 26 stylesheet names in the iOS 26 branch of an adaptive setup.
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
| Customization | Current name | Legacy behavior |
|
|
125
|
+
| ------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
126
|
+
| CSS variables | `--ios-theme-*`, for example `--ios-theme-content-box-shadow-rgb` | Corresponding `--ios26-*` names remain deprecated fallbacks. Current names win when both are set. |
|
|
127
|
+
| Theme opt-out class | `ios-theme-disabled` | `ios26-disabled` remains a deprecated alias; migrate existing markup when convenient. |
|
|
125
128
|
|
|
126
|
-
|
|
129
|
+
Use the version-independent names for new customizations.
|
|
127
130
|
|
|
128
131
|
See [Special markup and classes](special-markup.md) and [Default variables](../src/styles/default-variables.scss) for the current names.
|
|
129
132
|
|
package/docs/setup.md
CHANGED
|
@@ -24,7 +24,17 @@ Add these imports to your global stylesheet after Ionic's base styles. Replace a
|
|
|
24
24
|
@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
### Choose one dark-mode pair
|
|
28
|
+
|
|
29
|
+
Use one matching Ionic palette and theme variant. Paths below are relative to `@ionic/core/css/palettes/` and `@rdlabo/ionic-theme-ios27/dist/css/` respectively.
|
|
30
|
+
|
|
31
|
+
| Mode | Ionic palette | Theme stylesheet | Activation |
|
|
32
|
+
| ---------------------- | ----------------- | ----------------------------------- | ----------------------------------------------- |
|
|
33
|
+
| System (example above) | `dark.system.css` | `ionic-theme-ios27-dark-system.css` | System appearance. |
|
|
34
|
+
| Manual | `dark.class.css` | `ionic-theme-ios27-dark-class.css` | Toggle `ion-palette-dark` on the document root. |
|
|
35
|
+
| Always dark | `dark.always.css` | `ionic-theme-ios27-dark-always.css` | Always active. |
|
|
36
|
+
|
|
37
|
+
If you also enable Native UI, these styles provide its light/dark appearance marker. Keep the Ionic palette and theme variant paired so Web and native controls agree. See [native appearance inheritance](../../capacitor-native-ui/docs/appearance.md) for the resolution order and shared rail behavior.
|
|
28
38
|
|
|
29
39
|
## 3. Configure Ionic animations
|
|
30
40
|
|
package/docs/special-markup.md
CHANGED
|
@@ -28,15 +28,38 @@ buttons: [
|
|
|
28
28
|
];
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Choose the role by action semantics:
|
|
32
|
+
|
|
33
|
+
| Role | Appearance and behavior |
|
|
34
|
+
| -------------------- | ------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| `preferred` | Filled primary action; dismissal reports `preferred`. Does not automatically select or invoke it. |
|
|
36
|
+
| No role or `default` | Normal text color. |
|
|
37
|
+
| `cancel` | Retains Ionic's cancellation behavior. |
|
|
38
|
+
| `selected` | Retains selection state. |
|
|
39
|
+
| `destructive` | Uses `--ios-theme-destructive-color`. |
|
|
40
|
+
| `confirm` | Not treated as preferred. Use `preferred` for a recommended action, not simply any confirmation. |
|
|
32
41
|
|
|
33
42
|
## Floating iPad sheets
|
|
34
43
|
|
|
35
|
-
|
|
44
|
+
Choose the sheet's scrolling behavior with `expandToScroll`:
|
|
45
|
+
|
|
46
|
+
| Setting | iPad appearance | Scrolling and resizing |
|
|
47
|
+
| ---------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| `false` | Floating lower corners and a 20px bottom gap. | Content scrolls within the current breakpoint; dragging the handle resizes the sheet. Ionic sizes the visible page at each breakpoint so CSS can style it. |
|
|
49
|
+
| `true` (default) | Ionic's bottom-attached layout. | Scroll-to-expand behavior. |
|
|
36
50
|
|
|
37
51
|
## Tab bar position
|
|
38
52
|
|
|
39
|
-
|
|
53
|
+
Choose a class on an iOS `ion-tab-bar` to position the whole bar within its safe area:
|
|
54
|
+
|
|
55
|
+
| Class | Placement |
|
|
56
|
+
| ------------------------- | ------------------------------- |
|
|
57
|
+
| `tab-bar-position-start` | Start of the reading direction. |
|
|
58
|
+
| `tab-bar-position-center` | Center. |
|
|
59
|
+
| `tab-bar-position-end` | End of the reading direction. |
|
|
60
|
+
| None | Existing placement unchanged. |
|
|
61
|
+
|
|
62
|
+
All three classes support `slot="top"` and `slot="bottom"`, preserve width and press animation, and resolve start/end in RTL.
|
|
40
63
|
|
|
41
64
|
```html
|
|
42
65
|
<ion-tab-bar slot="bottom" class="tab-bar-position-center">
|
|
@@ -47,9 +70,9 @@ Add one of `tab-bar-position-start`, `tab-bar-position-center`, or `tab-bar-posi
|
|
|
47
70
|
|
|
48
71
|
These classes do not reposition a separate `ion-fab`; leave room for it when choosing the bar's position.
|
|
49
72
|
|
|
50
|
-
## Support iPhone Duo
|
|
73
|
+
## Support iPhone Duo
|
|
51
74
|
|
|
52
|
-
iPhone Duo support, including standalone
|
|
75
|
+
iPhone Duo support, including standalone Vertical Bars, is stable starting with version 2.0.0.
|
|
53
76
|
|
|
54
77
|
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
78
|
|
|
@@ -115,7 +138,15 @@ For colored segments, use Ionic's `color` property (for example, `color="primary
|
|
|
115
138
|
|
|
116
139
|
Add `.segment-expand` when segment buttons should divide the available width evenly. The class also changes the Liquid Glass effect sizing when `registerSegmentEffect` is used.
|
|
117
140
|
|
|
118
|
-
|
|
141
|
+
### Segment size and press behavior
|
|
142
|
+
|
|
143
|
+
| Placement | Minimum height | Container behavior |
|
|
144
|
+
| ----------------------------------------- | -------------- | ---------------------------------------------------------------- |
|
|
145
|
+
| In content | 32px | Compact, flat background and indicator; outer bounds stay fixed. |
|
|
146
|
+
| Inside `ion-toolbar` | 48px | Glass container; outer container scales while pressed. |
|
|
147
|
+
| `.segment-expand`, including in a toolbar | 32px | Compact, flat background and indicator; outer bounds stay fixed. |
|
|
148
|
+
|
|
149
|
+
The optional moving glass lens is independent of the container's background.
|
|
119
150
|
|
|
120
151
|
```html preview
|
|
121
152
|
<ion-segment class="segment-expand" value="new">
|
|
@@ -22,11 +22,31 @@ Add `.ios-theme-vertical-bars` to `ion-app` to reserve the rail region on the ph
|
|
|
22
22
|
|
|
23
23
|
The classes are physical — `-left` always means the physical left edge — because CSS and the native renderer work in physical coordinates. `setVerticalBarsLayout` applies the logical `verticalBarEdge` reported by the device plugin and resolves it through the document's direction, so an RTL app does not need its own conversion.
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
### Rail width
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
| Source | Reserved width |
|
|
28
|
+
| ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
29
|
+
| Classes alone, including Chrome previews | `80px`; no native plugin required. |
|
|
30
|
+
| `setVerticalBarsLayout({ edge, inset })` | The supplied inset, even below `80px`. |
|
|
31
|
+
| Custom CSS preview | Override `--ios-theme-vertical-bars-safe-area-left` or `--ios-theme-vertical-bars-safe-area-right`. |
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
### Content and overlay layout
|
|
34
|
+
|
|
35
|
+
| Surface | Layout with the rail stylesheet |
|
|
36
|
+
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| Routers and component backgrounds | Remain full-viewport. |
|
|
38
|
+
| `ion-content` | Insets its scroll foreground. |
|
|
39
|
+
| `ion-toolbar` | Insets its container foreground. |
|
|
40
|
+
| `ion-fab` | Adjusts only when placed beside the system UI. |
|
|
41
|
+
| Full-width `ion-modal`, including sheets | Applies the foreground inset. With the runtime enabled, the topmost modal projects eligible toolbar controls into its own rail; sheet rails follow visible bounds as the breakpoint changes. |
|
|
42
|
+
| Centered modal | Keeps toolbar buttons and receives no page-rail inset. |
|
|
43
|
+
| `ion-menu` / `ion-popover` | Internal foreground components retain Ionic's standard safe-area handling, without the main-page conversion. |
|
|
44
|
+
| Menu beside the system UI | Keeps its full-viewport animation host; offsets only the visible container by the inset. |
|
|
45
|
+
| Menu on the opposite side | Unchanged. |
|
|
46
|
+
|
|
47
|
+
The corresponding Ionic safe-area variable is reset inside inset foreground components so descendants do not add the inset again.
|
|
48
|
+
|
|
49
|
+
Modal eligibility follows the visible dialog width, not hinge posture or modal type. Left and right remain physical coordinates in RTL; Ionic's `side="start"` and `side="end"` remain logical.
|
|
30
50
|
|
|
31
51
|
The mode is component-mode independent: an app can keep Ionic `mode: 'md'` on iOS and still enable Vertical Bars. No component needs `mode="ios"`.
|
|
32
52
|
|
|
@@ -40,7 +60,7 @@ setVerticalBarsLayout({ edge: 'trailing', inset: 80 });
|
|
|
40
60
|
setVerticalBarsLayout({ edge: null }); // restore ordinary Web layout
|
|
41
61
|
```
|
|
42
62
|
|
|
43
|
-
The helper operates on Web CSS only and
|
|
63
|
+
The helper operates on Web CSS only and works without Capacitor or Native UI startup. The application supplies device state and owns subscriptions. Starting, disabling or destroying Native UI does not change these layout classes or the reserved inset. Unsupported native rails retain the chosen Web rail; choose `edge: null` explicitly if the application wants a horizontal layout instead.
|
|
44
64
|
|
|
45
65
|
## Migration
|
|
46
66
|
|
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.pr305.shad485697732f3",
|
|
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.pr305.shad485697732f3",
|
|
50
50
|
"@rdlabo/ionic-theme-utils": "0.1.4",
|
|
51
51
|
"@stencil/core": "^4.43.5",
|
|
52
52
|
"ionicons": "^8.1.0"
|