如何在 Ionic 2 中使离子网格像按钮一样可点击答案

【问题标题】：how to make ion-grid clickable like button in Ionic 2如何在 Ionic 2 中使离子网格像按钮一样可点击
【发布时间】：2018-03-03 13:13:38
【问题描述】：

我使用“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>

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

【问题讨论】：

所以你是说这个函数没有被调用？
@suraj 调用的函数.. 但是我的意思是当我在网格上移动鼠标时，鼠标指针不会像按钮一样改变。
可以通过简单的css来完成。但是你为什么关心鼠标指针？当您的应用在移动设备上运行时，没有鼠标可看。
因为在某些设备中，如果我单击按钮而不是单击网格而不是单击按钮，则会显示效果。我知道这一点并不重要，但如果我能解决它会很好
能否请您检查将tappable 添加到网格<ion-grid tappable ...></ion-grid> 是否有效？

标签： html button ionic2 grid click

【解决方案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;
}

【讨论】：

【解决方案2】：

使用<button> 标签根据离子按钮样式设置其内容。其中一种效果是我认为 OP 追求的 onTouch 动画（波纹效果）。

您也可以通过在任何标记中使用 ionic 的 <ion-ripple-effect> 来实现这种涟漪效应，只要将类 ion-activatable 分配给父元素，如下所示：

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

Documentation for ionic-ripple-effect

【讨论】：