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>
Related
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>
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>
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.
i added ion-nav-back-button to my side menu in ion-nav-bar but the problem that the nav back button hadn't been displayed, i don't know why i tried many attributes but it is still hidden,the following code for my menu layout with side menu code
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header id="header" class="bar bar-header bar-balanced">
<h1 class="Side Menu"></h1>
</header>
<ion-content class="has-header" has-subheader="false">
<ion-list>
<ion-item nav-clear menu-close ui-sref="">Home</ion-item>
<ion-item nav-clear menu-close ui-sref="app.account">Account</ion-item>
<ion-item nav-clear menu-close ui-sref="app.help">Help</ion-item>
<ion-item nav-clear menu-close ui-sref="">Sign Out</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menus enable-menu-with-back-views="false">
<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="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 class="menubox">
<ion-list>
<ion-item menu-close href="#/app/home">Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>