The Web Tub
Published in

The Web Tub

Onsen UI 1.2.2 comes loaded with Pull to Refresh and Infinite Lists!

We are proud to announce that we’ve just released Onsen UI 1.2.2. This version includes a couple of exciting new features plus lots of improvements and bug fixes. In this article we will introduce some of the changes. For an exhaustive list of changes please refer to the Changelog.

As you can probaly see we’ve also made a complete rehaul of the website. The design has been updated and we’ve also made a lot of improvements to the documentation. Every component now has its own page with a lot more information than before. Please check out the new website where you can also download the latest version of Onsen UI.

You can of course install the latest version using Bower as well:

bower install onsenui

We’ll start by introducing two features that we’ve had a lot of requests for, namely Pull to Refresh and Infinite List. Please try them out and tell us what you think. If you have any issues please report them on our GitHub issues page. In addition, we’ve made some changes to the existing components that we are also excited to announce.

Pull to Refresh <ons-pull-hook>

In mobile apps a “feed” is a very popular way to show the latest events and news. To refresh the feed the user often just pulls down the list and releases. It’s a very intuitive way to refresh the view and with the new version of Onsen UI we introduce the <ons-pull-hook> component. With it you can easily add pull-to-refresh functionality to any app.

The look and feel of the <ons-pull-hook> is very easy to customize using CSS. Please try it out below and read the blog post about this feature.

The feature can be added to an app by just writing a few lines of HTML:

When the page is pulled down the controller method load($done) will be executed and it will in turn execute the $done function when it has finished loading new content. It is also possible to use it outside of AngularJS by using the on-action attribute instead.

More information about this component can be found in the documentation.

Infinite List <ons-lazy-repeat>

In mobile apps it is often necessary to render lists with a large number of items. For example, it could be a news feed or an image gallery. Most of the time only a handful of items would be visible on the screen simultaneously. Thus, it would be very inefficient to add the whole list to the DOM at the same time.

The <ons-lazy-repeat> component works in the background by automatically removing elements that are not visible and adding items that come into view to the DOM while the user is scrolling. This makes it possible to render a list of millions of items with close to no performance penalty.

You can see it in action below:

For more information please see the blog post about the component. Also check out the documentation for more in-depth information on how to use it.

We hope you enjoy using these two new components!

Other changes

A complete list of changes is available in the Changelog.

  • auto-refresh added to <ons-carousel> to make it easier to use with ngRepeat. With auto-refresh switched on it is not necessary to manually refresh the carousel when the items change.
  • The sliding menu will now be closed if the user taps on the main page. This behavior is common in native apps so it will feel intuitive for the user.
  • A persistent attribute has been added to the <ons-tab> component. A tab with this attribute will not reload it’s content every time it’s selected. This is very useful when the content contains a navigator or some other content that has a state.
  • Automatically generated variables like ons.navigator and ons.slidingMenu have been removed. For apps using these variables some changes to the code might be necessary when updating to 1.2.2.
  • Onsen UI has been tested on Android 5 (Lollipop) and runs well on the latest Android version.
  • We’ve made a lot of improvements to the way different components interact. Carousel will not propagate drag events to the sliding menu anymore and scrolling content also works better with carousel.
  • Tons of small improvements and bug fixes.

What’s next?

We will continue trying to make Onsen UI the best framework possible. To do that we need your help! If you enjoy using Onsen UI please spread the word so we can grow the community!

With this release we’re getting very close to having implemented all the features we want to include in Onsen UI. We will focus our efforts on making the existing components better, more intuitive and improve stability. We’re also interested in extending support to more devices like Windows Phones and also make it possible to integrate Onsen UI with the new Google Material Design spec.

If you have a feature that you would like to see in an upcoming version of Onsen UI please feel free to tell us by opening an issue on our GitHub issues page. You’re also welcome to open a pull request to fix bugs, correct mistakes or even implement a new feature. We will happily accept contributions if we deem them good enough.

Thank you for using Onsen UI and stay tuned for more updates!

Originally published at on February 26, 2015.




Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onsen UI & Monaca Team

Onsen UI & Monaca Team

Team of developers from Onsen UI and Monaca

More from Medium

Replacing Swiper with Scroll-Snap at our Ionic App

Bootstrap UI

Dials: Upgrading HTML / CSS Card Components with Time Dials using JS

5 best front-end framework to look out