We are excited to announce a huge update to Ionic Framework! This release brings improvements for accessibility, Angular development, Datetime, Toast, and more.
Let’s take a look at some of the great features in this release
Dynamic Font Scaling
Ionic 7.5 brings a new accessibility feature called “Dynamic Font Scaling.” Both iOS and Android have system-level settings that allow users to scale text up or down on their devices. This feature helps users who need larger text for better readability, while also accommodating users who prefer smaller text, allowing more information to appear on the screen.
The team has been working hard over the past several months to build a simple and consistent font scaling experience that developers can enable in their apps.
As part of this change most Ionic UI components have been
updated to use
rem units instead of
units where appropriate. This allows us to scale all components
that participate in Dynamic Font Scaling in a consistent way.
See the Dynamic Font Scaling documentation for more information on this feature.
Dynamic Font Scaling is an opt-in feature on iOS starting in Ionic 7.5 and will be enabled by default in Ionic 8. Dynamic Font Scaling on Android is enabled by default starting in Ionic 7.5.
Angular Standalone Components
In Ionic 6.3 we added support for building Angular apps that use a standalone component architecture. We are very excited to announce that starting in Ionic 7.5, developers will be able to import Ionic UI components as Angular standalone components!
Using Ionic UI components as Angular standalone components has several benefits for developers:
- The final bundle size of many applications will decrease due to improved treeshaking compatibility. This includes removing Ionicon SVGs that are not used.
- Application load will be improved for many applications. Ionic standalone components make use of the same build system that Ionic React and Ionic Vue use which avoids hydration.
- Since Ionic standalone components can be statically analyzed, developers will be able to make use of newer features in their Angular applications such as ESBuild.
See the Angular Build Options documentation for more information on this feature. This page also includes a step by step guide on how to migrate existing Ionic Angular applications to use Ionic standalone components.
The team is hard at work on an automated migration utility for Ionic standalone components. Stay tuned for more news on this!
Toast Anchor Positioning
The Toast component is designed to overlay an application to provide useful information about the state of the app. However, Toast can sometimes block important parts of the user interface when components such as TabBar or Fab are used.
positionAnchor property makes it easy to
anchor the Toast above or below a UI component so the Toast does
not cover it.
<ion-toast message="Your playlist was created successfully" position-anchor="my-tabbar"></ion-toast> <ion-tabs> <ion-tab-bar id="my-tabbar" slot="bottom"> … </ion-tab-bar> </ion-tabs>
See the Toast documentation for more information on this feature.
Datetime h11 and h24 Hour Cycle Support
We updated the Datetime component to support
h24 hour cycles for displaying times. This feature
joins the existing support for
h23 hour cycles.
<!-- This would render the time as "0:00 AM" –> <ion-datetime hour-cycle="h11" locale="en-US" presentation="time" value="2023-01-01T00:00"></ion-datetime>
See the Datetime documentation for more information on this feature.
openURL function was exposed to help developers
ion-router more easily push routes.
Thanks to @fpladano for contributing this feature!
Developers can install Ionic 7.5 from the
tag on NPM:
# Ionic Angular apps npm install @ionic/angular@latest # Ionic React apps npm install @ionic/react@latest @ionic/react-router@latest # Ionic Vue apps npm install @ionic/vue@latest @ionic/vue-router@latest # All other Ionic apps npm install @ionic/core@latest
Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!