Как создать список аккордеона в ионном 2?

Question

Я хочу интегрировать аккордеон в моем проекте с помощью расширяемых групп, но для недавнего проекта мне нужно было выполнить аккордеон, который расширил текст или, точнее, переполненный контент.

Можете ли вы сказать мне, как это будет сделано в течение ionic 2?

Answer 1

Проверить демо список аккордеона в ionic 2 на Github:

https://github.com/mahmoudissmail/ionic2Accordion

.html

<ion-content padding> 
    <ion-list> 
    <ion-list-header> 
     Ionic 2 Accordion Example. 
    </ion-list-header> 
    <ion-item padding *ngFor="let d of data" (click)="toggleDetails(d)"><ion-icon color="primary" item-right [name]="d.icon"></ion-icon> 
     {{d.title}} 
     <div *ngIf="d.showDetails">{{d.details}}</div> 
    </ion-item> 
    </ion-list> 
</ion-content> 

.ts

export class HomePage { 

    data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = []; 

    constructor(public navCtrl: NavController) { 
    for(let i = 0; i < 10; i++){ 
     this.data.push({ 
      title: 'Title '+i, 
      details: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 
      icon: 'ios-add-circle-outline', 
      showDetails: false 
     }); 
    } 
    } 

    toggleDetails(data) { 
    if (data.showDetails) { 
     data.showDetails = false; 
     data.icon = 'ios-add-circle-outline'; 
    } else { 
     data.showDetails = true; 
     data.icon = 'ios-remove-circle-outline'; 
    } 
    } 

спасибо за @ LPeteR90.

Answer 2

EDIT:

Хорошо, я думаю, что я понял это. This tutorial помог мне, поэтому я бы порекомендовал его прочитать.

Я разделить свой код на компоненты, где

@Component({ 
    directives: [DataCards], 
    templateUrl: 'build/pages/data-list/data-list.html' 
}) 

export class DataList { 

    public dataList: Data[]; 

    constructor() { 
     this.dataList = [ 
      new Data('Test title', 'Test Details 1, 2, 3, 4, 5', false), 
      new Data('Second title', 'These are the details for my second title :)', false) 
    ]; 
} 

}

и соответствующий HTML

<ion-content class="cards-bg"> 
    <data-cards [data]="dataList"></data-cards> 
</ion-content> 

содержат мой пользовательский компонент data-cards. data-cards имеет входной параметр data, через который передается список данных. Чтобы иметь возможность использовать компонент data-cards, вам необходимо установить атрибут directives. Data - это класс, содержащий все, что вам нужно, в элементе вашего списка.

export class Data { 
    constructor(public title: string, public details: string, public showDetails: boolean) {} 
} 

Компонент data-cards сам по себе имеет селектор входов и атрибуты набора, поэтому компонент может быть использован из data-list HTML. Функция toggleDetails используется для переключения, отображается ли деталь детали записи списка.

@Component({ 
    selector: 'data-cards', 
    inputs: ['data'], 
    templateUrl: 'build/pages/data-cards/data-cards.html' 
}) 

export class DataCards { 
    public data: Data[]; 
    constructor() {} 

    toggleDetails(data: Data) { 
     if (data.showDetails) { 
      data.showDetails = false; 
     } else { 
      data.showDetails = true; 
     } 
    } 
} 

Наконец, в файле data-cards шаблона, я создать список данных, используя *ngFor и сделать детали видимость <div> элемента зависит от данных showDetails атрибута с *ngIf.

<ion-card *ngFor="let d of data"> 
    <h1>{{d.title}}</h1> 
    <button (click)="toggleDetails(d)">+</button> 
    <div *ngIf="d.showDetails">{{d.details}}</div> 
</ion-card> 

Чтобы получить все на работу, вам нужно будет добавить импорт в мой код, так как, например, класс DataList зависит от DataCards и Data.

Я также рекомендую изменение стиля data-cards шаблона ... Без стиль, это не выглядит красиво точно :)

НЕОТРЕДАКТИРОВАННЫЙ ОРИГИНАЛЬНЫЙ ОТВЕТ:

Я работаю над чем-то похоже прямо сейчас. Я думаю, что это можно реализовать, используя карты и *ngIf.

Так что я думаю, что я буду делать что-то вроде

<ion-card> 
    <h2>Card Title</h2> 
    <button (click)="toggleDetails()">+</button> 
    <div *ngIf="showDetails"> 
     Here are some details for the title. 
    </div> 
</ion-card> 

В toggleDetails() я бы установить переменную showDetails истина ...

Это только мой подход (и непроверенный), я собираюсь отредактировать свой ответ, когда я закончил его реализацию.