I want to have in my app the same header(with Back button and other custom buttons) on each page.
I tried to define a custom ion-nav-bar in index.html as following:
<html>
...
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body> </html>
and all the other pages looks like this:
<ion-view view-title="PageN">
<ion-content>
<ion-list>
<ion-item ng-repeat="article in articles" href="#/app/articles/{{article.id}}">
{{article.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
After I launched the application, my custom navbar is hidden. I can see only default navbar.
How to customize the default navbar or how to replace it with a custom one?
I already tried some solutions including header but without success.
Anyone?
Related
I am trying to develop an ionic application like screenshot which I put here.
But there is something that I want to know about google map, or whatever the answer is it.
as you see, I opened the sidebar.the thing that I want to do is moving the map during this situation.
is it posible ? thanks in advance..
this is my map.html page.
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-pinpoint" ng-click="goster()"></button>
</ion-nav-buttons>
<ion-content>
<div class="mapWrap" data-tap-disabled="true">
<ng-map center="{{konum.lat}},{{konum.lon}}"
on-click="hideInfo()"
disable-default-u-i="true"
zoom="15">
</div>
</ion-content>
here is my menu.html page.
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content >
</ion-content>
</ion-side-menu>
</ion-side-menus>
How to force Ionic to show only menu icon?
In Android, I only want to show menu icon for every page. However, in IOS, I want standard navigation (i.e. back button for inner pages).
Is it possible?
Any help is appreciated.
Edit:
Menu.html
<ion-side-menus enable-menu-with-back-views="isAndroid">
<ion-side-menu-content >
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="featureContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
...
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home.html
<ion-view hide-back-button="isAndroid">
<ion-content class="home">
...
</ion-content>
</ion-view>
you can use ionic.Platform:
$scope.isIOS = ionic.Platform.isIOS();
for example:
<ion-nav-bar class="homler-nav-bar-with-tabs transparent opposite-direction">
<ion-nav-back-button ng-show="isIOS" class="button-icon icon-top_button_back light">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button ng-if="isIOS" class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<button ng-if="!isIOS" style="display: block" class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
I am trying to get the nav bar to become transparent in a one view. However I'm having trouble doing that.
Here's my menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" ng-class="clear">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here's my menu controller
$rootScope.$on('noNavBar', function(){
$scope.clear = 'bar-light';
console.log($scope.clear);
});
Here's the css
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; or transparent, or background:none
}
.scroll-content {
overflow: visible !important;
}
Is it because the nav bar is cached?
If you need to hide nav-bar in a specific view use hide-nav-bar="true" inside <ion-view>.
If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:
<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>
Here is an example: http://codepen.io/beaver71/pen/XXeydY
Using the ionic framework I'm trying to have an abstract view that contains a nav button, however it does not seem to work:
Index.html
<ion-nav-bar align-title="left" class="bar-stable"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
Abstract view:
<script id="menu.html" type="text/ng-template">
<ion-view cache-view="false">
<ion-nav-buttons side="right">
<button class="button button-icon ion-more"></button>
</ion-nav-buttons>
<ion-nav-view></ion-nav-view>
</ion-view>
</script>
Page 1:
<script id="page1.html" type="text/ng-template">
<ion-view cache-view="false" title="Page 1">
<ion-content>
<h1>This is page 1</h1>
<a ui-sref="page2">Go to page 2</a>
</ion-content>
</ion-view>
</script>
Page 2:
<script id="page2.html" type="text/ng-template">
<ion-view cache-view="false" title="Page 2">
<ion-nav-buttons side="right">
<button class="button button-icon ion-more"></button>
</ion-nav-buttons>
<ion-content>
<h1>This is page 2</h1>
<a ui-sref="page1">Go to page 1</a>
</ion-content>
</ion-view>
</script>
Full code pen: http://codepen.io/anon/pen/XJxoLb
The page 1 view does not get the nav button, but the page 2 view does, because it includes the ion-nav-buttons directly in it's own view.
If I change the ionic version to beta 13, it does work.
Is this a bug in later versions, or do I need to do something different for this to work i latest versions (beta 14, rc 0)?
Apparently, this is by design: https://github.com/driftyco/ionic/issues/3332#issuecomment-81850467
I'm running into an issue with using ng-include in ion-nav-bar. The ng-include(d) ion-nav-bar code isn't displaying (it is included though).
The code is as follows:
<ion-view title="test">
<ng-include src="'partials/header-list.html'"></ng-include>
<ion-content padding="false">Test</ion-content>
<ng-include src="'partials/footer-badges.html'"></ng-include>
</ion-view>
The contents of partials/header-list.html is:
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button button-clear ion-chevron-left"> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right"> Home </ion-nav-buttons>
This is rendered into:
<ng-include src="'partials/header-list.html'" class=""><ion-nav-bar class="bar-positive bar bar-header nav-bar nav-title-slide-ios disable-user-behavior invisible">
<ion-nav-back-button class="button button-clear back-button ng-hide"> Back </ion-nav-back-button>
<div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding"></h1>
<div class="buttons right-buttons"> <span class=""> Home </span></div></ion-nav-bar>
<ion-nav-buttons side="right" style="display: none;"></ion-nav-buttons></ng-include>
I can see that ion-nav-bar is set to class=invisible and ion-navs-buttons is set to display:none.
Why is this happening and what can I do to get the nav bar to display when used in ng-include?
Thanks
Meint
As requested by ArtOfCode please find the full code below. The approach I've taken also correlates with the advice of the Ionic team given in the "Navigating Ionic's Headers" formula.
I'm using <ion-nav-bar> for the generic navigation and apply exceptions to that navigation via a specific <ion-header-bar>. An example of this approach:
<ion-view hide-nav-bar="true">
<ion-header-bar align-title="center" class="bar-dark">
<div class="buttons">
<a class="button button-icon icon ion-chevron-left" ng-href="#/app/group"> Back</a>
</div>
<h1 class="title"></h1>
<div class="buttons">
<a class="button button-icon icon ionic-plus" ng-href="#/app/member-create/{{groupid}}"></a>
<a class="button button-icon icon ionic-minus" ng-href="#/app/member-delete"></a>
</div>
</ion-header-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
As an additional remark I would like to add that I have found that angular directives provide a much better approach for reusability than using ng-include as originally envisioned by myself. All part of the leaning experience :-)
I dont think you want the inner single quotes in your src attribute
<ng-include src="partials/header-list.html" class="">...
I've stumbled upon the same problem. Beta14 should somehow alleviate the issue with new ways to override the navbar. Until then, I'm using:
<ion-view hide-nav-bar="true">
and using an <ion-header-bar> instead, which can be included without problems. Note it should be used for non-standard views.
An example:
<ion-view hide-nav-bar="true>
<ion-header-bar class="bar-positive">
<h1 class='title'>
Hello!
</h1>
</ion-header-bar>
<ion-content class="has-header">
Content
</ion-content>
</ion-view>