onsen-ui Getting started with onsen-ui

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Remarks

This section provides an overview of what onsen-ui is, and why a developer might want to use it.

It should also mention any large subjects within onsen-ui, and link out to the related topics. Since the Documentation for onsen-ui is new, you may need to create initial versions of those related topics.

Introduction

Onsen UI is an open-source framework that helps you build hybrid apps with native like performance. It can be used along with several well known JavaScript frameworks such as AngularJS (1 & 2), ReactJS and jQuery.

Loading OnsenUI in a project is as easy as writing some standard tags of HTML in your index.html file:

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <!-- load Onsen structure CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
        <!-- load Onsen theme CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
        <!-- load Onsen main Javascript file -->
        <script src="lib/onsen/js/onsenui.js"></script>
        <script>
          ons.ready(function() {
            // Init code here
          });
        </script>
      </head>
      <body>
        <ons-navigator>
          <ons-page>
            Hello World!
          </ons-page>
        </ons-navigator>
      </body>
    </html>
 

ons.ready function is the main function that can safely tell us when Onsen UI initialization is done. Then you can use any of OnsenUI components.



Got any onsen-ui Question?