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');
Related
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 a problem with Ionic Framework.
HTML of my app:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-title>
<img src="img/Logo.png" class="logo">
</ion-nav-title>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-footer-bar></ion-footer-bar>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I run my app, I can see menu button on the left side, but I don't want it. How can I hide this button permamently?
Which menu button is it that you see on the left? In your code it's set up correctly to show on the right. In any case, to hide a button, you could add ng-show="false" as an attribute to your <button> element.
Two solutions for you:
removing <button> tag i.e. <button menu-toggle="right" class="button button-icon icon ion-navicon"></button> will help.
If you don't want to remove <button>:
add ng-show="$root.showMenuIcon" to button & set the following code in controller(such as menuController) :
$scope.$on('$ionicView.beforeEnter', function (e) {
$scope.$root.showMenuIcon = false;
});
I'm new to Ionic and I'm trying to add back arrow to my project using Ionic framework. I'm using the simple code as follows:
<ion-header-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<h1 class="title">Title of my project</h1>
</ion-header-bar>
But I can't see the Ionic back button in my header anywhere.
Here some code for header in ionic.
<ion-view>
<ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-clear ion-arrow-left-c " ng-click="backButton()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-clear btn-white ion-android-settings header-icon-size " ng-click="openDrawer()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<!-- here content -->
</ion-content>
</ion-view>
<ion-header style="background-color: #D3D3D3;box-shadow: none;">
<ion-navbar>
<ion-title>
<ion-row no-padding>
<ion-col no-padding>
<ion-buttons left>
<button ion-button icon-only (click)="back()">
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col>
<div style="text-align: center;font-size: 20px; margin-top: 5px;">
Training Reports
</div>
</ion-col>
<ion-col></ion-col>
</ion-row>
</ion-title>
</ion-navbar>
</ion-header>
ion-nav-back-button is only displayed when your navigation stack has more than one page pushed onto it.
The following code shows this by displaying a page and then pushing the same page onto the navigation stack after 2 seconds. In the first page, the back arrow isn't displayed, but it is displayed on the second page and pressing it returns to the first page. The results can be tested in this JSFiddle that I created (which contains the same code).
HTML:
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<ion-app>
<ion-nav root='nav-page'></ion-nav>
</ion-app>
Javascript:
customElements.define(
'nav-page', class NavPage extends HTMLElement
{
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/">
</ion-back-button>
</ion-buttons>
<ion-title>
Page ${this.data ? this.data.page : 0}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
Page ${this.data ? this.data.page : 0}
</ion-content>
`;
}
});
const nav = document.querySelector('ion-nav');
let data = { page: 1 };
setTimeout(function() {
nav.push('nav-page', { data });
}, 2000);
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.
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