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> <link href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script></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><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