I created a navbar like this:
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button (click)="goHome()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
The problem is that the Home button is showing with some strange grey background like in the image below:
I'm using Ionic2 RC3
How can I fix it?
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button ion-button icon-only item-right (click)="goHome()">
<ion-icon name="home" ></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
Related
when i click home in a menu, there is used [this.navCtrl.setRoot(homepage);].
in that page it does not display menu button.
actullay this is my home page:
when i set setroot for homepage it shows like this
Html code in header:
<button ion-button menuToggle style="margin-top: 10px;" >
<ion-icon name="menu" style="color: white;"></ion-icon>
</button>
menu code:
<ion-menu [content]="mycontent" type="overlay"> <ion-content>
<ion-list class="nobottomborder">
<ion-item (click)="dashboard()">
<ion-icon ios="ios-home" md="md-home" class="sidebaricon"></ion-icon>
Home
</ion-item>
<ion-item (click)="addcart()">
<ion-icon ios="ios-cart" md="md-cart" class="sidebaricon"></ion-icon>
My Cart
</ion-item>
<ion-item (click)="orders()">
<ion-icon ios="ios-list-box" md="md-list-box" class="sidebaricon"></ion-icon>
My Orders
</ion-item>
<ion-item (click)="logout()">
<ion-icon ios="ios-exit" md="md-exit" class="sidebaricon"></ion-icon>
Logout
</ion-item>
<ion-item class="powered">
Powered by
<ion-row>
<img src="assets/imgs/logo.png" alt="logo">
</ion-row>
</ion-item>
</ion-list> </ion-content>
</ion-menu>
I have added like below and it is working great(I have homepage root initial) :
Home:
<ion-navbar>
<button menuToggle ion-button>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
I am attempting to add in a side menu in my ionic project. I've viewed the Ionic framework docs and the API, but even with that help I still can't get it to show. This is my html code:
<ion-menu [content]="content" side="right" persistent="true">
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item>
Home
</button>
<button ion-item>
Friends/Collaborators
</button>
<button ion-item>
Plans: In Progress
</button>
<button ion-item>
Plans: Completed
</button>
<button ion-item>
Plans: Past Events
</button>
<button ion-item>
Ideas
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content ></ion-nav>
I haven't added in click functions yet; I'm more focused on getting the menu to display first.
I'm using the Ionic framework. Clicking on the search icon in the header will bring up a search bar.
However, the header moves in the process.
What's the problem?
And can you reduce the header height and eliminate the border?
Codes:
Main page:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar no-border-top>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
content part ( searchBar )
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled"
(ionInput)="filterItems($event)"
(ionCancel)="cancelSearch($event)"
(ionClear) = "cancelSearch($event)"
[showCancelButton]="true"></ion-searchbar>
<ion-buttons end>
<button ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Content part script:
public toggle(): void {
this.toggled = this.toggled ? false : true;
}
public cancelSearch(ev){
ev.target.value='';
this.toggled = false;
}
You'll want to place the first button in an ion-buttons directive too:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-searchbar *ngIf="toggled"
(ionInput)="filterItems($event)"
(ionCancel)="cancelSearch($event)"
(ionClear) = "cancelSearch($event)"
[showCancelButton]="true"></ion-searchbar>
<ion-buttons end>
<button ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Here is the ionic code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title style="text-align:left;">Handy Mandy</ion-title>
</ion-navbar>
</ion-header>
How do I change the whole bar color like steam application ?
Is it possible to put 2 buttons on right side of navigation bar in ionic2?
This code only displays search button on right side.
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Items</ion-title>
<ion-buttons end>
<button (click)="searchTapped($event)">
<ion-icon name="search"></ion-icon>
</button>
<button (click)="createTapped($event)">
<ion-icon name="ion-plus-round"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
Thanks in advance.
Yes, your code places two buttons on the right side of the navbar