Menu hamburger icon

Onsen UI 1.0.1 Released

Today we released Onsen UI 1.0.1 which comes with improved themes, new features and a lots of bug fixes.

Improved Themes

Onsen UI themes look a lot more beautiful with this release. Checkout the themes page to see how they look like. We also include the code snippets of each component for easy customization.

New Features

Thanks to your support and comments, we have added highly requested features listed below:

Transclude support

screen and navigator now support transclusion. This mean now you can put root page connent right inside.


      <!-- root page content here -->


        <!-- root page content here -->

Tabbar Item

When you use image (instead of font icons like font-awesome) as tabbar’s icon, the color will not change when the tabbar is not active. You can now specify the icon when a tabbar is active via active-icon attribute.

<ons-tabbar active-icon=””>


    label="Alarm 1"
    label="Alarm 2"


.icon-alarm {
  background-image: url(images/icons/alarm.png);
  width: 34px;
  height: 30px;
  background-size: 100%;

.icon-alarm-active {
  background-image: url(images/icons/alarm_active.png);
  width: 34px;
  height: 30px;
  background-size: 100%;

Sliding Menu

Enable/Disable Swipe

You can now enable/disable swipe interaction via swipable attribute

Specify swipe area

Swipe area can also be specified via swipe-target-width. This is useful for application that also have swipe interaction and you don’t want to have sliding-menu conflict with the application’s swipe.

Max Slide Distance

You can now specify how far the page slides via max-slide-distance

Onsen Component Query

It is now possible to query Onsen Element or any isolated scope element using ons.$get(‘#element-id’). This is useful if you have two or more elements of the same type.

For instance, you may have two navigators. One on the left and one on the right of a split-view. Using ons.navigator.pushPage() will refer to the last navigator. To use the right navigator, just give it an id, and use ons.$get(‘#id’).

Another safe way is to specify #event object as the last parametter to method.

<ons-button ng-click="ons.navigator.popPage($event);">

The $event object will help the framework find the nearest component.


<ons-navigator id="navigator1"></ons-navigator>


<ons-navigator id="navigator2"></ons-navigator>



Bug Fixes

Fast Click

We used ngTouch in 1.0.0 to fix the 300ms delay. It proved to be buggy, so we bring Fastclick.js back.

Page Directives’ scopes fix

The controller’s scope outside screen, navigator, sliding-menu, split-view and scroller was not reflected inside those components’ content. It is now much easy to work with scopes.

Other minor fixes

Here are the complete changes log:

  • initial ng-animate exp. solves black flash when push to screen
  • fix navigator right icon dupication in ios due to using id instead of class
  • make screen, navigator, sliding-menu, splitview work with other broswers
  • fix ons-scroller scope
  • add tabbar active icon demo
  • support scope event on screen, navigator, slidingMenu, splitView, tabbar
  • change () to support # query
  • rename factory to stack
  • fix sliding menu openMenu/closeMenu
  • fix tabbar item state invalidated after pushed/present new page with another ons-tabbar
  • fix navigator .page transition
  • improve navigator animation
  • delete unused file. support tabbar-item active-icon attribute
  • fix black page when screen is pushed into navigator
  • fix ipad viewport height-device-height cause scrolling, rename navigator.css
  • remove console
  • fix sliding menu swipe target area
  • fix scroller
  • fix sliding menu swipe target width
  • add build files
  • prevent centering page after screen/navigator animatin
  • update build files
  • Merge branch ‘feature/sliding_menu_enable_swipe’ into dev
  • add demo for swipe target width
  • add swipe_target_width
  • add navigator hide toolbar demo
  • change hide-tabbar to hide-tabs
  • change sliding menu max-width to max-slide-distance
  • fix ons-tabbar hide-tabbar attribute
  • update lib
  • make page, row, and col inherit its parent scope
  • Merge branch ‘feature/page_ng_controller’ into dev
  • add grunt serve:app only watch changes to app
  • make it possible to specify ng-controller inside page
  • Merge branch ‘feature/isolate_scope’ into dev
  • sliding_menu scope and factory
  • split view scope with factory
  • screen factory code refactor
  • screen scope
  • navigator scope
  • Merge branch ‘feature/split_view_menu_scope’ into dev
  • compiling sliding menu with its parent scope
  • Merge branch ‘feature/sliding_menu_scope’ into dev
  • compiling sliding menu content with its parent scope
  • remove log
  • Merge branch ‘feature/sliding_menu_max_width’ into dev
  • add sliding menu maxWidth demo
  • implement ##27 add sliding menu max width-demo part
  • sliding_menu add max_width
  • initial exp
  • merge screen_scope, add app folder
  • fix text-input disabled property binding
  • merge from master
  • Merge branch ‘master’ into dev
  • Merge branch ‘master’ of
  • Update
  • Merge pull request #25 from anatoo/with-livereload
  • Merge pull request #24 from anatoo/master
  • Added a section about livereload to README file.
  • Added ‘grunt serve’ task for livereload.
  • Fixed outdated bower.json. Updated version and added new theme css files.
  • Added browser support section to README files.
  • compiling the content of screen page against screen’s parent’s scope
  • Update
  • fix #19 right-button-icon disappearing when the page is inside an ons-sliding-menu
  • use sliding_menu project template as downlaod on toppage
  • remove cordova js from demo
  • update project template zips
  • update getting support
  • update README