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>
Related
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'm trying to get a tabbed layout, as I have outlined below to appear correctly:
Copied from: http://codepen.io/imee12/pen/YPOGJe
<ion-view title="{{navTitle}}" left-buttons="leftButtons" >
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content has-header="true" padding="true" class="has-header">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content has-header="true" padding="true" class="has-header">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content has-header="true" padding="true" class="has-header">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
The tabs exist inside the following container, which has an ion-nav-bar.
<ion-side-menus>
<ion-pane 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="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content class="has-header" has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The Codepen project is referencing version 0.9.27 of the ionic bundle & css, e.g.
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
I've recently updated my local environment to the ionic nightly build, so I'm currently on
* Ionic, v1.2.4-nightly-1917 //both js & css
And now the tabbed page is appearing as (note the text "Tab 1 Content" is being overlapped by the ion-nav-bar)
I should also note I've applied the class="has-header" to both the side menu and the tabs. The side menu appears correctly, but the tabs don't.
Is there a different way that I need to display the tabs in the context of the updated ionic bundle and css, so that it appears as follows?
What am I doing wrong? What do I need to do to fix this?
It turns out the resolution was to put the tabs inside an ion-content container with class="has-header".
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<!-- the ion-content container -->
<ion-content class="has-header" padding="true">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content padding="true">
<h2 class="has-header">Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content padding="true">
<h2 class="has-header">Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-content padding="true">
<h2 class="has-header">Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
Also, to get the pesky tabs to stick to the bottom, I brought $ionicConfigProvider into the angular config and gave it a slap with the position stick.
angular.module('ionicApp', ['ionic', 'services'])
.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider',
function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
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.
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" />'>