Page and Component(s)
In Onsen, the whole page should be encoded within the <Page> component.
This page component acts as a container for all the other components.
You can use components like <Button>, <Toolbar> within <Page> component.
Page and associated props
There are many props that can be used within a page component.
The content present inside the page are scrollable. To make it fixed use renderFixed prop
Likewise, to add a toolbar to the page use renderToolbar prop
To specify a particular content styling, use contentStyle
onDeviceBackButton can be used for custom handler on device back button.
For complete list of props used, you can visit Onsen documentation
Toolbar Creation
<Toolbar> Component helps in creating Custom toolbars.
It is used within the <Page> component. It is like a header to the page. In Android devices, it displays as a material design toolbar.
It can be rendered at the top or bottom (using <BottomToolbar>) of the page.
It can include a button or a icon if required using corresponding built-in components.
It mainly holds the side menu icon and the navigation icons like home, back etc.,
Page and Toolbar Creation - Example
Now, it is time to see page component and toolbar component in action.
Try running the following piece of code in : onsen.io playground
This example will render all the elements that are present within the <Page> component and a toolbar with "Fresco Play" text inside the toolbar
var MyPage = React.createClass({
renderToolbar: function() {
return (
<Ons.Toolbar><div className='center'>FRESCO PLAY</div></Ons.Toolbar>
); },
render: function() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<p style={{textAlign: 'center'}}>
WELCOME TO COURSE ON ONSEN UI </p>
</Ons.Page>
); }});
ons.ready(function() {
ReactDOM.render(<MyPage />, document.getElementById('app'));
});
