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

../../../_images/tabbar_1.png
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

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)

../../../_images/tabbar_6.png

page1.html

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

../../../_images/tabbar_2.png

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

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

../../../_images/tabbar_5.png

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

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

../../../_images/tabbar_3.png

page3.html

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

../../../_images/tabbar_4.png