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" />'>
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 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?
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>
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>
I am currently working on $ionicScrollDelegate in my mobile app. My objectives is when the user click the header bar, it will scroll to top automatically.The problem I have right now is when I include the ion-side-menu in my code, the $ionicScrollDelegate cannot scroll back, I created a button which it returns their position, but cannot scroll back. I am trying to figure out why $ionicScrollDelegate cannot scroll back to top when I included the side menu but when I removed the side menu, the $ionicScrollDelegate seems to work fine and it can scroll back to top.
Working code - without ion-side-menu
<ion-view>
<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-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
<ion-view>
Not working - With side menu
<ion-view>
<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">Expenses Details</h1>
<a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ul class="list">
<a ui-sref="tabs.home" class="item">Home</a>
<a ui-sref="about" class="item">About</a>
<a ui-sref="tabs.setting" class="item">Settings</a>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
In My controller, I have
$scope.scrollListToTop = function () {
var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
alert('Result:' + result.top + " " + result.left);
//$ionicScrollDelegate._instances[2].scrollTop();
}
It may be related to your markup structure.
Both the links below suggest that ion-side-menu-content should contain an ion-nav-bar then an ion-nav-view
https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html and http://mcgivery.com/understanding-ionics-side-menu/
Switching that around and putting your ion-content in there may give you back control.
Drop us a codepen or similar if not.