How to disable/hide Tabstrip in a view

2 posts, 0 answers
  1. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 11 Jun 2018 Link to this post

    Hello 

    I'm pretty new to KendoUI Mobile. I would like to create a hybrid mobile app. So far I'm doing good just struggle with something simple:

    I would like to show initially a login/register screen (view login) without any pre-defined Tabstrip. After successful login the app should switch to show a Tabstrip connected with 3 other views (start, map, settings).

    What is the "official" way to not show the Tabstrip on login view or how to I tell the Tabstrip to be only present on not visible login view?

    Below a fully working example of how far I came. Setting the "initial" value to "login" would show the login view WITH the (unwanted) Tabstrip.

    view login: represents the view that should NOT show the Tabstrip
    -> after successful login switch to show Tabstrip with initiall shown view "start"

    <!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>
     
     
     
    </head>
     
    <script>
        $(document).ready(function() {
     
            // var app = new kendo.mobile.Application();
            var app = new kendo.mobile.Application($(document.body), {
                skin: 'flat',
                transition:'slide',
                initial: "start" // Set to "login" will show the Tabstrip as well
            });
     
        });
    </script>
     
     
    <body>
     
    <!-- View login -->
    <div id="login" data-role="view" data-layout="default">Register here</div>
     
     
    <!-- View start -->
    <div id="start" data-role="view" data-layout="default">
        <span>hello start!</span>
    </div>
     
    <!-- View map -->
    <div id="map" data-role="view" data-layout="default">Hello map!</div>
     
    <!-- View settings -->
    <div id="settings" data-role="view" data-layout="default">Hello settings!</div>
     
    // Tabstrip should now be visible on view "login"
    <section data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar">My App</div>
        </header>
     
        <!--View content will render here-->
        <footer data-role="footer">
     
            <div data-role="tabstrip">
                <a href="#start">Start</a>
                <a data-icon="globe" href="#map">Map</a>
                <a data-icon="settings" href="#settings">Settings</a>
            </div>
     
        </footer>
    </section>
     
     
    </body>
    </html>

     

    Probably a simple question and I just need to know the official way how to solve this. 

    Regards

     

     

  2. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 12 Jun 2018 in reply to Tayger Link to this post

    Found it in between. They key/solution are Layouts

    Regards

Back to Top