how to make ion-grid clickable like button in Ionic 2

user_6152553 0
Viewed 5951

I designed table by using "ion-grid" but my problem in case to make it clickable like button. I could only call function by using (click)="functionX().

for example this is my grid,

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

I want to make each grid clickable like button (if possible) without change the design of grids

ionic2 click button grid html
2 Answers

I had a problem like this one, but i wanted inside one of the col. The solution I found was to place a button tag inside the row, for your problem it should be something like this:

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

Using the <button> tag styles its contents according to the ionic button style. One of these effects is the onTouch animation (ripple effect) I think the OP is after.

You can also achieve this ripple effect by using ionic's <ion-ripple-effect> within any tag, as long as you assign the class ion-activatable to the parent element, like so:

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

Documentation for ionic-ripple-effect

user_20509410
Related