Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Programmatically set active tab of ons-tabbar
-
My AngularJS app is using a tabbar design with 3 tabs.
<ons-tabbar position="auto" var="tbrView"> <ons-tab page="tab1.html" label="Tab 1" active></ons-tab> <ons-tab page="tab2.html" label="Tab 2"></ons-tab> <ons-tab page="tab3.html" label="Tab 3"></ons-tab> </ons-tabbar>
It has a configuration settings
ons-page
that allows the user to set the defaultons-tab
to be set active each time the app is started and each time theons-tabbar
on the mainons-page
is opened.// index.js this.defaultTab = '0'; // Can be 0, 1 or 2.
<!-- settings.html --> <ons-list-item tappable> <label class="left"> <ons-radio name="tab1" input-id="tab1" value="0" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(0)"></ons-radio> </label> <label for="tab1" class="center"> Tab 1 </label> </ons-list-item> <ons-list-item tappable> <label class="left"> <ons-radio name="tab2" input-id="tab2" value="1" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(1)"></ons-radio> </label> <label for="tab2" class="center"> Tab 2 </label> </ons-list-item> <ons-list-item tappable> <label class="left"> <ons-radio name="tab3" input-id="tab3" value="2" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(2)"></ons-radio> </label> <label for="tab3" class="center"> Tab 3 </label> </ons-list-item>
Here’s the problem. I do not know where is the right place to get the tab bar to set the right tab.
I have tried the following:
<ons-tabbar position="auto" var="tbrView" ons-show="tbrView.setActiveTab(app.defaultTab)">
This seems to make the tab bar keeps flashing whenever it is visible. Also the underline of the active tab is not rendered properly.
ons-show
is repeatedly triggered as long as the tab bar is visible even when the user is not interacting with it, and the page has loaded fully.<ons-tabbar position="auto" var="tbrView" ons-init="tbrView.setActiveTab(app.defaultTab)">
ons-init
is only run once upon app initialization I believe. Subsequently if I set the setting in the app and return to the page, theons-init
is not fired to switch the tab when the page is reopened.ons-post-change
andons-pre-change
are only triggered if the user tap on another tab, so they are not useful.Where is the right place to set the active tab then?
-
@wetfeet
init
andshow
are page events, not tab events. You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that oninit
event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).
-
@Fran-Diox said:
@wetfeet
init
andshow
are page events, not tab events.I checked the reference and
ons-tabbar
has these attributes. I thought the events are specific to theons-tabbar
component itself.I believe similarly
ons-page
also has theons-init
,ons-show
,ons-hide
attribute. sourceYou are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on
init
event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).
-
@wetfeet They are just handlers for page events. This is useful if you want to do the same thing for all the pages inside a tabbar or a navigator, so you don’t need to specify
ons-init
in every single page.
-
@Fran-Diox Hi , I am trying to create my angular js onsen app that it has a navigator and 2 template that first template has got side and other tabbar inside itself . i must say that i am creating dynamic them . i know that addition to navigator there are 2 inner navigation for side and tabbar . so my question is how can i route between ons-pages that exist inside templates . for example i am in settings page in tabbar that it has a button for navigato to home page that exist in side menu content .