This is a minimum template for Onsen UI application.
||Home screen (Startup page)|
||Style sheet file of this project|
index.html is the Startup page. It contains the page navigation
<ons-navigator> which is a page stack manager and transition animator.
page="page1.html" denotes that
page1.html is the first
page of the stack, in other words, it is the first page loaded when the
ons-navigator, you can also use
ons-navigatorto define the first page of the stack. In case of both options are used, the attribute page overwrites the
ons-pagecomponent. In other words, the page from the page attribute is the first page of the stack while the
ons-pagecomponent is ignored. For more information please refer to Onsen UI Documentation .
page1.html has a line of text (
Page 1) and a Push Page 2 button. (See
the screenshot below)
When the Push Page 2 button is clicked, the Page 2 is shown horizontally with a Welcome back button on top-left of the page. In other words, the Page 2 is currently the second page in the page stack. When the Welcome back button is clicked, it goes back to the previous page which, in this case, is the Page 1.
page2.html has only a line of text (
Page 2). (See the screenshot