Is the a way to animate the views that taking place each time i am tapping on a ion-tab?
index.html
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl" drag-content="false">
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view animate="slide-left-right"></ion-nav-view> //// animate is not working!
</ion-side-menu-content>
...
I am using the ui-router and i have a tabs.html which i use for my tabs stack,
each ion-tab has it's <ion-nav-view name="...">
and everything working just fine bu not the animation, it just won'lt work at all.
Related
I am Working on a Ionic 1 project which have two language Arabic which is RTL and English which is LTR.
I added two menus to handle this, one with side="right" for Arabic and the other one with side="left" for English
Every thing is working fine at start but when I change the language the side menu content is draggable to the left and right !!
It should be draggable only to left only when then left menu is displayed and to right only when the right menu is displayed
Trials
I tried with drag-content='false' [disable both directions].
I trired to add event Listener on ionic-side-menus-content on drag to check if direction is left so I could preventDefault and return false; [didn't worked]
here is screenshot of the issue.
Accepted Direction
Wrong behaviour
app.html code
<ion-side-menus enable-menu-with-back-views="false">
<!-- Left menu -->
<ion-side-menu side="left" ng-if="$root.lang=='en'">
<div ng-include="'tpls/side-menu.html'"></div>
</ion-side-menu>
<ion-side-menu side="right" ng-if="$root.lang=='ar'">
<div ng-include="'tpls/side-menu.html'"></div>
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
<ion-nav-bar align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="{{$root.lang=='ar'?'right':'left'}}">
<button class="button button-icon button-clear ion-navicon" menu-toggle="{{$root.lang=='ar'?'right':'left'}}">
</button>
</ion-nav-buttons>
<div class="bar bar-subheader">
<div class="searchBox primaryColor-bg">
<div class="ionicons">
<i class="ion-camera"></i>
<span>|</span>
<i class="ion-search"></i>
</div>
<input type="text" name="" placeholder="{{'TITLES.SEARCH_PLACEHOLDER'|translate}}" value="">
</div>
</div>
</ion-nav-bar>
<ion-nav-view name="menuContent" >
</ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Any help will be appreciated
I am trying to develop an ionic application like screenshot which I put here.
But there is something that I want to know about google map, or whatever the answer is it.
as you see, I opened the sidebar.the thing that I want to do is moving the map during this situation.
is it posible ? thanks in advance..
this is my map.html page.
<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 class="button button-icon icon ion-pinpoint" ng-click="goster()"></button>
</ion-nav-buttons>
<ion-content>
<div class="mapWrap" data-tap-disabled="true">
<ng-map center="{{konum.lat}},{{konum.lon}}"
on-click="hideInfo()"
disable-default-u-i="true"
zoom="15">
</div>
</ion-content>
here is my menu.html page.
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content >
</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?
How to force Ionic to show only menu icon?
In Android, I only want to show menu icon for every page. However, in IOS, I want standard navigation (i.e. back button for inner pages).
Is it possible?
Any help is appreciated.
Edit:
Menu.html
<ion-side-menus enable-menu-with-back-views="isAndroid">
<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="featureContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
...
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home.html
<ion-view hide-back-button="isAndroid">
<ion-content class="home">
...
</ion-content>
</ion-view>
you can use ionic.Platform:
$scope.isIOS = ionic.Platform.isIOS();
for example:
<ion-nav-bar class="homler-nav-bar-with-tabs transparent opposite-direction">
<ion-nav-back-button ng-show="isIOS" class="button-icon icon-top_button_back light">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button ng-if="isIOS" class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<button ng-if="!isIOS" style="display: block" class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
I am trying to get the nav bar to become transparent in a one view. However I'm having trouble doing that.
Here's my menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" ng-class="clear">
<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="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here's my menu controller
$rootScope.$on('noNavBar', function(){
$scope.clear = 'bar-light';
console.log($scope.clear);
});
Here's the css
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; or transparent, or background:none
}
.scroll-content {
overflow: visible !important;
}
Is it because the nav bar is cached?
If you need to hide nav-bar in a specific view use hide-nav-bar="true" inside <ion-view>.
If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:
<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>
Here is an example: http://codepen.io/beaver71/pen/XXeydY