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

Posted 2021-04-15

我通过使用“离子网格”来设计表格，但我的问题是使其像按钮一样可点击。我只能通过使用（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>

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

答案

我遇到了像这样的问题，但我想在其中一个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;
}

另一答案

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

你也可以通过在任何标签中使用ionic的<ion-ripple-effect>来实现这种连锁效果，只要你将类ion-activatable分配给父元素，就像这样：

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

Documentation for ionic-ripple-effect