September 18, 2023
  • All
  • Announcements
  • Framework
  • Ionic

Announcing Ionic 7.4

Liam DeBeasi

We’re so excited to announce the release of Ionic 7.4 with updates to Datetime, Checkbox, Radio, Toggle, and more!

Here’s what’s new 👇

Datetime Calendar Day Styling

In Ionic 7.1 we shipped new features for styling Datetime. We are excited to ship another Datetime styling feature in Ionic 7.4 too!

The new calendar-day CSS Shadow Part allows developers to style the individual day buttons in the calendar grid layout. We also added active, today, and disabled Shadow Parts so developers can customize these day buttons based on state.

ion-datetime::part(calendar-day) {
  color: purple;
}

ion-datetime::part(calendar-day disabled) {
  color: gray;
}

ion-datetime::part(calendar-day today) {
  color: purple;
  border: 1px solid purple;
}

ion-datetime::part(calendar-day active) {
  background: purple;
  color: white;
}

Stacked Label Placement for Checkbox, Radio, Range, and Toggle

New “stacked” label placement styles have been added for the Checkbox, Radio, Range, and Toggle components. This feature allows the visible text label to appear stacked on top of the control. The “alignment” property was also added to handle how the label and control are aligned when stacked.

<ion-toggle
  label-placement="stacked" 
  alignment="start"
>Enable Notifications</ion-toggle>

Datetime Asynchronous Value Support

In previous versions of Ionic, asynchronously setting the value property on Datetime would not update the Datetime view if the component was already visible. This was done to avoid a scenario where the Datetime view updates while the user is interacting with it. However, this caused an issue when the Datetime’s value was loaded asynchronously such as from a remote server because the view would not update.

In Ionic 7.4 this behavior was revised to always update the Datetime view when the value property changes. We have also updated the Datetime documentation to note this behavior and make developers aware that they should hide the Datetime until the value is set to avoid the previously mentioned issue.

Enhancements to Custom Page Transitions

Custom page transition functions receive an options payload that has information regarding the transition about to run. The TransitionOptions interface was exported to add stronger types to that payload.

The getIonPageElement function was also exported to make it easy to select both the entering and leaving views’ .ion-page elements.

Thanks to hoi4 for contributing this feature!

Wrapping Up

Developers can install Ionic 7.4 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!

Liam DeBeasi

Related Posts