Skip to content

ios27-v1.0.2

Choose a tag to compare

View all tags
@rdlabo rdlabo released this 19 Sep 11:56
· 137 commits to main since this release
ios27-v1.0.2
a99f318

Highlights

This release adds a tab-bar-style glass appearance for ion-segment and improves the spacing of search bars placed inside iOS toolbars.

Upgrade

npm install @rdlabo/ionic-theme-ios27@1.0.2

No migration is required. Existing segments and search bars keep their current styling unless they use the new opt-in class.

Glass segments

Add segment-style-glass to an ion-segment to give its background and selected indicator the same glass treatment as the tab bar:

<ion-segment class="segment-style-glass" value="available">
  <ion-segment-button value="available">
    <ion-label>Available</ion-label>
  </ion-segment-button>
  <ion-segment-button value="away">
    <ion-label>Away</ion-label>
  </ion-segment-button>
</ion-segment>

The class preserves the segment's existing dimensions and text colors, works with scrollable segments, and respects Ionic's public --background custom property.

To place the segment directly above a tab bar, put it in an ion-toolbar inside ion-footer. The theme does not add positioning or an extra gap, so the layout remains under your app's control.

Search bars in toolbars

Search bars inside ion-toolbar now use corrected horizontal spacing, including the visible cancel-button state. The adjustment is automatic; no markup or class changes are needed.

Documentation and packaging

  • Added a complete setup example for using the iOS 27, iOS 26, and MD3 themes together.
  • Added Sass load-path troubleshooting for projects where meta.load-css() cannot resolve packages.
  • Updated the bundled theme utilities packaging.

What's changed

  • feat(segment): add tab-style glass appearance (#194)
  • fix(searchbar): correct toolbar spacing (#193)

Full changelog: ios27-v1.0.1...ios27-v1.0.2

Assets 2
Loading