ionic-frameworkionic-view

How to hide header bar in ionic?

with header :(

I want to get rid of the blue strip at the top.

This is what happens when I use hide-nav-bar="true" or remove the header from html.

without-header

I just want the the tabs to exist without any blue strip above it.

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>
Solution

  • Check this example:

    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>