3. Hidding tabbar

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.

Hidding tabbar

  • K

    Hi,
    I am using tabbar as main navigational element over my application. I have tabbar defined in my index.html and use it to switch over pages. But there are pages in my application, on which I want to hide the tabbar. So I checked the documentaion and found hide-tabs attribute. But when I set it on true, nothing is happening. I even tried to implicitly set it to true but still, tabbar seems imune. What am I missing?
    Here are code snippets:
    Index.html:

    <ons-tabbar hide-tabs="true" id="tabbar">
        <ons-tab  active="true" page="view/html/main-page.html" label="Aktivity" icon="ion-ios-settings-strong" >
      </ons-tab>
        <ons-tab page="view/html/user-detail-page.html" label="Profil" icon="ion-ios-paper-outline" >
        </ons-tab>
    </ons-tabbar>

    main-page.html

    <ons-navigator class="pageNavigator">
    <ons-page id="main-page">
        .... 
    </ons-page>
</ons-navigator>
    0 1 Reply
  • 侍

    @kukacdav That must be a version 1 attribute. Try using:

    document.getElementById('tabbar').setTabbarVisibility('false');

    https://onsen.io/v2/docs/js/ons-tabbar.html

    0
  • K

    @munsterlander Thanks for reply. Unfortunately Iam using Monaca Cloud IDE, which according to Monaca Docs does not support Angular 2, required for version 2 of Onsen. Any solution for version 1? Or recomendation for another free IDE that might support this?

    0 1 Reply
  • 侍

    @kukacdav Can you help me understand your design environment? If you are using Cloud IDE, then that code will 100% work as you can’t be using Angular 2 and more than likely using Onsen 2.0 unless you specifically chose to use v1 out of the templates.

    0
    K
     1 Reply
  • K

    @munsterlander : I was assuming, that onsen v2 wont be working correctly with Cloud IDE, based on information provided by following page: https://docs.monaca.io/en/onsenui/
    So now I am bit confused about the meaning, since every project is using implicitly ver. Does it mean, that onsen v2 will be working, but some features that require Angular2 wont?

    I have tried your code, running it at page init event, together with attaching event listeners. But no go, tabbar still visible. Any idea what may I be doing wrong?

    0 1 Reply
  • Onsen UI

    @kukacdav Onsen UI v2 is framework agnostic, it does not require Angular 2. You can use it with Angular 1 or just pure JavaScript (or React, Vue.js, Knockout, etc).
    What @munsterlander pointed out is that in Onsen UI v2 you need to use setTabbarVisibility(false) method, unlike in Onsen UI v1. It doesn’t matter if you use Angular 1 or 2.

    If you started recently with Onsen UI, chances are you are using Onsen UI v2. Otherwise, you should upgrade :smile:

    0
    K
     1 Reply
  • K

    @Fran-Diox Thanks for clarification. I am new to Onsen UI and I am still unable to hide the tabbar - in the meantime I wrote mine own tabbar, but I am experiencing some issues in Monaca debugger, so after all I would like to solve the issue.

    I simplified the example to the following:

    <!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';

      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
        page.querySelector('#magic-button').onclick = function(){console.log("click");document.getElementById('tabbar').setTabbarVisibility('false');};

      }
    });
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto" id="tabbar">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
        <ons-button id="magic-button">Hide tabbar</ons-button>

      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>
</html>

    The tabbar is still visible no mather what. Any idea what am I doing wrong?
    Thanks a lot.

    0 1 Reply
  • 侍

    @kukacdav Here is a working codepen. Also, since you are setting a boolean, try not using the single quotes as you are sending a string.

    0
    K
     1 Reply
  • K

    @munsterlander Thanks a lot, I will keep that in mind. :)

    0
  • K

    @munsterlander
    I have additional question about this pattern. I wanted to add a login page. Therefore I moved the content of the index.html into new main-page.html and in index.html created a simple login page, looking pretty much like following:

    <html>
<head>...</head> 
<body>
<ons-navigator id="main-navigator">
    <ons-row>
            <ons-input class="login-input-field" id="login-username" ></ons-input>        
    </ons-row>
    <ons-row>
        <ons-input class="login-input-field" id="login-password" type="password" ></ons-input>
    </ons-row>
    <ons-button modifier="large--cta" onclick="login()" id="login-button">Login</ons-button>   
