I've a simple application with a side menu where you can navigate to different views. If I click on an item I get redirected to that view but the back button doesn't show up, which seems to be the default behaviour.
Is there a build in way to show the back button on side menu navigation?
I've found this codepen on the ionic forum which uses the same basic structure as I do: http://codepen.io/mhartington/pen/azwojR
This is my complete menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content id="header-wrapper">
<div id="logoHeader" class="bar bar-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<img src="img/rg-gunz-christmas.png" />
</div>
<ion-nav-bar id="header" class="bar bar-header">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu id="menu" side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="account">
<img ng-src="{{account.AvatarUrl}}" class="avatar"/>
<div class="username">{{account.UserID}}</div>
</div>
<ion-list>
<ion-item menu-close href="#/app/main">
<i class="icon ion-home"></i> <span class="padding-left">Home</span>
</ion-item>
<ion-item menu-close href="#/app/login" ng-show="!account">
<i class="icon ion-log-in"></i> <span class="padding-left">Login</span>
</ion-item>
<ion-item menu-close href="#/app/register" ng-show="!account">
<i class="icon ion-person"></i> <span class="padding-left">Register</span>
</ion-item>
<ion-item menu-close href="#/app/individualRanking">
<i class="icon ion-arrow-graph-up-right"></i> <span class="padding-left">Individual ranking</span>
</ion-item>
<ion-item menu-close href="#/app/clanRanking">
<i class="icon ion-ios-bolt"></i> <span class="padding-left">Clan ranking</span>
</ion-item>
<ion-item menu-close href="#/app/statistics">
<i class="icon ion-stats-bars"></i> <span class="padding-left">Statistics</span>
</ion-item>
<div class="item item-divider" ng-show="account">
Account
</div>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-settings"></i> <span class="padding-left">Settings</span>
</ion-item>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-log-out"></i> <span class="padding-left">Log out</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
its hard to predict here.just check may be some other view is override in the view which is opening.
i had same problem.may be this could help you.
place ion-nav-bar in particular view, where u want to show back button!
<ion-view view-title="Order Details">
<ion-nav-bar class=" dark">
<ion-nav-back-button class="button-clear button-dark stable ">
<i class="ion-arrow-left-c stable"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="content-stable"></ion-content>
</ion-view>
Try this code: You can add this class ion-ios-arrow-back or ion-ios7-arrow-back
<ion-side-menu-content >
<ion-nav-bar class="bar-energized 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="link" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
Related
I am getting issue while redirecting to ion-list template with approx. 700 items. There comes a delay of around 4-5 seconds which is decreasing performance.Below is my code. Can someone please suggest me the solution?
<ion-modal-view class="bgImg">
<ion-view>
<ion-header-bar class="bar-light">
<h1><img class="title-image titleImg" src="img/logoIB.png"/></h1>
<div class="buttons button-clear">
<button class="button button-clear" ng-click="refreshList()" style="margin-top:40px;"><i class="icon ion-refresh" style="font-size:30px;"></i></button>
</div>
</ion-header-bar>
<ion-content scroll="true" >
<div data-ng-repeat="(letter, authors) in sorted_users" class="alpha_list">
<ion-item class="item item-divider" id="index_{{letter}}">
{{letter}}
</ion-item>
<ion-item ng-repeat="author in authors" ng-click="getSelectedUser(author.user_id,author.passcode,author.gesturecode,author.username)">
{{author.last_name}} {{author.first_name}}
</ion-item>
</div>
</ion-content>
<ul class="alpha_sidebar">
<li ng-click="gotoList('index_{{letter}}')" ng-repeat="letter in alphabet">
{{letter}}
</li>
</ul>
</ion-view>
I'm creating a project using Ionic 1.3.2 and building to Android 5.1.1. The problem is after buiding the classes has-header and has-tabs-top are added into <ion-content> automatically and because this a space is beeing showing. I don't know why this happens and I don't know how to remove these classes or if there's another solution.
How could I solve this ?
View
<ion-view>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="O que procura ?">
</label>
</div>
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><i class="icon ion-thumbsup icon-24px"></i></div>
<div class="col col-25"><i class="icon ion-chatbox icon-24px"></i></div>
<div class="col col-25">
<i class="icon ion-ios-telephone icon-24px"></i>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
As per #MikeT's comment, but i think you want:
<ion-content style="top:0px">
Add this attribute to your ion-content
hide-nav-bar="true"
I want to create multilevel side menu in my ionic app.
My current code is:
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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-item class="item-icon-left" menu-close href="#/app/ProSum">
<i class="icon ion-android-clipboard" ></i>Profile Summary
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/AspDash">
<i class="icon ion-easel" ></i>Aspirations Dashboard
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/Profile">
<i class="icon ion-android-contact" ></i>Profile
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/SignOut">
<i class="icon ion-log-out" ></i>Sign Out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I click on any option, more options list should be displayed.
Profile Summary
Option 1
Option 2
Profile
Option 1
Option 2
Option 3
I have tried several code samples to get a back button in my home page. I couldnt see the nav back button. Where i am wrong?
<ion-side-menus enable-menu-with-back-views="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span>R</span>
<p align="center"> My App</p>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.settings">
Settings
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.logout">
Log out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home page code
<ion-view title="Home">
<ion-content>
<div class="list card">
<a class="item item-icon-left assertive" ui-sref="makerequest">
<i class="icon ion-ios-list-outline"></i>
Make New Request
</a>
<a class="item item-icon-left assertive" ui-sref="viewrequest">
<i class="icon ion-ios-copy"></i>
View Request
</a>
</div>
</ion-content>
</ion-view>
Added my home page code above.
Regards,
Sabarisri
I have a side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive" align-title="center">
<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" width="300">
<ion-content>
<div class="list">
<a class="item item-icon-left" ui-sref="app.bla" menu-close>
<i class="icon menu-icon ion-home"></i>
<h2>Bla</h2>
</a>
<a class="item item-icon-left" ui-sref="app.blub" menu-close>
<i class="icon menu-icon ion-person"></i>
<h2>Blub</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And i want to modify the title which is set in each view:
<ion-view view-title="MyTitle">
<ion-content>
</ion-content>
</ion-view>
How can i modify the title like setting it to bold or let it left align or right?