Menu hamburger icon

Introducing Onsen UI 1.0

Today we are really excited to introduce the new version of Onsen UI. This release brings new themes and animation, new components, swipe support, grid system, bug fixes and other enhancements.

New themes

We have two new themes namely iOS 7 and Android theme. Check below to see how they look like.

iOS 7 Theme

Android Theme

New Components

ons-split-view

Split View devides the screen into left and right sections. This is useful for application that target large-screen devices.

The Split View can also be configured to be responsive to screen orientation or width. For example, it can be set to auto collapse into Sliding Menu when in landscape, and expands into Split View when in landscape orientation.

Click on the resize button on the right side of the Split View below to see the effect. When collapsed into Sliding Menu, swiping right/left will open/close the menu.



ons-radio-button

Please click here for documentation.

ons-checkbox

Please click here for documentation.

ons-icon

Onsen UI uses Font Awesome for the icons. ons-icon is short-hand element for using Font Awesome.

Example

<ons-icon
  icon="camera"
  size="2x"
</ons-icon>

Please click here for documentation, and here for all the icons from Font Awesome.

ons-if-orientation

You can now easily show different content on different screen orientatio by using this element.

Example

<ons-page class="center">    
  <div ons-if-orientation="portrait">
      <h1>Portrait content here!</h1>
  </div>

  <div ons-if-orientation="landscape">
      <h1>Landscape content here!</h1>
  </div>
</ons-page>

ons-if-platform

You can also show different content on different platform.

Example

<div ons-if-platform="Android">
  <h1>Show me only if run in Android.</h1>
</div>

<div ons-if-platform="iOS">
  <h1>Show me only if run in iOS.</h1>
</div>

<div ons-if-platform="BlackBerry">
  <h1>Show me only if run in BlackBerry.</h1>
</div>

<div ons-if-platform="chrome">
  <h1>Show me only if run in Chrome.</h1>
</div>

<div ons-if-platform="safari">
  <h1>Show me only if run in Safari.</h1>
</div>

<div ons-if-platform="firefox">
  <h1>Show me only if run in Firefox.</h1>
</div>

<div ons-if-platform="Opera">
  <h1>Show me only if run in Opera.</h1>
</div>

Swipe

Swipe is important for mobile interaction. It just feels natural. We have added swipe interaction with Sliding Menu and Split View.

Play with the demo below!

Try it on your phone!
### Grid System You can now easily layout application UI using ons-row and ons-col. By default all the columns in a row are equally sized to fit the row. You are not limitted to fixed columns, put any columns in a row. You can even align the columns vertically and offset columns.

Please check the docs for more information.

Upgrade Guide

To upgrade from older version please visit this link: https://github.com/OnsenUI/OnsenUI/wiki/Upgrade-Guide

Conclusion

That is Onsen UI 1.0. We hope it help you create awesome apps and hope you enjoy using it.

Comments