I have the following code for a side menu in the body of my index.html which works. But I can't figure out how to change the Page Title to display the title of the current page.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view class="has-header"></ion-nav-view>
<ion-header-bar class="bar-dark">
<div class="buttons">
<button class="button icon button-clear ion-navicon-round"
ng-click="toggleLeft()"></button>
</div>
<h1 class="title">Page Title</h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item href="#/dash">Dashboard</ion-item>
</ion-list>
<ion-list>
<ion-item href="#/search">Search</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
NOTE: Use Shrinath's answer and place your content in a <ion-content> tag after the ion-header-bar tag to stop the content being stacked under the header.
You can use route and for every route define template having different controller.
On Template definition you can choose different Header.
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Heading</h1>
</ion-header-bar>
Related
This is my file in angularjs. I am not able to insert the code for sidemenus. If I include that code, the style of ion-nav-view changes and the page is blank. Pls help me to get to know the exact place I should insert the menu.
<ion-nav-view class="dashboard_pane">
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
<div class="bar bar-footer bar-light" style='background-image:url(../img/advertisement_button.png);background-size:cover;width:100%;height:8%;'></div>
</body>
Is the header section fine ?
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
</ion-nav-bar>
To create side menus in ionic, you have to use <ion-side-menus> directive as parent directive. Inside that you have use 2 directive (3 directives if you are using both right and left menu):
One for main body content <ion-side-menu-content> Main body or <ion-nav-view> will go here. Another for left/right menu : <ion-side-menu side="left">
Example Code:
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios">
<!-- Main body content will go here -->
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<div ng-include src="'templates/left-menu.html'"></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios" class="dashboard_pane">
<!-- Main body content will go here -->
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<!--<div ng-include src="'menu.html'"></div> -->
**<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>**
</ion-content>
</ion-side-menu>
</ion-side-menus>
I am new to angular and ionic and would was trying to make an app
<ion-side-menus >
<ion-side-menu-content>
<ion-nav-bar class="bar-assertive nav-title-slide-ios7">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized ">
<h1 class="title">My Test</h1>
</ion-header-bar>
<ion-content class="has-header">
<ion-list>
<ion-item href="#/" class="item-icon-left" menu-close><i class="icon ion-home"></i> Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
My side menu hamburger icon doesnt show up and is always hidden behind the navbar.If i remove the navbar then the icon is visible! how to resolve this please help!
Working code.. Use Ion header .You was using 2 times
<ion-side-menus >
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title" >Slider </h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized ">
<h1 class="title">My Test</h1>
</ion-header-bar>
<ion-content class="has-header">
<ion-list>
<ion-item href="#/" class="item-icon-left" menu-close><i class="icon ion-home"></i> Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
so I am currently doing a side menu for my Single Page Application, I got the side menu working, but I cannot display the main content. I am not sure what went wrong. I cannot display the word hello world in my page. Any one has an idea?
Here is my code
<ion-tab title="Draft" ng-controller="textController">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title"> Details</h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ion-item>
Home
</ion-item>
<ion-item>
About
</ion-item>
<ion-item>
Setting
</ion-item>
<ion-item>
Log out
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<ion-content>
Hello World
</ion-content>
</ion-tab>
Here is my controller:
angular.module('app')
.controller('textController', function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
}
});
Following the official Ionic documentation (http://ionicframework.com/docs/guide/starting.html) it seems that your "Hello World" content should be inside a <ion-side-menu-content> tag, not a simple <ion-content>. Please try that and let me know if that solves your problem.
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>
How to remove header title in ionic? I want to remove login title inside my header.
my code
<ion-view hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title"><img class="title-image" src="img/header_logo.png" /></h1>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/home/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Current issue
Add this to your view
<ion-view hide-nav-bar="true" hide-back-button="true" view-title="welcome">
How about this:
<ion-view title=''>
Put any html content inside title and it will re rendered as html.
<ion-view title='<img class="title-image" src="images/logo.png" />'>