3. Playground; Twitter Model - how to navigate using ons-splitter-side?

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.

Playground; Twitter Model - how to navigate using ons-splitter-side?

  • A

    Hi there!

    This I assume is extremely basic, but yet a puzzle (to me, at least).

    I’m working off this example;
    https://onsen.io/playground/?framework=vanilla&category=user interface tutorials&module=twitter_model

    I basically want to keep all the menues (splitter-side, toolbar and tabbar).
    The above example shows very nice how to use the tabbar for navigation - without destroying the toolbar.

    How to navigate from the splitter-side and toolbar?
    Those examples are not included - and despite reading a LOT of documentation - I have had no luck getting it to work.
    At all.

    I can call a .load() on the ons-splitter-content, but that’ll just overwrite toolbar and tabbar.
    What happens when clicking a tab - and how do I achieve this, but from the toolbar and splitter-side?

    Thank you :-)

    0
  • E
    administrators

    The reason the toolbar and tabbar get destroyed when you call load on ons-splitter-content is that everything defined inside ons-splitter-content gets replaced by load. Since the tabbar and toolbar are both defined inside ons-splitter-content they get removed when load is called.

    The answer to your problem depends on whether you want the tabbar to disappear or not when the user presses an item in the side menu.

    If you don’t want the tabbar to disappear, then what you want is for a new tab to be shown. If you do want the tabbar to disappear, then what you want is for a new page to be shown.

    To load a new tab, instead of calling ons-splitter-content.load, call ons-tabbar.setActiveTab. For example:

    const load = id => {
  const tabbar = document.querySelector('ons-tabbar');
  const menu = document.querySelector('ons-splitter-side');
  
  tabbar.setActiveTab(2).then(menu.close());
}

    To load a new page, you need to wrap the inside of ons-splitter-content inside ons-navigator. For example,

    <ons-splitter-content>
  <ons-navigator>
    <ons-page>...</ons-page>
  </ons-navigator>
</ons-splitter-content>

    Then you can call ons-navigator.pushPage when the user presses an item in the side menu.

    ons-tabbar.setActiveTab: https://onsen.io/v2/api/js/ons-tabbar.html#method-setActiveTab
    ons-navigator.pushPage: https://onsen.io/v2/api/js/ons-navigator.html#method-pushPage

    0
  • A

    Exactly the hint I needed!

    Thank you very much :-)

    0