March 6, 2019
  • All
  • Announcements
  • Ionic 4

Ionic Release: 4.1 Hydrogen Out Now!

Brandy Carney

We are excited to announce that our first feature release after Ionic 4.0 is out now! In keeping true to using code names from the periodic table of elements, Ionic 4.1 is named Hydrogen (after the initial release of Neutronium).

We have some exciting new features to share in this release, so let’s dive right in!

Skeleton Text Update

The ion-skeleton-text component got some love in the form of a few new features and docs updates. Now, you can use ion-skeleton-text inside of media controls like ion-avatar and ion-thumbnail, which makes showing skeleton screens for your list items look more natural.

You can now also animate the skeleton text by passing in the animated prop:

<ion-item>
  <ion-avatar slot="start">
    <ion-skeleton-text animated></ion-skeleton-text>
  </ion-avatar>
  <ion-label>
    <h2><ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text></h2>
    <p><ion-skeleton-text animated style="width: 180px;"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated style="width: 80px;"></ion-skeleton-text></p>
  </ion-label>
</ion-item>

Skeletons placed inside of avatars and thumbnails will automatically adjust their size to their containers, so no need to specify a style on those. Skeletons can also be styled to have a custom border-radius, width, height, or any other CSS styles for use outside of Ionic components.

Indeterminate Checkboxes

The ion-checkbox component now has a new prop called indeterminate, and when true, it will show the checkbox in a quasi half-on/half-off state. This is useful in scenarios where you are using a “check all” checkbox, but only some of the options in the group are selected:

A checkbox with both the checked and indeterminate property set will appear as indeterminate. The behavior matches that of a native checkbox, where indeterminate is only a visual state.

Thanks to simonhaenisch for the PR to add this!

Select Component with compareWith

Previously, when determining if a particular option in an ion-select was selected or not, a strict === comparison was done on the object. A new compareWith property was added to ion-select that would either let the developer specify a particular property on the object to compare or provide a custom function to do the compare.

This was a feature in Ionic 3 and is now added back into Ionic 4.

Special thanks to community member zakton5 for providing a PR for this!

CSS Display Utilities

A few CSS classes were added to help with hiding elements and responsive design. Please use version 4.1.1 for this feature as there was an issue in the minor release that was corrected.

  • Add the ion-hide class to any element you want to hide (setting the display to none)
  • Use the new ion-hide-{breakpoint}-{dir} classes to hide based on breakpoints for certain screen sizes. Check out the docs for more info.

This can be added to an existing Angular project at the end of the global.scss file:

@import '~@ionic/angular/css/display.css';

It is also included in the bundle that is used by React and Vue.

Big shout out to seiyria for this update!

Bug fixes Abound!

With the above feature updates, we also closed out many bugs since the 4.0.2 release. Check out the changelog for a full list of fixes and updates.

Happy building! 💙


Brandy Carney