Does anyone know how can I add a back button to the second level? In my example I need the back button when I'm on the "Settings" page:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear" ng-click="goBack()">Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="side-menu" slide-along offset="-15">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="#/event/settings" class="item" menu-close>Settings</a>
</ul>
</ion-content>
</ion-side-menu>
If I remove menu-close from the button, it's acting weird.
Related
The following button icon at the side menu is not showing...
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-bar>
</ion-pane>
<ion-side-menu side="left"></ion-side-menu>
</ion-side-menus>
The buttons won't show because you'll have to use them inside the <ion-view>tag and inside <ion-nav-buttons> tag.
See the following example from the Ionic Framework Documentation (link)
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
I have fixed the code as below. Thanks!!!
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
</ion-pane>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
You can also disable menus with logic:
<ion-menu id="NavMenu" persistent="true" [content]="content">
Be sure you haven't got some code like this hanging around!
import { MenuController} from 'ionic-angular';
...
constructor(
private menuCtrl: MenuController
) {
}
...
// In some other method..
// When you only have one ion menu in the template....
this.menuCtrl.enable(false, 'NavMenu');
I've this code below, it works fine on chrome browser for desktop, but when I run the app on android device, I can scroll the page but the scrollbar is not visible. Can you help me? This is my code:
<ion-view>
<ion-nav-title class="title title-center title-balanced">
{{confissaoTitle}}
</ion-nav-title>
<ion-nav-bar class="bar-positive">
<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-content padding="true">
<div ng-include="capitulourl"></div>
</ion-content>
<div class="bar bar-footer bar-positive">
<div class="button-bar">
<a class="button" ng-click="anterior('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')" ng-disabled="capituloId == 1">Anterior</a>
<a class="button" ng-click="indice('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')">Índice</a>
<a class="button" ng-click="proximo('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')" ng-disabled="ultimoCapitulo == capituloId">Próximo</a>
</div>
</div>
</ion-view>
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?
I have some problem. I really can't understand how it work.
In app.js i create state like this:
`...
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
controller: 'AppController',
templateUrl: "templates/menu.html"
})
.state('app.search', {
url: '/search',
views: {
'searchContent' : '<h1>ANTOHER CONTENT</h1>',
'menuContent': {
templateUrl: 'templates/test.html',
controller: 'TestController'
}
}
})
...`
You can see, two views "searchContent" and "menuContent".
Then i create two templates:
In this template, for tags, i added two names like in app.js
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" name="searchContent">
<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">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
test.html:
<ion-view>
<ion-content>
Some content
</ion-content>
</ion-view>
index.html:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
But on search page, searchContent no replaced by "<h1>ANTOHER CONTENT</h1>". How to fix this ?
First of all <ion-nav-bar></ion-nav-bar> is not used for rendering views and content but for the top navigation. Views are for <ion-view> or <ion-nav-view>
Secondly, In my opinion... One view is sufficient. I'm not sure what you were trying to achieve with the first content but if you just want to change the title of the page you can try this...
<ion-nav-bar class="bar-stable" name="searchContent">
<ion-nav-back-button>
</ion-nav-back-button>
<h1>ANTOHER CONTENT</h1>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
OR
use <ion-nav-title></ion-nav-title> inside your test.html or any page you want... http://ionicframework.com/docs/api/directive/ionNavTitle/
Hope this helps! :D