in ionic how to add a fixed logo bar at top -
i starting ionic framework hybrid app, , stuck right @ gates! want fixed-top bar having logos , search icon; , rest of content consisting of - context dependent menu followed content.
i started 1 of start apps "sidemenu" ionic website , 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 logo/search bar not appear @ all. if remove ion-nav-view
can visualize it. have tried other combinations, placing within nav-view, using ion-content still stuck.
what's right way of doing this? ionic documentation rather sparse.
ion-nav-view used navigation , routing views.
if want see headers, have lot of stuff.
configure routes.
develop corresponding html pages / html templates each route url.
wire stuff , 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 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 found here
Comments
Post a Comment