in ionic how to add a fixed logo bar at top

debugcn Published at Dev

Dinesh

I am just starting with ionic framework for a hybrid app, and stuck right at the gates! I want a fixed-top bar having logos and a search icon; and then the rest of the content consisting of - a context dependent menu followed by the content.

I started with one of the start apps "sidemenu" from ionic website and modified it.

<ion-nav-bar class="logo-bar">
    <button class="button button-clear">
        <img class="pull-left" src="img/YourCompany-trans.png">
    </button>
    <div class="title icon ion-search" ng-click="doSearch()">
    </div>
    <button class="button button-clear">
        <img class="pull-right" src="img/MyCompanyLogo.png">
    </button>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

</body>

But my logo/search bar does not appear at all. If I remove the ion-nav-view then I can visualize it. I have tried other combinations, placing it within the nav-view, using ion-content but I am still stuck.

What's the right way of doing this? Ionic documentation is rather sparse.

Manish Kr. Shukla

ion-nav-view is used for navigation and routing views.

If you actually want to see your headers, you have to do a lot of stuff.

Configure your routes.
Develop corresponding HTML pages / HTML Templates for each route url.
Wire up stuff and run.

HTML :

    <ion-nav-view></ion-nav-view>



    <script id="templates/yourTemplate.html" type="text/ng-template">
      <ion-view view-title="Welcome">
        <ion-content class="padding">
            <!-- Place your HTML content containing header here -->
        </ion-content>
      </ion-view>
    </script>

JS :

    angular.module('ionicApp', ['ionic'])
    .config(function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('yourStateName', {
          url: "/UrlToBeDisplayedInTheBrowser",
          templateUrl: "idThatYouSpecifiedInTheScripTag"
        });
    });

A complete example can be found here

Collected from the Internet

Please contact [email protected] to delete if infringement.