Comment puis-je créer une liste d'accordéon dans ionic 2?

Je souhaite intégrer un accordéon dans mon projet à l'aide extensible groupes, mais pour un projet récent, j'ai été d'avoir besoin d'un transfert d'un accordéon, qui a élargi le texte ou, plus précisément, débordé de contenu.

Pouvez-vous me dire comment il va faire dans les ionic 2 ?

source d'informationauteur mahmoudismail

Vérifier la démo de accordéon liste dans ionic 2 sur 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';
    }
  }

merci pour @LPeteR90.

6

EDIT:

Ok, je crois que j'ai compris. Ce tutoriel m'a beaucoup aidé, donc je vous conseille de le lire aussi.

J'ai divisé mon code en plusieurs composants, où
```
@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)
    ];
}
```
}

et le code HTML correspondant
```
<ion-content class="cards-bg">
   <data-cards [data]="dataList"></data-cards>
</ion-content>
```
contenir mon composant personnalisé data-cards. data-cards a un paramètre d'entrée datapar le biais de la liste de données est transmis. Pour être en mesure d'utiliser le data-cards composant, vous devez définir la directives attribut. Data est une classe contenant tout ce dont vous avez besoin en un élément de votre liste.
```
export class Data {
    constructor(public title: string, public details: string, public showDetails: boolean) {}
}
```
Le composant data-cards lui-même a le sélecteur et les entrées attributs, de sorte que le composant peut être utilisé à partir de la data-list HTML. La fonction toggleDetails est utilisé pour basculer si le détail dans le cadre d'une entrée de la liste est affichée.
```
@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;
        }
    }
}
```
Enfin, dans le data-cards fichier de modèle, j'ai créer la liste des données à l'aide de *ngFor et faire les détails <div> de l'élément de visibilité dépend des données showDetails attribut avec *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>
```
Pour obtenir tout ce à travail, vous aurez besoin d'ajouter des importations de mon code, car par exemple le DataList classe dépend de la DataCards et Data.

Je recommande également de changer le style de la data-cards modèle... Sans style, il n'a pas l'air magnifique exactement 🙂

ORIGINAUX NON MODIFIÉS RÉPONSE:

Je suis en train de travailler sur quelque chose de semblable à droite maintenant. Je pense que cela peut être implémentée à l'aide de cartes et de *ngIf.

Donc je pense que je vais faire quelque chose comme
```
<ion-card>
    <h2>Card Title</h2>
    <button (click)="toggleDetails()">+</button>
    <div *ngIf="showDetails">
        Here are some details for the title. 
    </div>
</ion-card>
```
Dans le toggleDetails()je mettrais le showDetails variable à true...

Ce n'est que mon approche (et non testé), je vais modifier ma réponse quand je suis fait de la mettre en œuvre.

Vous devez vous connecter pour publier un commentaire.