Wie kann ich eine Akkordeonliste innerhalb von ionic 2 erstellen?

Question

Ich möchte ein Akkordeon in mein Projekt mit erweiterbaren Gruppen integrieren, aber für ein neues Projekt brauchte ich eine Wiedergabe eines Akkordeons, das Text oder genauer übergelaufenen Inhalt erweiterte.

Können Sie mir sagen, wie es in ionic 2 getan werden?

Answer 1

Schauen Sie sich die Demo von Akkordeon Liste innerhalb ionic 2 auf 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'; 
    } 
    } 

danke für @ LPeteR90.

Answer 2

EDIT:

Ok, ich glaube, ich habe es herausgefunden. This tutorial hat mir sehr geholfen, also würde ich empfehlen es auch zu lesen.

ich meinen Code oben in Komponenten aufgeteilt haben, wo

@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) 
    ]; 
} 

}

und die entsprechenden HTML-

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

data-cards meine eigene Komponente enthalten. data-cards hat einen Eingabeparameter data, durch den die Liste der Daten übergeben wird. Um die Komponente data-cards verwenden zu können, müssen Sie das Attribut directives festlegen. Data ist eine Klasse, die alles enthält, was Sie in einem Element Ihrer Liste benötigen.

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

Die Komponente data-cards selbst hat den Wähler und Eingänge Attribute festlegen, so kann die Komponente aus dem data-list HTML verwendet werden. Mit der Funktion toggleDetails wird umgeschaltet, ob der Detailteil eines Listeneintrags angezeigt wird.

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

schließlich in der data-cards Vorlagendatei, baue ich die Liste der Daten oben mit *ngFor und mache die Details <div> Element Sichtbarkeit abhängig von den Daten showDetails Attribute mit *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> 

alles bekommen Sie da zum Beispiel einige Importe zu meinem Code hinzufügen müssen arbeiten Die Klasse DataList hängt von DataCards und Data ab.

Ich empfehle auch den Stil der data-cards Vorlage zu ändern ... Ohne gestylt zu werden, ist es nicht schön aussehen genau :)

UNEDITED ORIGINAL ANTWORT:

Ich arbeite an etwas ähnlich jetzt. Ich denke, dass dies mit Karten und *ngIf implementiert werden kann.

Also ich denke, ich so etwas wie

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

Im toggleDetails() tun werde ich die showDetails Variable auf true gesetzt würde ...

Dies ist nur mein Ansatz (und ungetestet), ich werde meine Antwort bearbeiten, wenn ich fertig bin, es zu implementieren.