Started with Ionic but want to add a new button to the right of my apps header.
However, in my index.html I only have this:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And cannot find how to edit the header? Im guessing its generated in a template somewhere, but no searching is returning anything.
If you need a working example... here it is:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
check this codepen
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
Available sides: primary, secondary, left, and right
Related
I am trying to create an app with Sidemenu and Tabs. Please see my code in the following link.
http://codepen.io/ccrash/pen/WxbeOR
My question is, after I launched the app, I can click both the tabs, and the content changes accordingly. When I clicked the profile within the sidemenu, the profile page is displayed. But now, when I try to click either of the tabs again, it seems that the profile page is either displaying on-top of the tab contents or not even functioning. Can anyone help ?
HTML Code
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar>
<!-- <ion-nav-bar class="bar bar-header bar-positive"> -->
<!-- <ion-nav-bar class="bar-stable"> -->
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top">
<ion-tab title="Latest" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/latest">
<ion-nav-view name="tab-latest"></ion-nav-view>
</ion-tab>
<ion-tab title="Market" icon-off="ion-ios-cart-outline" icon-on="ion-ios-cart" href="#/app/market">
<ion-nav-view name="tab-market"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-header-bar>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item menu-close href="#/app/profile">
<i class="icon ion-person" style="font-size:15px;margin-right:10px;"></i> My Profile
</ion-item>
<ion-item menu-close href="#/app/logout">
<i class="icon ion-log-out" style="font-size:15px;margin-right:10px;"></i> Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/latest.html" type="text/ng-template">
<ion-view view-title="Latest News">
<ion-content>
<div class="list card">
<div class="item item-body">
Latest News
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/market.html" type="text/ng-template">
<ion-view view-title="Market">
<ion-content>
Market
</ion-content>
</ion-view>
</script>
<script id="templates/profile.html" type="text/ng-template">
<ion-view view-title="Profile">
<ion-content>
My Profile
</ion-content>
</ion-view>
</script>
</body>
</html>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.latest', {
url: "/latest",
views: {
'tab-latest': {
templateUrl: "templates/latest.html"
}
}
})
.state('app.market', {
url: "/market",
views: {
'tab-market': {
templateUrl: "templates/market.html"
}
}
})
.state('app.profile', {
url: '/profile',
views: {
'menuContent': {
templateUrl: 'templates/profile.html'
}
}
})
$urlRouterProvider.otherwise("/app/latest");
})
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {});
I'm fighting with header bars.
This snippet works perfectly fine:
<ion-pane>
<ion-header-bar class="bar-balanced">
<h1 class="title">mytitle</h1>
</ion-header-bar>
<ion-view view-title="">
<ion-content>
MyContent
</ion-content>
</ion-view>
</ion-pane>
Once I add two additional header bars for different conditions, my ion-content module doesn't get the has-header class and my header bar overlaps my content.
As said, this crashes my design:
<ion-pane>
<ion-header-bar class="bar-balanced" ng-show="conditionA()">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-show="conditionB()">
<h1 class="title">mytitle2</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-show="conditionC()">
<h1 class="title">mytitle3</h1>
</ion-header-bar>
<ion-view view-title="">
<ion-content>
MyContent
</ion-content>
</ion-view>
</ion-pane>
Setting the has-header class manually doesn't solve the problem. The class gets removed by angular/ionic.
What am I doing wrong? It should be possible to set different headers, shouldn't it?
Thanks for your help in advance.
Change ng-show to ng-if and it works:
(P.S.: see the snippet in full screen)
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope){
$scope.head = 1;
$scope.change = function(n) {
$scope.head = n;
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl" ng-init="head=1">
<ion-pane>
<ion-header-bar class="bar-balanced">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-if="head==1">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-positive" ng-if="head==2">
<h1 class="title">mytitle2</h1>
</ion-header-bar>
<ion-header-bar class="bar-assertive" ng-if="head==3">
<h1 class="title">mytitle3</h1>
</ion-header-bar>
<ion-content >
<ion-list>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(1)">to head 1</button>
</ion-item>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(2)">to head 2</button>
</ion-item>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(3)">to head 3</button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
I am working on an Ionic App and I don't know why the list item is not visible why it is under the title tab?
Here is the link of code.
https://jsfiddle.net/jneypysb/
I used <ion-header-bar> and <ion-content> with has-header class and I resolved.
Because you declared <body ng-app="Hungroo"> it's necessary to define those module.
It follows a complete example:
angular.module('Hungroo', ['ionic']);
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="Hungroo">
<ion-header-bar class="bar bar-header bar-royal">
<button class="button button-icon icon ion-navicon"></button>
<div class="h1 title">title</div>
<button class="button button-icon icon ion-settings"></button>
</ion-header-bar>
<ion-content class="has-header">
<div class="padding">
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
First Things First!
</div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</label>
</div>
</div>
</ion-content>
</body>
</html>
I have a footer bar I want to add to most of my templates, so I added it in the index.html file.
<ion-nav-view ></ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
The problem is that in some templates I want to hide this footer, so I tried inside the template to put an empty <ion-footer-bar></ion-footer-bar> after ion-content, but still the footer is showing.
How can I hide it or override it in my template ?
Thanks
Here below is an example in which the second view (tab) has no ion-footer-bar.
I've used $stateChangeStart event to change the property $scope.showFooter to which is bound the visibility of footer (via ng-if).
The state change handler is in a 'mainCtrl' (and also showFooter property) which works as parent controller of all other "view" controllers.
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
.state('tabs.map', {
url: "/map",
views: {
'map-tab': {
templateUrl: "templates/map.html",
controller: 'MapCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('mainCtrl', function($scope, $state, $rootScope) {
console.log('mainCtrl');
$scope.showFooter = true;
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log('>'+toState.name);
if (toState.name=="tabs.home") $scope.showFooter = false;
else $scope.showFooter = true;
});
})
.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
console.log('HomeCtrl');
})
.controller('MapCtrl', function($scope, $state, $ionicPopover) {
console.log('MapCtrl');
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="mainCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive" ng-if="showFooter">
<div class="buttons">
<button class="button">AAA</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
</ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-top tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Map" icon="ion-ios-world" ui-sref="tabs.map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home" cache-view="false" >
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content class="padding" ng-class="{'has-footer': showFooter}">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
</p>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
<script id="templates/map.html" type="text/ng-template">
<ion-view title="" cache-view="false" >
<ion-nav-buttons side="left">
<input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content ng-class="{'has-footer': showFooter}">
<div id="map" data-tap-disabled="true" style="width: 500px;height: 500px"></div>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
</body>
</html>
I have a tabs.html setup with four page-tabs in it. One of these pages contains six items and upon selecting an item I want a new page to slide into view but it won't be one of the other tab items.
Is it better have the new page as a hidden tab or to have it be a page outside of the tabs? I need to pass the existing page's $scope data to transfer to new page (for data of the item tapped on) and I need the new page to animate the new page in.
You want the other page to be outside of the tabs. If you try to make a 'fake' tab, I can only imagine that will be the source of much pain and many bugs. It is best to use things as intended instead of hacking on top of them. You may want to consider a side menu to expose navigation that doesn't fit into normal tabs interactions.
See my codepen here for one quickly hacked together example. http://codepen.io/gnomeontherun/pen/OVLQYL?editors=101
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.state('item', {
url: '/:item',
controller: 'ItemCtrl',
templateUrl: 'item.html'
});
$urlRouterProvider.otherwise('/');
})
.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
$ionicModal.fromTemplateUrl('modal.html', {
animation: 'slide-in-up',
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
}
$scope.openModal = function () {
$scope.modal.show();
}
$scope.form = {};
$scope.addStooge = function () {
console.log($scope);
$scope.stooges.push({name: $scope.form.name});
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.controller('ItemCtrl', function ($scope, $stateParams) {
$scope.item = $stateParams.item;
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content>
<ion-list>
<ion-item href="#/" menu-toggle="left">Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right" >
<ion-header-bar class="bar-header bar-dark">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-plus" ng-click="openModal()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-positive">
<ion-tab title="Stooges">
<ion-content class="has-header">
<h4>The Stooges</h4>
<ion-list>
<ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2">
<ion-content class="has-header">
<h2>Just another tab, for another reason</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar-header bar-positive">
<h1 class="title">New Stooge</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content>
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="form.name" type="text" name="name" />
</label>
<button class="button button-full button-positive" ng-click="addStooge()">Create</button>
</div>
</div>
</ion-content>
</div>
</script>
<script id="item.html" type="text/ng-template">
<ion-view title="{{item}}">
<ion-content>
<h1>{{item}}</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>