Document TOP » Samples & Tips » Sample Apps & Templates » Onsen UI Tabbar Navigation

Onsen UI Tabbar Navigation

This is a template using Onsen UI tabbar and navigator.

Tested Environments: Android 4.2.2, iOS 7.1.1

File Components

index.html Startup page (Home page)
navigator.html Navigator page for Page 1
page1.html Page 1
page2.html Page 2
page3.html Page 3
new_page.html New page
styles/app.css Style sheet file of this project

HTML Explanation


index.html is the Startup page. It contains a <ons-tabbar> component which consists of 3 tabs: Home (navigator1.html), Camera (page2.html) and Settings (page3.html) tabs. (See the screenshot below)



page1.html has a line of text (Page 1) and a Push New Page button. (See the screenshot below)


When the Push New Page button is clicked, the New page is shown and pushed into the page stack. In other words, it’s the second page in the page stack after the page 1.


new_page.html has a line of text (New Page) and a Pop Page button. (See the screenshot below)


Either when the Home back button on the top-left corner of the New Page or the Pop Page button is clicked, it will go back to the previous page found in the page stack which, in this case, is the Page 1.


page2.html has only a line of text (Page 2). (See the screenshot below)



page3.html has only a line of text (Page 3). (See the screenshot below)