onsen-ui Getting started with onsen-ui
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Blib%2Fonsen%2Fcss%2Fonsenui.css%26quot%3B%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520load%2520Onsen%2520theme%2520CSS%2520file%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520rel%3D%26quot%3Bstylesheet%26quot%3B%2520href%3D%26quot%3Blib%2Fonsen%2Fcss%2Fonsen-css-components.css%26quot%3B%2F%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520load%2520Onsen%2520main%2520Javascript%2520file%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Blib%2Fonsen%2Fjs%2Fonsenui.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ons.ready(function()%2520%257B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2F%2F%2520Init%2520code%2520here%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257D)%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bons-navigator%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bons-page%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Hello%2520World!%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fons-page%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fons-navigator%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> 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.
