Ionic 3 развернуть строку при щелчке по столбцу

Работающему приложению ionic 3 необходимо расширять строку при любом щелчке по столбцу.

Это моя цель:

1) экран с двумя колонками

Ionic 3 развернуть строку при щелчке по столбцу

2) экран в расширяемой строке для каждого столбца.

Ionic 3 развернуть строку при щелчке по столбцу

что я сделал после https://www.joshmorony.com/creating-an-accordion-list-in-ionic/, но он расширит столбец внутри столбца. мне нужна строка при выборе столбца.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
1 803
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

По идее должно быть так же:

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

спасибо за ответ: но вашего ответа мало. Мне нужно установить событие щелчка в столбце, а в столбце с щелчком мне нужно показать его содержимое в строке. но проблема составляет 2 кулмна, и необходимо добавить строку с содержимым, которое было выбрано / выбрано.

Naitik 10.08.2018 07:59
Ответ принят как подходящий

Я нахожу лучший способ сделать это и его работу для меня.

<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> может создавать проблемы

Arj 1411 14.08.2018 10:54

Другие вопросы по теме