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>

Documentation for ionic-ripple-effect

如何在Ionic 2中制作像按钮一样的离子网格

2 个答案: