{"id":2647,"date":"2019-03-06T21:37:04","date_gmt":"2019-03-06T21:37:04","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2647"},"modified":"2019-03-07T19:35:24","modified_gmt":"2019-03-07T19:35:24","slug":"ionic-release-4-1-hydrogen-out-now","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-release-4-1-hydrogen-out-now","title":{"rendered":"Ionic Release: 4.1 Hydrogen Out Now!"},"content":{"rendered":"

We are excited to announce that our first feature release after Ionic 4.0<\/a> 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).<\/p>\n

\"\"

We have some exciting new features to share in this release, so let\u2019s dive right in!<\/p>\n

<\/p>\n

Skeleton Text Update<\/h2>\n

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

You can now also animate the skeleton text by passing in the animated<\/code> prop:<\/p>\n

<ion-item>\n  <ion-avatar slot="start">\n    <ion-skeleton-text animated><\/ion-skeleton-text>\n  <\/ion-avatar>\n  <ion-label>\n    <h2><ion-skeleton-text animated style="width: 100px;"><\/ion-skeleton-text><\/h2>\n    <p><ion-skeleton-text animated style="width: 180px;"><\/ion-skeleton-text><\/p>\n    <p><ion-skeleton-text animated style="width: 80px;"><\/ion-skeleton-text><\/p>\n  <\/ion-label>\n<\/ion-item>\n<\/code><\/pre>\n
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.<\/p>\n
Indeterminate Checkboxes<\/h2>\n
The ion-checkbox<\/code> 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 \u201ccheck all\u201d checkbox, but only some of the options in the group are selected:<\/p>\n
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.<\/p>\n
Thanks to simonhaenisch<\/a> for the PR to add this!<\/p>\n
Select Component with compareWith<\/h2>\n
Previously, when determining if a particular option in an ion-select<\/code> was selected or not, a strict ===<\/code> comparison was done on the object. A new compareWith<\/code> property was added to ion-select<\/code> that would either let the developer specify a particular property on the object to compare or provide a custom function to do the compare.<\/p>\n
\n  This was a feature in Ionic 3 and is now added back into Ionic 4.\n<\/p><\/blockquote>\n
Special thanks to community member zakton5<\/a> for providing a PR for this!<\/p>\n
CSS Display Utilities<\/h2>\n
A few CSS classes were added to help with hiding elements and responsive design. Please use version 4.1.1<\/code> for this feature as there was an issue in the minor release that was corrected.<\/p>\n