</ons-navigator>
</body>
</html>

    My login function pushes new page using main-navigator. The main-page is following:

    <ons-page id="main-multi-page">
  <ons-tabbar id="tabbar">

        <ons-tab icon="ion-ios-paper-outline" label="Profil" page="user-detail-page-template" active> </ons-tab>
        <ons-tab icon="ion-person-stalker" label="Kontakty" page="phone-contacts-page-template"> </ons-tab>
        <ons-tab icon="ion-ios-settings-strong" label="Aktivity" page="invite-friend-page-template" ></ons-tab>
</ons-tabbar>


<!--           FIRST PAGE              -->
<ons-template id="user-detail-page-template">
<ons-page id="user-detail-page">
    <ons-list>
        <ons-list-header>Detail uživatele</ons-list-header>
        <ons-list-item>
            <div class="left">Jméno</div>
            <div class="right" id="username-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Telefon</div>
            <div class="right" id="phone-number-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Email</div>
            <div class="right" id="email-line"></div>
        </ons-list-item>
        <ons-list-item>
            <div class="left">Facebook</div>
            <div class="right" id="facebook-contact-line"></div>
        </ons-list-item>
    </ons-list>
    </ons-page>
</ons-template>

<!-- SECOND PAGE TEMPLATE -->

<ons-template id="phone-contacts-page-template">
    <ons-page id="phone-contacts-page">
    <ons-toolbar>
        <div class="center">Kontakty</div>
    </ons-toolbar>
    <ons-list id="contact-list"></ons-list>
    <ons-row class="contact-toolbar">
        <ons-col class="center-block">
            <ons-icon icon="ion-search" size="40px"></ons-icon>
            <p class="contact-button-label">Vyhledat kontakt</p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon icon="ion-person-add" size="40px"></ons-icon>
            <p class="contact-button-label">Vytvořit kontakt</p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon icon="ion-star" size="40px"></ons-icon>
            <p class="contact-button-label">Nastavit oblíbené</p>
        </ons-col>
    </ons-row>
</ons-page>
</ons-template>

<!--               THIRD PAGE VIEW                  -->
<ons-template id="invite-friend-page-template">
<ons-page id="invite-friend-page">
    <ons-toolbar>
        <div class="center">Pozvat kamaráda</div>
    </ons-toolbar>
    <div class="invite-friend-block">
        <ons-icon size="70px" icon="ion-person-add" ></ons-icon>
        <h1 class="invite-friend-header">
            Pozvi kamaráda k používání Bill Me
        </h1>
        <p>
            Nasdílej pozvánku kamarádovi přímo nebo skrze kontakty aplikace</p>
    </div>  
    <ons-row>
        <ons-col class="center-block">
            <ons-icon size="50px" icon="ion-social-facebook"></ons-icon>
            <p>
                Sdílej pozvánku
            </p>
        </ons-col>
        <ons-col class="center-block">
            <ons-icon size="50px" icon="ion-person-stalker"></ons-icon>
            <p>
                Vyber kontakt
            </p>
        </ons-col>
    </ons-row>
</ons-page>
</ons-template>
</ons-page>

    Now what happens: when i look at page in monaca IDE, everything works like charm - I go through login page to main page, where first tab is set as active. But when i run the same code using monaca debugger, I go through login page and land on the last template defined in main-page.html, with no tab visible at all. It seems as if debugger goes through the main-page and doesnt apply tab as I would expect, but it takes into account the last template defined in HTML file.

    What I am wondering is, whether my pattern is correct and Monaca Debugger has an issue, or whether I am doing something wrong. Thanks in advance, I spent hours trying to solve this, but nothing seems to work for me…

    0 1 Reply
  • 侍

    @kukacdav You have a few issues with the code you posted. Templates should not be nested in a page. I would code it a bit different, but that may fix your issue. If not, give me a couple of hours and I will take your exact code and make it work.

    Edit: Ok, here is a working codepen: https://codepen.io/munsterlander/pen/bqeXZJ

    So all of the code can be placed in index.html. You don’t need to split everything up as you are. Normally, instead of calling the template id, something like login-template, you should name it login-template.html. This way, you can put all of the template code (just not the template tag) into an actual html file called login-template.html and everything will work with separate files. Either way, this should solve your issues.

    3
    K
     1 Reply
  • K

    @munsterlander
    Magnificent! Your solution seems to works exactly as I intended. Much appreciate your help!

    0
onsen ui 110 ons-tabbar 17 hide 2