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>
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 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>
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>
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