Работающему приложению ionic 3 необходимо расширять строку при любом щелчке по столбцу.
Это моя цель:
1) экран с двумя колонками
2) экран в расширяемой строке для каждого столбца.
что я сделал после https://www.joshmorony.com/creating-an-accordion-list-in-ionic/, но он расширит столбец внутри столбца. мне нужна строка при выборе столбца.
По идее должно быть так же:
<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>
Если вам нужны плавные переходы, добавьте анимацию в нижнюю строку или используйте ngClass вместо ngIf с изменением высоты от 0 до xx и добавьте переход css.
Я нахожу лучший способ сделать это и его работу для меня.
<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>
В вашем файле .ts
categories = [];
rows: any;
listItemExpanded = false;
listItemExpandedData: any;
Ответ API
this.categories = data.posts;
this.rows = Array.from(Array(Math.ceil(this.categories.length / 2)).keys());
Переключить функцию
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]
Просто для вашей информации. В строке максимальная ширина столбца должна быть 12. Это <ion-col col-12 * ngIf = "listItemExpanded === i" class = "ItemExpandedData" [class.collapsed] = "! ListItemExpanded"> {{listItemExpandedData ?. title}} </ion-col> может создавать проблемы
спасибо за ответ: но вашего ответа мало. Мне нужно установить событие щелчка в столбце, а в столбце с щелчком мне нужно показать его содержимое в строке. но проблема составляет 2 кулмна, и необходимо добавить строку с содержимым, которое было выбрано / выбрано.