Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
104 lines (99 sloc) 4.29 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="mobileui.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content { margin-left:50px}
</style>
</head>
<body class="content">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Getting started</h2>
<p>
MobileUI was created thinking of making your hybrid application <strong>faster</strong> and <strong>smaller</strong>, since you only install what you
are really going to use for UI.
</p>
<p>
Certainly, you will love using it in <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">Progressive Web Apps</a>
and <a href="https://cordova.apache.org/" target="_blank">Apache Cordova Apps</a>.
You can use only the components you want in your projects created with <a href="http://phonegap.com/" target="_blank">PhoneGap</a>,
<a href="http://ionicframework.com/" target="_blank">Ionic Framework</a>, <a href="https://onsen.io/" target="_blank">Onsen UI</a>,
<a href="http://framework7.io/" target="_blank">Framework7</a> and others focused on creating web apps.
</p>
<p>
A rich variety of UI components specially designed for mobile apps. MobileUI provides tabs, side menu, stack navigation and tons of other components
such as lists and forms. Some of the existing components are displayed differently on Android and iOS, with automatic styling that will change the
appearance of the app based on the platform.
</p>
<p>
The Installation is straightforward, but first, you need to install <a href="https://nodejs.org" target="_blank">Node.js</a>.
Then, install Cordova via terminal <strong>npm install -g cordova</strong>(add sudo if you are in Linux).
</p>
<p>
After that, just execute the command in your terminal:
</p>
<pre>npm install -g mobileui</pre>
<p>To check if MobileUI is installed or not, open the terminal and type <strong>mobileui</strong></p>
<h4><strong>Simple Example</strong></h4>
<p>Let's create a Simple Example using MobileUI and Cordova:</p>
<pre>
cordova create apptest
cd apptest
mobileui install template cordova-blank
mobileui install header
mobileui preview
</pre>
<p>Let's check the commands:</p>
<table class="tableDoc">
<tr>
<td>
<code>cordova create apptest</code>
</td>
<td>Create a cordova project</td>
</tr>
<tr>
<td>
<code>cd apptest</code>
</td>
<td> Change the directory to your project</td>
</tr>
<tr>
<td>
<code>mobileui install template cordova-blank</code>
</td>
<td>Clears the sample files created by the Cordova</td>
</tr>
<tr>
<td>
<code>mobileui install header</code>
</td>
<td>For sample we can take header component</td>
</tr>
<tr>
<td>
<code>mobileui preview</code>
</td>
<td>Emulates the app to run in the browser</td>
</tr>
</table>
<p> After that add the below code in index.html </p>
<textarea class="bind-just-code" mode="text/html">
<div class="header purple">
<button class="left icon ion-navicon" name="button"></button>
<h1>Application title</h1>
</div></textarea>
<p>By default, an HTTP server will run on port 8080, but you can change it by passing the <code>--port</code> parameter with the desired port, eg <code>--port 8000</code></p>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>