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;
});
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'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.
<ion-view view-title="Title">
<ion-content>
Content Here
</ion-content>
</ion-view>
The above code gives me the default view of ionic I need to change the color of header keeping the default navigation controllers (like menu/back icon) instead of defining a new header bar as below.
<ion-view view-title="Title">
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Content Here
</ion-content>
</ion-view>
Is there a clean way to slove the problem?
For the ionic 2 you can change you background color for navbar like that And you can add custom colors http://ionicframework.com/docs/v2/theming/theming-your-app/
<ion-header>
<ion-navbar color="primary">
<ion-title>Connection Bluetooth</ion-title>
<ion-buttons end>
<button (click) = "startScanning()" ion-button>
<!--<ion-icon name="refresh-circle"></ion-icon>-->
<!--SCAN-->
<ion-icon name='refresh' md="md-refresh"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Just make any css class
.your-sample-class{
background: #color-code !important
}
And add this class to nav bar of your project this way:
<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>
You can add this line
<preference name="StatusBarBackgroundColor" value="#078ECD"/>
to the file config.xml for editing status bar panel's color
There is a plugin for it: link
Also if you want to change color only for header, add these lines for your css/scss:
ion-header-bar {
background-color: red;
}
or
.bar.bar-positive {
background-color: red;
}
or whatever
=)
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