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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Ionic 2中制作像按钮一样的离子网格相关的知识,希望对你有一定的参考价值。

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

以上是关于如何在Ionic 2中制作像按钮一样的离子网格的主要内容,如果未能解决你的问题,请参考以下文章

像 Ionic 2 中的模态一样警报

如何首先放置离子标签?

在离子2中链接sqlite事务

在离子中创建一个表

如何制作像redbus一样的座位布局?

如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡?