Skip to content
This repository has been archived by the owner. It is now read-only.
Onsen UI - React Components for Hybrid Cordova Apps
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
OnsenUI @ 3fc9873 Update dependencies Oct 11, 2016
demo Fix pull hook example. Sep 14, 2016
dist Update generated files. Oct 26, 2016
docs
scripts release test with new script Jun 1, 2016
src
test
.eslintrc.json
.gitignore
.gitmodules
.npmignore
CHANGELOG.md Update changelog Oct 5, 2016
ISSUE_TEMPLATE.md Add ISSUE_TEMPLATE. Dec 9, 2016
LICENSE
README.md
circle.yml Fix karma tests Jun 20, 2016
docgen.js
githubRelease.js
index.html Fix dialog example Oct 24, 2016
karma.conf.js
package.json Bump version Oct 26, 2016
rollup.config.js
tests.webpack.js
webpack.config.js

README.md

This package has been moved to the main Onsen UI repository.

npm version

Onsen UI - React Components for Cordova/PhoneGap hybrid apps

Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.

Onsen UI is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.

It can be used to build hybrid apps with Cordova and PhoneGap but can also run in the browser.

We have build a Tutorial Website where you can see live examples of OnsenUI without installing it. If you find any issues, feel free to report at our OpenSource Repository. Also pull requests are welcome.

To learn how to use these components, please refer to the documentation. You can also check out our kitchensink example to learn how to use this or you can click here for a quick demo.

We also have a highly engaged community that will be available to answer your questions.

The main Onsen UI repo contains the CSS and core JS library for these components. Please star it if you like it!

Using Onsen UI with npm

The easiest way to use these components is by installing them through npm and using a CommonJS module system such as browserify and webpack (the kitchensink example above is using browserify).

You need to install react, react-dom, onsenui and react-onsenui. You probably also need to add Babel with the react preset.

Now you can import the necessary libraries in your code:

var React = require('react');
var ReactDOM = require('react-dom');

require('onsenui'); // This needs to be imported to bootstrap the components.
var Ons = require('react-onsenui');

var MyPage = React.createClass({
  renderToolbar: function() {
    return (
      <Ons.Toolbar>
        <div className='center'>Onsen UI</div>
      </Ons.Toolbar>
    );
  }

  render: function() {
    return (
      <Ons.Page renderToolbar={this.renderToolbar}>
        <p>This is Onsen UI!</p>
      </Ons.Page>
    );
  }
});

ReactDOM.render(<MyPage />, document.getElementById('app'));

Take a look at the kitchensink example for more complex code.

Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.

Onsen UI is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.

It can be used to build hybrid apps with Cordova and PhoneGap but can also run in the browser.

To learn how to use these components, please refer to the documentation. You can also check out our kitchensink example to learn how to use this or you can click here for a quick demo.

The main Onsen UI repo contains the CSS and core JS library for these components. Please star it if you like it!

Contribution

We always welcome contributions by either opening an issue or doing a pull request.

To test this repo in the current state of master, one needs to first clone this repo recursivly (it binds onsenui in a specific version) and run npm install in both the main folder and OnsenUI folder and finally build OnsenUI.

$ git clone --recursive git@github.com:OnsenUI/react-onsenui.git
$ npm install
$ cd OnsenUI; npm install
$ npm install -g gulp # install gulp if not already installed
$ gulp build

After these changes one can run our demo examples with npm run dev and open a brower at port 9000.

You can’t perform that action at this time.