イオングリッドでボタンのようにクリックできるようにする方法

Question

「イオングリッド」を使ってテーブルをデザインしましたが、ボタンのようにクリックできるようにするのが私の問題です。私は使用して（クリック）= "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

私はこのような問題を抱えていたが、私は内部のコルの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; 
}