web-dev-qa-db-fra.com

Comment puis-je 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 a développé du texte ou plus précisément du contenu débordé.

accordion.jpg

Pouvez-vous me dire comment cela se fera dans ionic 2?

toggleaccordionionic2
17
mahmoudismail

Consultez la démo de liste d'accordéons dans ionic 2 on 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
mahmoudismail

MODIFIER:

Ok, je pense que je l'ai compris. Ce tutoriel m'a beaucoup aidé, donc je recommanderais de le lire également.

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 passée. Pour pouvoir utiliser le composant data-cards, Vous devez définir l'attribut directives. 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 a le sélecteur et les attributs d'entrée définis, de sorte que le composant peut être utilisé à partir du code HTML data-list. La fonction toggleDetails est utilisée pour basculer 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 fichier modèle data-cards, Je crée la liste des données à l'aide de *ngFor Et je fais dépendre la visibilité de l'élément <div> Sur l'attribut data showDetails 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 devrez ajouter quelques importations à mon code, car par exemple la classe DataList dépend de DataCards et Data.

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

RÉPONSE ORIGINALE NON MODIFIÉE:

Je travaille sur quelque chose de similaire en ce moment. Je pense que cela peut être implémenté en utilisant des cartes et *ngIf.

Je pense donc 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 la toggleDetails() je définirais la variable showDetails sur true ...

Ceci est juste mon approche (et non testée), je vais modifier ma réponse quand j'aurai fini de l'implémenter.

6
LPeteR90