Ionic 4.1 named Hydrogen is out!

1 min read

After releasing Ionic 4.0 in January this year, the Ionic team announced the release of Ionic 4.1 on Wednesday. This release is named “Hydrogen” based on the name of elements in the periodic table. Along with a few bugfixes, Ionic 4.1 comes with features like skeleton text update, indeterminate checkboxes, and more.

Some of the new features in Ionic 4.1

Skeleton text update

Using the ion-skeleton-text component, developers can now make showing skeleton screens for list items more natural. You can use ‘ion-skeleton-text’ inside media controls like ‘ion-avatar’ and ‘ion-thumbnail’. The size of skeletons placed inside of avatars and thumbnails will be automatically adjusted according to their containers. You can also style the skeletons to have custom border-radius, width, height, or any other CSS styles for use outside of Ionic components.

Indeterminate checkboxes

A new property named ‘indeterminate’ is now added to the ‘ion-checkbox’ component. When the value of ‘indeterminate’ is true it will show the checkbox in a half-on/half-off state. This property will be handy in cases where you are using a ‘check all’ checkbox, but only some of the options in the group are selected.

CSS display utilities

Ionic 4.1 comes with a few new CSS classes for hiding elements and responsive design: ion-hide and ion-hide-{breakpoint}-{dir}. To hide an element, you can use the ‘ion-hide’ class. You can use the ion-hide-{breakpoint}-{dir} classes to hide an element based on breakpoints for certain screen sizes.

To know more about the other features in detail, visit Ionic’s official website.