feat(tabs): add foldable vertical tab bar by rdlabo · Pull Request #208 · rdlabo-dev/ionic-theme-ios27

rdlabo · 2026-09-21T07:37:02Z

Summary

make .ios-theme-enable-foldable the single opt-in for the Duo tab-bar layout
place the vertical tab bar at the bottom of the physical right-side reserved region
match the invariant geometry measured from default iOS 27.1 SwiftUI two-tab and four-tab TabView configurations: 50pt outer width, 2pt inner inset, and approximately 52pt per item
keep the stable four-tab rail icon-only and reveal every icon-and-label tab while the user presses and drags across the rail
ignore slot and writing direction for the physical rail position
keep foldable tabs in the Web layer and preserve the rail beside an Ionic split pane
document that sidebar navigation remains the responsibility of ion-menu / ion-split-pane

Stack

feat: support iPhone Duo with vertical bars #213 — demo foldable toggle
feat(layout): support foldable safe-area layout #209 — foldable safe-area layout
feat(tabs): add foldable vertical tab bar #208 — foldable vertical tab bar
feat: project foldable toolbar navigation and actions #212 — foldable toolbar projection

Base: feat/physical-safe-area

Verification

minimal SwiftUI two-tab reference with default SF Symbols built and captured on the iPhone Duo iOS 27.1 Simulator
four-tab reference captured separately to verify that the same per-item metrics scale to a 212pt rail
CSS and TypeScript builds
adaptive tab-bar behavior tests
image regression for the real pointer-active drag state
foldable compact and visible split-pane screenshots in LTR and RTL

devin-ai-integration

Devin Review found 3 potential issues.

devin-ai-integration · 2026-09-21T07:40:02Z

メニュー配置

+  left: auto;
+  right: max(4px, calc((var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width)) / 2));
+  margin: 0;


🟡 分割ペイン内の下配置タブが指定した物理側に配置されない

開始側メニュー表示中に slot="bottom" を使うと、メニュー配置が優先されます。両辺が指定され、書字方向によって物理側の指定が無視されるため、バーが予約領域から外れます。

Learn more

分割ペインの既存スタイルは、表示中の開始側メニューを避けるため、下側タブバーに inset-inline-start を設定します。このセレクターは新しい適応型セレクターより詳細度が高いため、ここで設定した left: auto または物理位置より優先されます。絶対配置要素に left、right、固定幅が同時に残ると、LTR では左、RTL では右が優先されます。その結果、物理右配置は LTR で、物理左配置は RTL で壊れます。

Example: LTR の 1024px 幅で開始側メニューが表示され、右配置かつ slot="bottom" の場合、right に加えてメニュー由来の left が残ります。ブラウザーは left を優先し、タブバーを右側の予約領域ではなくメニュー後方へ置きます。

Recommended fix: 適応型の物理配置では論理 inset を明示的にリセットし、分割ペインのメニュールールより確実に優先させてください。左右配置、LTR/RTL、上下スロット、表示中の開始側・終了側メニューを組み合わせたテストも追加してください。

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-09-21T07:40:02Z

既存の適格判定

+  contain: layout style;
+  flex-direction: column;
+  width: 54px;


🟡 縦型タブが Native UI Shell で横向きに投影される

Native UI Shell 有効時、この縦型バーも既存の適格判定を通過します。UIKit は項目を横並びにするため、幅62pxの領域へ押し込まれ、表示と操作領域が崩れます。

Learn more

Native UI Shell は、各ボタンの幅が等しく既定レイアウトならタブバーを投影対象にします。新しい縦型レイアウトでも全ボタンは54px幅なので、この条件を満たします。しかしネイティブ側の configureLayout は通常の UITabBar を横方向の .fill 配置で構成します。Web側の細く縦長な矩形を渡しても、項目が縦並びにはなりません。

Example: 4項目の右配置バーはWebでは約62×224pxです。Shellを有効にすると、4個のUIKit項目がその62px幅へ横並びに収められ、Webの縦型配置と一致しません。

Recommended fix: ネイティブ縦型投影を実装するまでは、.ionic-theme-adaptive-tabs 配下で左右配置されたバーを read の対象外にしてください。その後、Web表示へ正しくフォールバックする統合テストを追加してください。

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-09-21T07:40:03Z

ジェスチャー処理

+  contain: layout style;
+  flex-direction: column;
+  width: 54px;


🟡 縦型タブの選択エフェクトが横方向に動く

registerTabBarEffect を縦型バーに登録すると、ジェスチャー処理はX座標だけを使います。上下へドラッグ選択できず、別タブのタップでもレンズが正しいボタン位置へ移動しません。

Learn more

公開APIの registerTabBarEffect は、タブバーを横向きと仮定しています。移動範囲、ヒットテスト、進捗、速度をすべてX軸から計算し、レンズのY座標はバー中央に固定します。新しい flex-direction: column はこの前提を変えますが、登録処理は縦型バーを拒否も適応もしません。そのため通常のクリック自体は発火しても、テーマ提供のドラッグ選択と選択レンズが壊れます。

Example: 下端寄せの4項目バーで一番下のタブをタップすると、選択先は変わりますが、レンズはそのボタンではなく縦長バーの中央付近に表示されます。上から下へドラッグしてもX座標がほぼ変わらないため、対象タブを切り替えられません。

