Question Comment créer une liste d'accordéon dans ionic 2?


Je veux intégrer un accordéon dans mon projet en utilisant des groupes extensibles, mais pour un projet récent, j'avais besoin d'une interprétation d'un accordéon qui élargissait le texte ou plus précisément le contenu débordé.

accordion.jpg

Pouvez-vous me dire comment cela se fera au sein de ionic 2 ?


15
2017-07-16 16:02


origine


Réponses:


Vérifiez la démo de liste d'accordéon 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.


15
2017-08-14 00:09



MODIFIER:

Ok, je pense que je l'ai compris. Ce tutoriel m'a beaucoup aidé, alors je vous recommande de le lire aussi.

J'ai divisé mon code en 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>

contient mon composant personnalisé data-cards. data-cards a un paramètre d'entrée data, à travers lequel la liste de données est transmise. Pour pouvoir utiliser le data-cards composant, vous devez définir le directives attribut. Data est une classe contenant tout ce dont vous avez besoin dans 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 possède le sélecteur et les attributs d'entrée définis, de sorte que le composant peut être utilisé à partir du data-list HTML. La fonction toggleDetails est utilisé pour déterminer si la partie détail d'une entrée de 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, je construis la liste des données en utilisant *ngFor et faire les détails <div> la visibilité de l'élément dépend des données showDetails attribuer 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 que tout fonctionne, vous devez ajouter certaines importations à mon code, par ex. la DataList la classe dépend de DataCards et Data.

Je recommande également de changer le style du data-cards modèle ... Sans être stylé, il n'a pas l'air magnifique exactement :)

UNEDITED ORIGINAL ANSWER:

Je travaille sur quelque chose de similaire en ce moment. Je pense que cela peut être mis en œuvre en utilisant des cartes et *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 à vrai ...

Ceci est juste mon approche (et non testé), je vais éditer ma réponse lorsque je l’ai fait.


6
2017-07-16 19:55