<ons-page id="page-newHome" on-device-backbutton="askExit()" sliding-menu-ignore="true">
<ons-tabbar var="homeTab">
<ons-tabbar-item page="page0.html" label="TAB0" icon="search" active="true"></ons-tabbar-item>
<ons-tabbar-item page="page1.html" label="TAB1" icon="heart-o"></ons-tabbar-item>
<ons-tabbar-item page="page2.html" label="TAB2" icon="comment-o"></ons-tabbar-item>
<ons-tabbar-item page="page3.html" label="TAB3" icon="user-o"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
When I call homeTab.setActiveTab(3) Why it said Uncaught ReferenceError: homeTab is not defined
Related
I am trying to create a simple app that has a tabbar and tool bar together on a single page, but every time I create a toolbar, it is placed in the front of the content with no formatting. I have the tabbar, that looks like this:
<ons-tabbar>
<ons-tab page="partials/info.html" active="true" icon="fa fa-bar-chart-o" label="Info">
</ons-tab>
<ons-tab page="partials/history.html" active="true" icon="fa fa-info-circle" label="History">
</ons-tab>
<ons-tab page="partials/contact.html" active="true" icon="fa fa-user" label="Contact">
</ons-tab>
<ons-tab page="partials/settings.html" active="true" icon="ion-gear-a" label="Settings">
</ons-tab>
</ons-tabbar>
The tabbar is completely functional, but when I try to put a ons-tool bar right above it, it bugs out with wrong text formatting and all the content of the partials BEHIND the toolbar:
<ons-toolbar fixed-style>
<div class="left">
Brand Name
</div>
<div class="right">
Info 1: dsadas
Info 2: adsadas
</div>
</ons-toolbar>
Is there any way to correct go about doing this? Alternatively, I really don't need the full functionality of a tool bar (though it would be nice); all I really need is just a "strip" of height: 30px and width: 100% to be statically placed at the top of the app to put some info or numbers. When I use ons-page with my partials, it seems to just be covered up the entire time....
Hi Onsen UI community,
I have used ons-tabbar as follows:
<ons-page id="main-page" ng-controller="MainController">
<ons-tabbar>
<ons-tab page="main_1.html" label="Dash" icon="smile-o" active="true"></ons-tab>
<ons-tab page="main_2.html" label="Meet" icon="group"></ons-tab>
<ons-tab page="main_3.html" label="Feat" icon="bullseye"></ons-tab>
<ons-tab page="main_4.html" label="Mee" icon="user"></ons-tab>
<ons-tab page="main_5.html" label="Set" icon="gear"></ons-tab>
</ons-tabbar>
</ons-page>
And inside main_1.html, I want to use ons-navigator like:
<ons-navigator title="Dashboard" var="nav" page="dashboard.html"></ons-navigator>
<ons-template id="dashboard.html">
<ons-page id="dashboard-page">
<ons-button ng-click="nav.pushPage('detail.html', { animation: 'slide' })">
GoTo Detail
</ons-button>
</ons-page>
</ons-template>
So far, I can use the above codes without any problem. However, there is always a flush occurring after I clicked on 'GoTo button' and when the detail.html page is loaded.
I wonder if there is any better way to do so without any flush on the page.
I think I finally found the cause. What caused the blink was nested <ons-page>s, I suppose. OnsenUI doesn't seem to allow nested <ons-page>s after all. Please try placing <ons-tabbar> at root, instead of under <ons-page>.
I am currently building my first cordova app with onsen ui. Looks promising so far! But I ran into a problem I could not solve and I could not find the answer.
I hope it is a beginner question and can be solved easily by someone with more experience with onsen.
I want to have a sliding-menu and still the "usual" navigation on the main screen.
Two different approaches I tried:
1)
<ons-navigator var="app.navi">
<ons-page>
<ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
...
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page ng-controller="BooksCtrl">
// Navigation in controller:
app.navi.pushPage("new_action.html", {
animation: "lift"
});
</ons-page>
</ons-template>
Result: No error messages. But once I navigate from the first main-page to another page I can't open the sliding menu. (Same as in the official demo found in github repo called navigator_sliding-menu)
2)
<ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
...
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-navigator animation="slide" var="app.navi">
<ons-page ng-controller="BooksCtrl">
// Navigation in controller:
app.navi.pushPage("new_action.html", {
animation: "lift"
});
</ons-page>
</ons-navigator>
</ons-template>
Same as here: http://codepen.io/argelius/pen/ogXGeV
So the navigation element is moved to the first main-page.
Result: I can navigate through the app (via pushPage in controller) and I can open the menu from every page. But once I click a link in the menu any pushPage calls result in the error messages:
Uncaught TypeError: Cannot read property '$$phase' of null
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization.
Any ideas?
Thank you in advance
Try having the <ons-sliding-menu> in the index.html. For example have your your index would have the entire body of:
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50">
</ons-sliding-menu>
Then on your page1.html where you want to use the navigation. Use your
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
and finally if you want any end of trail pages. Use your navigator to the end page. v-page2.html-v
<ons-navigator var="app.navi">
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", {
animation: "lift"
})">
Continue last story
</ons-list-item>
<ons-navigator>
To return back. Just use a ng-click="app.navi.popPage()" But like DTFagus said. Using the navigator is better for end pages.
I have a Split View defined as:
<ons-split-view
var="noticies_split"
secondary-page="secundaria"
main-page="principal"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
I get a "Page is not found: principal" if I define both templates consecutively, i.e.:
<ons-template id="secundaria">
</ons-template>
<ons-template id="principal">
</ons-template>
If I define a third template between them, it works fine, i.e:
<ons-template id="secundaria">
</ons-template>
<ons-template id="aux">
</ons-template>
<ons-template id="principal">
</ons-template>
When defining more than 2/3 templates, I get the same error for those in even positions, but not for the odd ones.
Anyone can help?
I posted an issue on github project: ISSUE #392
I'm using onsenui - v1.2.1 - 2014-12-01
I got same result with onsen-tabbar.
I fixed it by moving onsen-template inside onsen-tabbar tag
Example:
<ons-tabbar>
<div style="display:none">
<ons-template id="page1.html">
</ons-template>
<ons-template id="page2.html">
</ons-template>
<ons-template id="page3.html">
</ons-template>
</div>
<ons-tab page="page1.html" active="true">
</ons-tab>
<ons-tab page="page2.html">
</ons-tab>
<ons-tab page="page3.html">
</ons-tab>
</ons-tabbar>
Hope it can solve your problem.
Cheers...
I'm using ons-tabbar and it seems to force the icon size. Any ideas how to make the icon size different?
<ons-tabbar position="top">
<ons-tabbar-item icon="fa-home" page="home.html" active="true"></ons-tabbar-item>
<ons-tabbar-item icon="fa-th-large" page="list.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-search" page="search.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-bell" page="shared.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-user" page="user.html"></ons-tabbar-item>
</ons-tabbar>
Making the content of the item an icon works but wont show any active states since its the wrong element now.
<ons-tabbar-item page="home.html" active="true"><ons-icon icon="fa-home" size="20px"></ons-icon></ons-tabbar-item>
You could use the following CSS to change the font-size of the icons:
ons-tabbar-item ons-icon {
font-size: 20px !important;
}
It will override the standard size and change the icon size to 20px.
Please look at this example:
http://codepen.io/argelius/pen/PwPzzW