Hi there, this is Fran Dios from Onsen UI team. In this article I’d like to show the latest news about Onsen UI that we are currently implementing and how to use them.
 

Onsen UI 2.0 beta

As you may already know, Onsen UI 2.0 beta was released few weeks ago and it comes loaded with new features and UI components. In case you missed it you can check it out in the Onsen UI 2.0 beta web page or directly see a quickstart example on Github.
 
Perhaps one of the most interesting features is the fact that Onsen 2.0 is framework agnostic. It doesn’t depend on AngularJS anymore and can be used together with your favourite front-end framework (or without any). Integration with AngularJS is already implemented and better support for other choices is on the way. You can already see it in action with Knockout.js here.
 
But that’s not all. Onsen UI 2.0 also brings Material Design flavor in the shape of new styles and components. You can have a quick look to the Theme Roller for Onsen UI 2.0 to see the new appearance. We are trying to reproduce accurate Material Design styles while maintaining the performance and make it super easy to use for developers.
 

Sample app with Material Design

In the following we will see a quick example of how Onsen UI 2.0 works with AngularJS bindings and some new patterns for Material Design. For this purpose we made an application that reproduces Android 5’s contact list and details view of contacts:
 
OnsenUI 2 AngularJS Example
 
The code of this example is of course available on GitHub.
 

Brief explanation of the styles

We have three new components in this app: floating action button (ons-fab), ripple effect (ons-ripple) and MD input (ons-material-input). Those, together with the new styles, give the Material look and feel to Onsen UI. In general, the styles are applied by just adding modifier=”material” to the components, although the mentioned ones won’t need a modifier since they are original from MD. Moreover, this modifier will be automatically added depending on the platform so you don’t need to specify material in every place. This means that developing a cross platform app just got easier!
 
Some other highlights are the styles for ons-tabbar and ons-list-item. The latter offers three different distributed portions (left, center and right) to organise the content as it’s done in MD. A quick example is as follows:
 
	<ons-list-item modifier="material short-divider">
		<div class="list__item__left"> <img ... > </div>
		<div class="list__item__center">
			<div class="list__item__title"> Title  </div>
			<div class="list__item__subtitle"> Subtitle  </div>
		</div>
		<div class="list__item__right"> <img ... > </div>
	</ons-list-item>
 
This is basically a list-item with images on the sides and content in the center that grows to fill all the space left by the images. It also adds a divider under center and right elements. And of course you can customize it easily with few CSS.
 

Conclusion

Onsen UI 2.0 release is getting closer. We want to thank the community for the feedback during the beta stage that we are getting and invite you to join us if you haven’t yet. You can inform us about any issue or suggestion on Github and ask for help on Stackoverflow. Also, if you like the project please don’t forget to star our repo. There are still many features we are preparing for the final version of Onsen UI 2.0 and we are confident you will love them!
 
  • In the branch ‘js-implementation’ you can find this app implemented in pure JavaScript (without AngularJS). As mentioned in this article, Onsen UI is framework agnostic 🙂

  • Kiran

    Hi @frandiox:disqus , have you built or heard some one using Onsen UI with emberjs ? Any pointer welcome.