Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon

Ionic 4.1 named Hydrogen is out!

Save for later
  • 2 min read
  • 08 Mar 2019

article-image

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.

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime

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.

Ionic Framework 4.0 has just been released, now backed by Web Components, not Angular

Ionic v4 RC released with improved performance, UI Library distribution and more

The Ionic team announces the release of Ionic React Beta