Onsen UI 2.0 betaAs 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.
Sample app with Material DesignIn 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
Brief explanation of the stylesWe 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!
<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>