CODEWITHSUNDEEP
ionic-frameworkgridionic3
Naitik
Naitik

Reputation: 1465

ionic 3 expand row on column click

Working ionic 3 app need to expand row on any click on column.

This is my goal:

1) screen with two coloumn

enter image description here

2) screen on expandable row for each column.

enter image description here

what i did following https://www.joshmorony.com/creating-an-accordion-list-in-ionic/ but it will expand column inside column. i need row on column selection.

Upvotes: 2

Views: 2269

Answers (2)

kautikmistry
kautikmistry

Reputation: 746

I find the best way to do this and its Work for me.

<ion-grid class="card-background-page" no-padding>
    <ion-row *ngFor="let i of rows" no-padding>
        <ion-col *ngFor="let category of categories | slice:(i*2):(i+1)*2" col-6 col-md-4 col-xl-3 (click)="expandItem(category, i)">
            <ion-card>
                <img src="{{category?.url}}" />
                <div [ngClass]="(listItemExpandedData?.id === category?.id) ? '' : 'textMiddle'">
                    <div class="card-title" [hidden]="listItemExpandedData?.id === category?.id">{{category?.title | slice:0:20}}</div>
                </div>
            </ion-card>
        </ion-col>
        <ion-col col-12 *ngIf="listItemExpanded === i" class="ItemExpandedData" [class.collapsed]="!listItemExpanded"> {{listItemExpandedData?.title}}</ion-col>
    </ion-row> </ion-grid>

In your .ts file

categories = [];
rows: any;
listItemExpanded = false;
listItemExpandedData: any;

API Response

this.categories = data.posts;
this.rows = Array.from(Array(Math.ceil(this.categories.length / 2)).keys());

Toggle Function

expandItem(item, i){
    if(!this.listItemExpandedData) {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
    } else {
      if(item.id === this.listItemExpandedData.id  ){
        this.listItemExpanded = false;
        this.listItemExpandedData = [];
      } else {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
      }
    }
}

Css

[ion-card {
            position: relative;
            text-align: center;
            img {
                height: 140px !important;
            }
        }

        .card-title {
            position: absolute;
            top: 25%;
            font-size: 1.4em;
            width: 100%;
            font-weight: bold;
            color: #fff;
            padding: 0px 50px;
        }

        .card-subtitle {
            font-size: 1.0em;
            position: absolute;
            top: 52%;
            width: 100%;
            color: #fff;
        }
        .textMiddle {
            background: #1c4d78d9;
            height: 150px;
            top: 0px;
            position: absolute;
            left: auto;
            width: -webkit-fill-available;
        }

        .ItemExpandedData{
            padding: 16px !important;
            transition: 0.2s linear;
        }
        ion-card.card{
            margin: 0;
            border-radius: 0px;
            box-shadow: none
        }][1]

See Result

Upvotes: 2

Chris
Chris

Reputation: 4386

In theory it should be the same:

<ion-row (click)="selected =´row1´">
   <ion-col>Field 1 </ion-col>
   <ion-col>Field 2 </ion-col>
</ion-row>
<ion-row *ngIf="selected ==´row1´">
   <ion-col>Your Info text</ion-col>
</ion-row>

If you want smooth transitions, add some animation to the lower row, or use ngClass instead of ngIf with changing the height from 0 to xx and add css transition.

Upvotes: 1

Related Questions