3. Ons-tabbar with ons-navigator active Tab Problems

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.

Ons-tabbar with ons-navigator active Tab Problems

  • S

    Hi letzs assume i have a tabbar as some kind of navigation:

    <ons-tabbar>
        <ons-tab page="navigator.html icon="fa-home">
        </ons-tab>
        <ons-tab  icon="fa-search" >
        </ons-tab>
        <ons-tab icon="fa-user-md" >
        </ons-tab>            
        <ons-tab icon="fa-qrcode">
        </ons-tab>
    </ons-tabbar>

   <template id="navigator.html">
        <ons-navigator id="myNavigator" page="firstTab.html"></ons-navigator>
      </template>

    I am able to switch the tabs pages with the navigator, but however, the “active tab” is not updated. The active Tab stays always at the first tab, only if i set some “page”-attribute to the tab, but this is not what i want.

    I have some special case, that i only want ot navigate with a navigator and not with the tabs page-attribute. How can i update the “active tab” manually like if i only use "page=“xxxxx.html”?

    THanks and sorry for my bad english.

    0
  • E
    administrators

    Internally, each ons-tab has a radio input which is checked when the tab is active.

    It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.

    e.g. if fa-search is currently selected and you want to change tab to fa-user-md:

    document.querySelector('ons-tab[icon="fa-search"] input').checked = false;
document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;
    0 1 Reply

  • @emccorson said in Ons-tabbar with ons-navigator active Tab Problems png to ico:

    Internally, each ons-tab has a radio input which is checked when the tab is active.

    It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.

    e.g. if fa-search is currently selected and you want to change tab to fa-user-md:

    document.querySelector('ons-tab[icon="fa-search"] input').checked = false;
document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;

    Thank you soooo much, that’s been bugging me for days x

    0