i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.
Related
In my ionic app,I have a feature where the user should see in app's nav bar horizontal dot lines,click on them and then a pop up menu should appear with two menu items(add to favorites and add a comment). The below picture illustrates my point.
The problem though is that those 3 horizontal dots don't appear in the nav bar of the app.
Here is the code for the ion-nav-button.
<ion-view view-title="News Details">
<ion-content>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<div class="card">
<div class="item item-body item-text-wrap">
<img class="full-image" ng-src="{{detailedNews.image}}" alt="Uthappizza">
<h3>{{detailedNews.title}}</h3>
<p>{{detailedNews.description}}</p>
</div>
</div>
<div class="row">
<div class="col col-offset-10">
<h4>Customer Comments
<small>Sort by:
<input type="text" ng-model="orderText">
</small></h4>
<ul class="list">
<li ng-repeat="comment in dish.comments | orderBy:orderText">
<blockquote>
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-view>
Maybe there is something wrong in this line.
<button class="button button-icon icon ion-more"ng-
click="openPopover($event)"></button>
Can you help me?
Thanks,
Theo.
Try wrapping the <ion-nav-buttons></ion-nav-buttons> directive inside an <ion-nav-bar></ion-nav-bar> directive and taking it out of ion-content.
<ion-view view-title="News Details">
<ion-nav-bar>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
...
I have a ionic popover , what i need to do is when i select any option from popover that is last in the list after scroll ,.after the selection the popover gets closed, but when i reopen that popover again it again takes me to the top of the scroll , i want to scroll till the selected item in popover when i open it again ?
here is my html:
<script id="templates/ListViewCreator.html" type="text/ng-template">
<ion-popover-view class="filterpopoverMargins">
<ion-header-bar class="">
<h1 class="title" style="color: black;">Select Views</h1>
</ion-header-bar>
<ion-content>
<div class="list selectfilterListClass" ng-repeat="item in filterColumn" style="background-color:darkgrey!important;" ng-click="itemCheckedUnCheckedFilterhandler(item)">
<label class="item item-radio wrapping-list ">
<input type="radio" name="group">
<div class="item-content" style="">
{{item.label}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
<ion-footer-bar>
<button ng-click="defaultSetting()" class="button bar-balanced defaultbtnClass">Default</button>
</ion-footer-bar>
</ion-popover-view>
</script>
Kindly help me to get the answer
im currently using ionics sliding sideview for my navigation in my app but i want to switch to the new tabs. I have changed the code to make the tabs but $state.go doesn't seem to work any more. Here was the code for the old sliding navigation :
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar-balanced nav-title-slide-ios7">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" class="main-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-list>
<ion-item class="heading-item item item-avatar" nav-clear="" menu-close="" ui-sref="app.profile">
<div class="user-image-container">
<pre-img ratio="_1_1" helper-class="rounded-image">
<img class="user-image" ng-src="img/logo.jpg" spinner-on-load="">
</pre-img>
</div>
<h2 class="greeting">{{welcomename}}</h2>
<p class="message">Welcome back</p>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.google" ng-click="googleLoginClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">My Diary</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.history" ng-click="historyClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Search</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.tasklist" ng-click="tasklistClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Task List</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.myforms" ng-click="myFormsClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Unsent Instructions ({{unsentFormsCount}})</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.banking" ng-click="bankingClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Banking</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ng-click="logoutClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Logout</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The "XXclick" functions in the ng-clicks just call $stat.go's. Here is the new navigation :
(ive just added the top one to reduce the code )
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-tab title="Diary" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" ui-sref="utab.google" ng-click="googleLoginClick()">
<ion-nav-view name="diary"></ion-nav-view>
</ion-tab>
</ion-content>
</ion-tabs>
Appreciate any help.
First no need to use ion-content in tab. There should be issue in routing also. Can you update full code or create code pen? so I can help you. I think below code pen link will help you.
'http://codepen.io/nirmal25/pen/BzQxzX'
I am creating an app using ionic.
I have some buttons on the menu: messages, Settings, Help and Back.
I would like the back button does not appear on the dashboard page.
Anyone know how I do it? Thanks,
Ps .: I tried to use the ion-nav-back-button, but had some problems.
top menu
This is a menu.html
<ion-side-menus enable-menu-with-back-views="false" >
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-balanced">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-buttons side="right">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
and this is a dashboard.html
<ion-view view-title="">
<ion-content class="padding">
<div class="list">
<div class="row">
<div class="col">
<span>Type your message:</span>
<div class="item-input item-stacked-label">
<textarea type="text"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Choose the distance:</span>
<div class="range range-balanced">
<input type="range" name="distance" min="1" max="10000" value="1000">
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Anexar imagem:</span>
<button class="button button-balanced button-full">Selecionar</button>
</div>
</div>
<div class="row">
<div class="col">
<a class="button button-icon icon ion-chevron-right float-right"></a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thanks!
What if you simply use ng-hide="homepage". Set $scope.homepage=true in the Homepage's controller. For other pages it will be undefined and therefore false so it won't be hidden.
dont know this is best way or not but its working for me..!try this.!
add this in controller related to sidemenu:
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
if (($state.$current.name == "app.dashboard")) {
$scope.hideButton = true;
}else{
$scope.hideButton = false;
}
});
html :
other way to do this is..:add whichever button u want in particular view and remove from sidemenu html.
<ion-view view-title="">
<ion-nav-buttons side="right">
</ion-nav-buttons>
<ion-content class="padding">
</ion-content>
</ion-view>
hope , it helps someone.!
I am trying to get a popup message to appear at the very top of the screen on top of the navigation bar (ion-nav-bar). I can only get it to appear immediately below.
The css for the div I am using for the message is:
.notification-message {
position: fixed;
top: 0px;
height: 60px;
padding-top:10px;
width: 100%;
min-width: 100%;
color: white;
background-color: #656565;
text-align: center;
vertical-align: middle;
}
The html for the page the message div is in the file watchlist.html:
<ion-view view-title="CUES - WATCH LIST">
<ion-content>
<div ng-hide="notificationMessage" class="notification-message">{{messageContents}}</div>
<ion-list>
<ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
<div class="watchlist-movie-thumb">
<img class="movie-thumb-image" src="{{watchlistitem.picture}}">
</div>
<div class="col-75 watchlist-title-genre-container">
<div class="watchlist-movie-title">
{{watchlistitem.title}}
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The ion-nav-bar is defined in the side menu file as follows:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="header-text"> <!-- removed bar-stable -->
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear" menu-toggle="left">
<i class="icon header-bar-icon ion-navicon"></i>
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear" ng-click="shareAnywhere()">
<i class="icon header-bar-icon ion-ios-upload-outline"></i>
</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 id="menu-heading">MENU</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/watchlist">
WATCH LIST
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The controller code that shows the message popup is:
$scope.messageContents = "You do not have any movies in your Watch List yet. Why not add some?";
$scope.notificationMessage=false;
$timeout(function () { $scope.notificationMessage = true; }, 3000);