Onsen UI Tabbar Navigation¶
Table of Contents
||Startup page (Home page)|
||Navigator page for Page 1|
||Style sheet file of this project|
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)
navigator.html stores a navigator element (
<ons-navigator> tag) which manages the page navigation backed by page stack, horizontally. As shown in the
navigator.html file, the
page1.html is used in a navigator element. In other words, the Page 1 is the first page in the page stack.
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.