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.
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!
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.