html - 如何使 ionic 网格像 Ionic 2 中的按钮一样可点击

Question

我使用“ion-grid”设计表格，但我的问题是要让它像按钮一样可点击。我只能通过使用 (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>

我想让每个网格都像按钮一样可点击(如果可能的话)而不改变网格的设计

Answer 1

我遇到过这样的问题，但我想进入其中一个山口。我找到的解决方案是在行内放置一个按钮标签，对于您的问题，它应该是这样的:

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