如何使离子网格像 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

推荐答案

我遇到了这样的问题，但我想在 col.我找到的解决方案是在行内放置一个按钮标签，对于您的问题，它应该是这样的:

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 中的按钮一样可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！