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
Related
I want to insert a slider just below the header(inside the ion-content). But I'm getting white space from the top, left and right as shown in the figure.
My HTML code for the slider is
<ion-navbar color="river">
<ion-row>
<ion-col width-10 style="text-align: right">
<button ion-button icon-only (click)="shop();" color="yel" clear end>
<ion-icon name="cart"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: center">
<button ion-button icon-only (click)="product();" color="yel" clear end>
<ion-icon name="pricetag"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: left">
<button ion-button icon-only (click)="feedback();" color="yel" clear end>
<ion-icon name="md-chatbubbles"></ion-icon>
</button>
</ion-col>
</ion-row>
how can I avoid white space in between the header and the slider?
May be your ion-content like this <ion-content padding></ion-content>, Remove the padding and try . <ion-content></ion-content>
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 ?
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>