如何在Ionic 2中制作像按鈕一樣的離子網格

Question

我通過使用“離子網格”來設計表格，但我的問題是使其像按鈕一樣可點擊。 我只能通過使用（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

我遇到了像這樣的問題，但我想在其中一個col。 我找到的解決方案是在行內放置一個按鈕標簽，對於你的問題它應該是這樣的：

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

Answer 2

使用<button>標簽根據離子按鈕樣式設置其內容的樣式。 其中一個效果是onTouch動畫（漣漪效應）我認為OP是追求的。

您也可以通過在任何標簽中使用離子的<ion-ripple-effect>來實現這種漣漪效果，只要您將ion-activatable的類分配給父元素，如下所示：

<div class="ion-activatable">
   <ion-ripple-effect></ion-ripple-effect>
   Button Text
<div>

離子波紋效應的文檔