January 18, 2024
  • All
  • Announcements
  • Framework
  • Ionic

Announcing Ionic 7.6

Liam DeBeasi

We are excited to announce Ionic 7.6 with updates to Input, Radio, Toast, and more! This release makes it easier to style components and introduces user experience improvements.

Here’s what’s new 👇

More theming options for form controls

Ionic 7.6 brings new options for customizing labels on Checkbox, Radio, Range, and Toggle. While the label content can currently be styled with CSS, it was previously difficult to style the label container. The new label Shadow Part resolves this issue by giving developers direct access to the container from their CSS.

ion-checkbox::part(label) {
  padding: 10px;
}

See the Checkbox, Radio, Range, and Toggle documentation for more information.

Buttons, icons, and text inside of text fields

Also new in this release is the ability to add buttons, icons, and text at the start or the end of Input and Textarea. This is great for adding a button to dynamically show the contents of a password input or adding a unit to a numeric input.

<ion-input label="Password" label-placement="stacked" fill="outline" type="password">
  <ion-button fill="clear" slot="end">
    <ion-icon slot="icon-only" name="eye"></ion-icon>
  </ion-button>
</ion-input>
<ion-input label="Order Quantity" label-placement="stacked" fill="outline" value="10000">
  <div slot="end">cupcakes</div>
</ion-input>

See the Input and Textarea documentation for more information.

Toast swipe to dismiss

Toasts can now be swiped to dismiss using the new swipeGesture property. This feature works great with the Toast relative positioning feature the team shipped in Ionic 7.5!

Thank you to evgeniy-skakun for assisting with this feature!

See the Toast documentation for more information.

Advanced radio comparison options

Last but certainly not least is the new compareWith property on Radio Group. This allows developers to perform more complex comparison operations when the value of each Radio is not a primitive value.

<ion-list>
  <ion-radio-group [compareWith]="compareWith">
    <ion-item *ngFor="let food of foods; trackBy: trackItems">
      <ion-radio [value]="food">{{ food.name }}</ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>
foods = [
  { id: 1, name: 'Apples', type: 'fruit' },
  { id: 2, name: 'Carrots', type: 'vegetable' },
  { id: 3, name: 'Cupcakes', type: 'dessert' },
];

compareWith(o1, o2) {
  return o1.id === o2.id;
}

See the Radio Group documentation for more information.

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