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 px
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.
The new 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 h11
and h24
hour cycles for displaying times. This feature
joins the existing support for h12
and
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 utility
The openURL
function was exposed to help developers
using ion-router
more easily push routes.
Thanks to @fpladano for contributing this feature!
Developers can install Ionic 7.5 from the latest
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!
The post Announcing Ionic 7.5 appeared first on Ionic Blog.