Can you help me, I try to create menu with grid image clickable to other page.
I try find the idea on the Internet and not found it.
<ion-col no-padding>
<ion-img src="/assets/bellwhite.png" full no-margin href="/notification"></ion-img>
</ion-col>
I try cover by button and item tag it’s not fit on grid col.
<ion-col no-padding>
<ion-item href="/notifications/" full no-margin>
<ion-img src="/assets/bellwhite.png" full no-margin></ion-img>
</ion-item>
</ion-col>
Hi @supakwong,
Neither ion-img
nor ion-item
have an href
property, that’s why it isn’t working. But you can make any element clickable by adding (click)=“myFunction()”
, just like in regular Angular.
Then inside this function you can navigate to whatever page you need by using the Angular Router (Ionic 4) or NavController (Ionic 3).
Best,
Rodrigo
Thank you @FdezRomero , It’s work fine.
constructor(public router: Router) {
}
onClickNotification() {
this.router.navigate(['notification']);
}
1 Like
hi @supakwong,
If you prefer use “href” in your image, try put like this:
<ion-grid>
<ion-row>
<ion-col>
<p>
<a href="your local">
<img src="/assets/yourimage.png" alt="" />
</a>
</p>
</ion-col>
<ion-col>
<p>
<a href="your local">
<img src="/assets/your image" alt="" />
</a>
</p>
</ion-col>
</ion-row>
</ion-grid>