@rdlabo/ionic-theme-ios27 2.0.0-beta.pr310.shab88b79526a19 → 2.0.0-beta.pr311.shabaad214622ea
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.
|
@@ -108,7 +108,7 @@ Only one of the first three classes is retained. The helper does not subscribe t
|
|
|
108
108
|
|
|
109
109
|
## Adapt the split pane
|
|
110
110
|
|
|
111
|
-
For a side-by-side menu on iPhone Duo, opt the `ion-split-pane` into the
|
|
111
|
+
For a side-by-side menu on iPhone Duo, opt the `ion-split-pane` into the theme's posture-based layout. This stylesheet defaults to `320px` when fully unfolded and `50vw` when half-opened. These are theme defaults, not a guarantee of the widths chosen by the system Settings app. The application supplies the posture; both states can have the same viewport width, so a width media query cannot distinguish them:
|
|
112
112
|
|
|
113
113
|
```html
|
|
114
114
|
<ion-split-pane class="split-pane-fold-layout" contentId="main-content" when="(min-width: 900px)">
|
|
@@ -117,7 +117,7 @@ For a side-by-side menu on iPhone Duo, opt the `ion-split-pane` into the separat
|
|
|
117
117
|
</ion-split-pane>
|
|
118
118
|
```
|
|
119
119
|
|
|
120
|
-
|
|
120
|
+
Connect the split-pane width to the theme variable in the application's stylesheet, and let the half-open class change only the width value:
|
|
121
121
|
|
|
122
122
|
```css
|
|
123
123
|
ion-split-pane.split-pane-fold-layout {
|
|
@@ -130,6 +130,8 @@ ion-split-pane.split-pane-fold-layout {
|
|
|
130
130
|
|
|
131
131
|
The registered `--ios-theme-split-pane-width` defaults to `320px`. `applyFoldStateClasses` sets `ios-theme-fold-half-opened` on `ion-app`; the stylesheet then sets only descendant split panes with `split-pane-fold-layout` to `50vw`. Add this opt-in class once; no state-dependent class binding is needed. Other split panes retain their existing width.
|
|
132
132
|
|
|
133
|
+
`ios-theme-fold-expanded` describes use of the inner display; it does not select the sidebar width. A fully unfolded display keeps the ordinary width. Only `ios-theme-fold-half-opened` selects `50vw` for opted-in split panes.
|
|
134
|
+
|
|
133
135
|
Ionic's `when` still controls whether the menu is persistent. The example chooses a fixed 900px breakpoint. If your app needs different breakpoints for folded and ordinary displays, use the `ios-theme-fold-expanded` class applied by the helper to select that policy in your application's layout code. The helper only updates state classes, not `when`. This layout does not enable Vertical Bars or move an overlay menu.
|
|
134
136
|
|
|
135
137
|
## Migration
|
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.pr311.shabaad214622ea",
|
|
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.pr311.shabaad214622ea",
|
|
50
50
|
"@rdlabo/ionic-theme-utils": "0.1.5",
|
|
51
51
|
"@stencil/core": "^4.43.5",
|
|
52
52
|
"ionicons": "^8.1.0"
|