There are similar question but not this exact one. I have this structure in an ionic app view
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit"></span>
</a>
<img src="img/logo_header.png">
</ion-nav-title>
<ion-content class="star-wrap">
.
. contents
.
</ion-content class="star-wrap">
What I'm trying to achieve is show the ion-android-exit button instead of the menu button in this specific view.
Is this possible?
There was a (way) easy and simple way to do this.
Adding <ion-nav-buttons></ion-nav-buttons> inside <ion-view></ion-view> will rewrite the menu button with whatever I want, or just hide it with no contents.
You need to use ng-if like in example here.
http://codepen.io/anon/pen/AXkJGa
after setting the value of ng conditional to true in the controller.
Example HTML
<title>Ionic Modal</title>
<body ng-controller="State1Ctrl">
<ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit" ng-if="!hidethisview"></span>
</a>
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
</ion-nav-bar>
And JS
angular.module('ionicApp', ['ionic'])
.controller('State1Ctrl', function($scope, $state) {
if($state.current.name=="")// you need to have your state name inside quotes
//this example don't have one
{
$scope.hidethisview=true;
}
});
Related
The example code for the ion-nav-view directive doesn't actually show its usage.
So I'm unsure how to use it.
Here is the link to the documentation:
http://ionicframework.com/docs/api/directive/ionNavView/
under the USAGE heading it says this:
on app start, $stateProvider will look at the url, see if it matches
the index state, and then try to load home.html into the
.
Pages are loaded by the URLs given. One simple way to create templates
in Angular is to put them directly into your HTML file and use the
syntax. So here is one way to put
home.html into our app:
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
This is good to do because the template will be cached for very fast
loading, instead of having to fetch them from the network.
Do I nest all of that inside of an ion-nav-view directive? Another reason for my confusion is because in one of the ionic templates the framework provides I've seen ion-nav-view opened and closed with nothing in between it this (code below is copy and pasted directly from one of Ionic's templates) :
<body ng-app="myApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
This <ion-nav-view> behaves like a placeholder. Your other html files that you create under templates folder goes in there. So for example you then have "employees.html" in your templates folder. So the markup of "employees.html" will look something like this:
<ion-view view-title="Employees">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the above is complete html that will be sitting in "employees.html". Basically this is the html that will be placed inside <ion-nav-view> tags.
Hope this helps.
I have a blank app with many pages. One of these pages needs to be diveded into tabs.
I want a few tabs to be displayed under the header (which has logo and back button).
However, for some reason, the tabs are hidden almost completly beneath the header.
The structure is the following:
<ion-view view-title="MyPage">
<ion-header-bar align-title="center">
<div class="app_header_side">
<button class="button back-button">
<i class="icon ion-ios-arrow-back"></i>
</button>
</div>
<div class="app_header_center">
<div class="text-center">
LOGO
</div>
</div>
<div class="app_header_side">
</div>
</ion-header-bar>
<ion-content class="padding has-header">
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
I have tried to put the tabs everywhere. In the header, before "ion-view", before "ion-content". Nothing worked.
The only way to make ti work was to add
style="padding-top: 30px;"
in the tag for "ion-content". But I would prefer to avoid putting fixed padding.
I would suggest the following by declaring the header as follow:
<ion-header-bar class="bar-header">
and then defining the has-header
<ion-content class="has-header">
Alternatively as a test you can set:
<ion-content class="has-subheader">
That would imply that something like a ion-nav-bar for example is set as the header already. Then set the ion-header-bar as bar-subheader.
IONIC Headers and Sub-Headers
Alternatively you can place tab at bottom same like iOS.
Set $ionicConfigProvider.tabs.position('bottom'); in .config
I think you should try
<ion-view view-title="MyPage" class="has-header">
I came across same issue once. I used class="has-header" to root view that solved my problem.
Though I'm sure this is something that isn't uncommon in ionic development, I can't seem to find anything on the web that explains this. If I have the following:
<body ng-app="myApp">
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
And one of the views that I use in the ion-nav-view looks like this for exmaple:
<ion-view view-title="Profile" ng-controller="profileController" class="profile-view">
<ion-content class="padding has-header">
....
How do I display a back button (really just the ion-chevron-left icon) for iOS only, and have it hidden on other devices that have a dedicated hardware button?
There are a couple of ways to achieve platform specific behaviour. You can read up on the back button specifically, here.
In your controller, you can use the ionic.Platform utility to determine the current platform and the Ionic NavBarDelegate to show/hide the button.
HTML:
<body ng-app="app" ng-controller="appCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-bar-back-button>
</ion-nav-bar>
</body>
Controller:
.controller('appCtrl', function($scope, $ionicNavBarDelegate) {
var isIOS = ionic.Platform.isIOS();
$ionicNavBarDelegate.showBackButton(isIOS);
});
In your css, define separate classes to show/hide the element depending on the platform. From here.
HTML:
<body ng-app="app" ng-controller="appCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="platform-nav"></ion-nav-bar-back-button>
</ion-nav-bar>
</body>
CSS:
.platform-ios .platform-nav {
display: block;
}
.platform-android .platform-nav {
display: none;
}
Using the Ionic tabs and nav demo I have been building a simple app.
Here is codepen of example I have been using as a template to follow:
http://codepen.io/ionic/pen/odqCz
In my app I want to add info button to the nav bar, this can be 'secondary' (right) to not interfere with the back button that appears on the left when navigating through the stack.
Here is the /template for one of the tabbed pages that I have added an info button:
<ion-view view-title="Gallery">
</button>
</ion-nav-buttons>
<ion-content class="padding">
<h3>Digit2Widgets Gallery Showcase.</h3>
<p>
<a class="button button-block button-light" href="#/tab/Demo1">Gallery Demo 1</a>
<a class="button button-block button-light" href="#/tab/galleryDemo2">Gallery Demo 2</a>
</p>
</ion-content>
</ion-view>
Now the gallery demo button bellow works and navigates to demo1 but the button at the top added to nav bar does not, even though they are structured in the same fashion? How can I fix this?
is there an easier way to add a permanent info button to the right of the nav bar?
Any help greatly appreciated.
Fred
I have actually got the answer now:
When adding buttons to Nav You should use ui-sref to navigate by passing the state name:
<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.Demo1">
:)
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!