Announcing Ionic 7.5

By admin

Copied
ORG

We are excited to announce a huge update to

Ionic Framework
ORG

! This release brings improvements for accessibility, Angular development,

Datetime
ORG

, Toast, and more.

Let’s take a look at some of the great features in this release

👇

Dynamic Font Scaling

PERSON

Ionic 7.5 brings a new accessibility feature called “

Dynamic Font Scaling
WORK_OF_ART

.” Both iOS and

Android
ORG

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
DATE

to build a simple and consistent font scaling experience that developers can enable in their apps.

As part of this change most

Ionic UI
ORG

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
ORG

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
ORG

and will be enabled by default in

Ionic 8
ORG

. Dynamic Font Scaling on

Android
ORG

is enabled by default starting in

Ionic 7.5
EVENT

.

Angular

Standalone Components
ORG

In

Ionic 6.3
LAW

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
EVENT

, developers will be able to import

Ionic UI
ORG

components as Angular standalone components!

Using

Ionic
ORG


UI
PRODUCT

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
ORG

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
ORG

and

Ionic Vue
ORG

use which avoids hydration. Since

Ionic
ORG

standalone components can be statically analyzed, developers will be able to make use of newer features in their Angular applications such as

ESBuild
ORG

.

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
ORG

applications to use

Ionic
ORG

standalone components.

The team is hard at work on an automated migration utility for

Ionic
ORG

standalone components. Stay tuned for more news on this!

Update: The team is pleased to announce an experimental migration utility for

Ionic
ORG

standalone components! See https://github.com/ionic-team/ionic-angular-standalone-codemods for more information.

Toast Anchor Positioning

The Toast component is designed to overlay an application to provide useful information about the state of the app. However,

Toast
ORG

can sometimes block important parts of the user interface when components such as

TabBar
PERSON

or Fab are used.

The new positionAnchor property makes it easy to anchor the Toast above or below a

UI
ORG

component so the

Toast
ORG

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
PERSON

h11 and h24 Hour Cycle Support

We updated the

Datetime
ORG

component to support h11 and h24 hour cycles for displaying times. This feature joins the existing support for h12 and

h23 hour
TIME

cycles.

<!– This would render the time as "

0:00 AM
TIME

" –> <ion-datetime hour-cycle="h11" locale="en-

US
GPE

" 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
LAW

from the latest tag on NPM:

# Ionic Angular apps npm install @ionic/angular@latest

#
CARDINAL


Ionic React apps npm
PRODUCT

install @ionic/react@latest @ionic/react-router@latest #

Ionic Vue
ORG

apps npm install @ionic/vue@latest @ionic/vue-router@latest # All other

Ionic
ORG

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
ORG

. We’ll see you soon for the next release!