Recommended fix: registerTabBarEffect とアニメーション計算を配置クラスに応じてY軸へ切り替えてください。未対応のまま提供する場合は、縦型バーでは登録を拒否して壊れたエフェクトを有効化しないでください。縦方向のタップ、ドラッグ、レンズ位置をテストしてください。

Was this helpful? React with 👍 or 👎 to provide feedback.

github-actions · 2026-09-21T07:43:43Z

Playwright test results

341 passed

Details

341 tests across 19 suites
3 minutes, 55 seconds
0b24bf4
This detailed result covers Ionic 9 only. Ionic 8 runs against the same screenshots in a separate matrix job; check the workflow run for both results. To update the screenshots, comment with /update-screenshots.

github-actions · 2026-09-21T07:51:59Z

📊 Ionic 9 Playwright Test Report

View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-208/

Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run.

rdlabo · 2026-09-22T08:48:47Z

Consolidated into #213. The adaptive tab-bar commits are now part of the head branch, so this intermediate stacked PR is no longer needed.

rdlabo · 2026-09-22T08:49:25Z

Consolidated into #213; its adaptive tab-bar commits are now included in the Web foldable PR.

devin-ai-integration Bot reviewed Sep 21, 2026

View reviewed changes

rdlabo force-pushed the feat/adaptive-tabs branch from 1ff5623 to 7b6fbb6 Compare September 21, 2026 07:46

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 2758ecc

e9af079

rdlabo force-pushed the feat/adaptive-tabs branch from 7b6fbb6 to 1e043e8 Compare September 21, 2026 07:49

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 2758ecc

8daae5f

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 699cb94

741385c

rdlabo force-pushed the feat/adaptive-tabs branch from 1e043e8 to 9bfebe4 Compare September 21, 2026 07:57

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 6d27637

b3e8d4f

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 395a955

a5f4553

rdlabo force-pushed the feat/adaptive-tabs branch from 9bfebe4 to e091d47 Compare September 21, 2026 08:11

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 be38159

283306c

rdlabo force-pushed the feat/adaptive-tabs branch from e091d47 to 2ded8ce Compare September 21, 2026 09:01

rdlabo mentioned this pull request Sep 21, 2026

feat(layout): support foldable safe-area layout #209

Merged

rdlabo force-pushed the feat/adaptive-tabs branch from 2ded8ce to 65e2a9e Compare September 21, 2026 09:15

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 6e7bcfe

6870d73

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 6e7bcfe

43a6aaf

rdlabo force-pushed the feat/adaptive-tabs branch from 65e2a9e to ddb3365 Compare September 21, 2026 09:33

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 e57ef12

27ddbcf

rdlabo force-pushed the feat/adaptive-tabs branch 2 times, most recently from bfcede5 to 0b24bf4 Compare September 21, 2026 09:47

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 a8157af

c8cda24

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #208 476fe8e

e1f58a5

rdlabo changed the base branch from main to feat/physical-safe-area September 21, 2026 13:05

rdlabo changed the title ~~feat(tabs): add explicit adaptive vertical placement~~ feat(tabs): add foldable vertical tab bar Sep 21, 2026

This was referenced Sep 21, 2026

feat: project foldable toolbar navigation and actions #212

Closed

feat: support iPhone Duo with vertical bars #213

Merged

rdlabo force-pushed the feat/physical-safe-area branch from ebe2880 to fdcff52 Compare September 22, 2026 01:01

rdlabo force-pushed the feat/adaptive-tabs branch from 1f7bda0 to 76fb6e2 Compare September 22, 2026 01:45

rdlabo force-pushed the feat/adaptive-tabs branch 2 times, most recently from ced2fea to bc6a455 Compare September 22, 2026 02:21

rdlabo force-pushed the feat/physical-safe-area branch from 4969d79 to 23cf96a Compare September 22, 2026 02:35

rdlabo added 4 commits September 22, 2026 11:35

feat(tabs): add explicit adaptive vertical placement

c714d1a

fix(tabs): preserve foldable rail beside split pane

58033c6

test: refresh foldable split snapshots for toggle

16e1109

fix(tabs): derive foldable rail from app mode

e94839a

rdlabo force-pushed the feat/adaptive-tabs branch from bc6a455 to e94839a Compare September 22, 2026 02:39

rdlabo added 3 commits September 22, 2026 11:46

fix(tabs): preserve overlay tab ownership

0823996

fix(tabs): show the selected foldable label

39ff308

fix(tabs): match SwiftUI foldable rail metrics

566ab56

rdlabo mentioned this pull request Sep 22, 2026

feat(native): project foldable controls with SwiftUI #214

Merged

rdlabo closed this Sep 22, 2026

Navigation Menu

Uh oh!

feat(tabs): add foldable vertical tab bar - #208

feat(tabs): add foldable vertical tab bar#208
rdlabo wants to merge 7 commits into
feat/physical-safe-areafrom
feat/adaptive-tabs

rdlabo commented Sep 21, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

rdlabo commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Stack

Verification

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright test results

Details

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

rdlabo commented Sep 21, 2026 •

edited

Loading

github-actions Bot commented Sep 21, 2026 •

edited

Loading

github-actions Bot commented Sep 21, 2026 •

edited

Loading