i want to design a screen like this… i searched but i am not getting please help me how to design pop over like this ?
Hi akshaytaywade,
if I do get it right, this could help you.
Add a toolbar section to your header with an ngIf condition the check wether it should be displayed or not.
Add a button to your header (in my case a search icon, yours would be a plus I think)
<ion-header>
<ion-navbar>
<ion-buttons end>
<button ion-button side="secondary" (click)="toggleToolbar()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>Pagetitle</ion-title>
</ion-navbar>
<ion-toolbar *ngIf="toolbarVisible">
[YOUR CONTENT]
</ion-toolbar>
</ion-header>
Define a variable in your class and a function the catch the tap event on your button
export class MyApp {
toolbarVisible: boolean = false;
constructor(){
...
}
toggleToolbar(){
this.toolbarVisible = this.toolbarVisible ? false : true;
}
}
When you tap the plus button, it toggles the toolbarVisible variable and the ngIf condition shows or hides the toolbar.
Best regards
Greg
1 Like