Onsen UI is…
Onsen UI enriches app users’ mobile experience with natively designed UI elements. It’s perfect for developing hybrid apps using Cordova or developing mobile web apps (also referred to as Progressive Web Apps). For more information on these types of implementation, see Deploy to PWA & Cordova.
Under the hood, Onsen UI consists of three layers:
In a nutshell, Onsen UI simplifies your development, works with any framework, and is future proof!
Interested in a deep dive? Check out our Onsen UI Architecture section.
Here you can try out the majority of Onsen UI’s components in a quick sample demo app (kitchen sink app). The two apps below are actually sharing the same source code but are styled to fit their respective platforms using the Auto Styling feature.
For those interested in the complete list of components, please take a look at the CSS Components and the Web Components.
Onsen UI is fully optimized and tested for the following platforms.
For other platforms, please be aware that some components or features may not work correctly. Please see Old Browser Support for details.
Now that you’re familiar with what Onsen UI is all about, it’s time to start creating your own app. For quicker installation, let’s use the CDN served files.
First, create a file called
index.html and paste the following HTML.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> </head> <body> <ons-button onclick="alert('Hello World!')">Click Me</ons-button> </body> </html>
While this may be rudimentary, this example contains some important aspects of Onsen UI components as below.
<ons-button>component is used. It is our custom tag that represents a button. All Onsen UI branded components have the
onclick), methods and event listeners. Read more in Attributes, Properties, Methods and Events.
Congratulations! You’ve covered all the basics to get started. Now find Onsen UI components (i.e.
<ons-carousel>…) from our collection, and put them in your app. It’s that simple.
Tips on native alert: You may have noticed, default
alert() function does not fit with native app design. Therefore, Onsen UI provides
ons.notification object for dialogs. Try replacing
Even though an app may emulate the visual components of iPhone or Android, the goal of a seamless app is to ensure that touch & feel also meets users’ expectations. That’s where the users feel the “uncanny valley”.
To fill the gap, Onsen UI gives you the ability to simulate things like page transition animations and the ripple effect, and gives genuine and high quality feeling to your app. Such details make a huge difference.
In the above example, there are two pages defined by
<ons-page> component. Then,
<ons-navigator> component provides native-like page transition. If you want to make your app more native-like, please proceed to Fundamentals to learn how to fully utilize the details.
In Onsen UI, everything from visual widgets to small details are carefully crafted to help your application look fully native.
Also check out these resources to get you up and running in no time.