如何使离子网格在Ionic 2中像按钮一样可点击 [英] how to make ion-grid clickable like button in Ionic 2
本文介绍了如何使离子网格在Ionic 2中像按钮一样可点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用"ion-grid"设计了表格,但是我的问题是要使其像按钮一样可点击.我只能使用(click)="functionX()来调用函数.
I designed table by using "ion-grid" but my problem in case to make it clickable like button. I could only call function by using (click)="functionX().
例如,这是我的网格,
<ion-grid style="padding:0px;" (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="padding:0px;" (click)="function2()">
<ion-row>
<ion-col col-6>
Text3<br>Text3<br>Text3
</ion-col>
<ion-col col-6>
Text4<br>Text4<br>Text4
</ion-col>
</ion-row>
</ion-grid>
我想使每个网格都可以像按钮一样点击(如果可能的话),而无需更改网格的设计
I want to make each grid clickable like button (if possible) without change the design of grids
推荐答案
我遇到了类似这样的问题,但我想在其中一个山洞里进餐.我发现的解决方案是在行内放置一个按钮标签,对于您的问题,它应该是这样的:
I had a problem like this one, but i wanted inside one of the col. The solution I found was to place a button tag inside the row, for your problem it should be something like this:
HTML
<ion-grid style="padding:0px;">
<button id='hidden-button' ion-button (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</button>
</ion-grid>
CSS
#hidden-button{
height: 100%;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
这篇关于如何使离子网格在Ionic 2中像按钮一样可点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文