wie Kopfleiste in ionischen ausblenden?

Ich möchte den blauen Streifen an der Spitze loswerden.

Das passiert, wenn ich hide-nav-bar="true" benutze oder den Header aus dem HTML entferne.

Ich möchte nur die die Tabs oben es ohne blauen Streifen existieren.

Irgendwelche Hilfe ??

Tabs:

<ion-tabs class="tabs-striped tabs-color-positive" > 
    <ion-tab icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> 
     <ion-nav-view name="home-tab" > 
     </ion-nav-view> 
    </ion-tab> 
    <ion-tab icon-on="ion-ios-keypad" icon-off="ion-ios-keypad-outline" ui-sref="tabs.app"> 
     <ion-nav-view name="app-tab"> 
     </ion-nav-view> 
    </ion-tab> 
    <ion-tab icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="tabs.setting"> 
     <ion-nav-view name="setting-tab"> 
     </ion-nav-view> 
    </ion-tab> 
</ion-tabs>

Home:

<ion-view> 
<ion-header-bar class="bar-positive"> 
<h1 class="title">HOME</h1> 
</ion-header-bar> 
<ion-content class="padding"> 
some html.... 
</ion-content> 
</ion-view>

Quelle

2016-01-28 Leonardo Da Codinchi

Können Sie Code dafür zeigen? –

@PareshGami: Ich habe die Frage aktualisiert –

prüfen dieses Beispiel:

angular.module('ionicApp', ['ionic']) 
 

 
.config(function($stateProvider, $urlRouterProvider) { 
 

 
    $stateProvider 
 
    .state('tabs', { 
 
     url: '/tab', 
 
     abstract: true, 
 
     templateUrl: 'templates/tabs.html' 
 
    }) 
 
    .state('tabs.home', { 
 
     url: '/home', 
 
     views: { 
 
     'home-tab': { 
 
      templateUrl: 'templates/home.html' 
 
     } 
 
     } 
 
    }) 
 
    .state('tabs.app', { 
 
     url: '/app', 
 
     views: { 
 
     'app-tab': { 
 
      templateUrl: 'templates/app.html' 
 
     } 
 
     } 
 
    }) 
 
    .state('tabs.setting', { 
 
     url: '/setting', 
 
     views: { 
 
     'setting-tab': { 
 
      templateUrl: 'templates/setting.html' 
 
     } 
 
     } 
 
    }); 
 

 
    $urlRouterProvider.otherwise('/tab/home'); 
 

 
});

<html ng-app="ionicApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>Tabs Example no NAV BAR</title> 
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body> 
 
    <ion-nav-bar></ion-nav-bar> 
 
    <ion-nav-view animation="slide-left-right" hide-nav-bar="true"></ion-nav-view> 
 

 
    <script id="templates/tabs.html" type="text/ng-template"> 
 
    <ion-view > 
 
     <ion-tabs class="tabs-striped tabs-color-positive tabs-top"> 
 
     <ion-tab icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> 
 
      <ion-nav-view name="home-tab"> 
 
      </ion-nav-view> 
 
     </ion-tab> 
 
     <ion-tab icon-on="ion-ios-keypad" icon-off="ion-ios-keypad-outline" ui-sref="tabs.app"> 
 
      <ion-nav-view name="app-tab"> 
 
      </ion-nav-view> 
 
     </ion-tab> 
 
     <ion-tab icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="tabs.setting"> 
 
      <ion-nav-view name="setting-tab"> 
 
      </ion-nav-view> 
 
     </ion-tab> 
 
     </ion-tabs> 
 
    </ion-view> 
 
    </script> 
 

 
    <script id="templates/home.html" type="text/ng-template"> 
 
    <ion-view title="Home" hide-nav-bar="true"> 
 
     <ion-content padding="true"> 
 
     <p>Test</p> 
 
     </ion-content> 
 
    </ion-view> 
 
    </script> 
 

 
    <script id="templates/app.html" type="text/ng-template"> 
 
    <ion-view hide-nav-bar="true"> 
 
     <ion-content padding="true"> 
 
     <h3>Create hybrid mobile apps with the web technologies you love.</h3> 
 
     <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p> 
 
     <p>Built with Sass and optimized for AngularJS.</p> 
 
     </ion-content> 
 
    </ion-view> 
 
    </script> 
 
    
 
    <script id="templates/setting.html" type="text/ng-template"> 
 
    <ion-view hide-nav-bar="true"> 
 
     <ion-content padding="true"> 
 
     <h3>setting</h3> 
 
     <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p> 
 
     <p>Built with Sass and optimized for AngularJS.</p> 
 
     </ion-content> 
 
    </ion-view> 
 
    </script> 
 

 
</body> 
 

 
</html>

Quelle

2016-01-28 11:02:03 beaver

Ich verstehe Ihren Beitrag nicht. Du solltest es erklären – EduLopez

Einfach dort ist das Attribut 'verstecken-nav-bar' auf _" true "_ auf' 'Element und auf jedem' 'gesetzt. Außerdem ist es wichtig, eine ' 'anzugeben, auch wenn sie leer ist. – beaver

Überprüfen Sie diese http://codepen.io/beaver71/pen/zNWRJV, wo ich die Zeile '' – beaver

Benutzer hide-nav-bar="true" in der Ansicht für diesen Controller

Quelle

2017-05-11 08:33:20

kommentierte Dies sollte die akzeptierte Antwort sein. Sie können sogar Bedingungen/Scope-Variablen übergeben, d. H. "Hide-nav-bar =" userLoggedIn "' –

wie Kopfleiste in ionischen ausblenden?

Antwort

Verwandte Themen