2016-07-16 98 views
14

Voglio integrare una fisarmonica nel mio progetto usando gruppi espandibili ma per un progetto recente, avevo bisogno di una versione di una fisarmonica che espandesse il testo o più precisamente il contenuto in overflow.Come posso creare una lista di fisarmonica all'interno di ionic 2?

accordion.jpg

Potete dirmi come andrà fatto all'interno ionic 2?

+0

Potete per favore condividere con noi cosa avete provato finora? – sebaferreras

+0

voglio creare un elenco di fisarmoniche come questo [screenshot] (https://s31.postimg.org/jzd2yzp7f/accordion.jpg) – mahmoudismail

risposta

14

Controllare la demo di lista fisarmonica all'interno ionic 2 su 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'; 
    } 
    } 

grazie per @ LPeteR90.

+1

Grazie signore, sta funzionando per me – core114

5

EDIT:

Ok, credo di aver capito. This tutorial mi ha aiutato molto, quindi consiglierei di leggerlo anche.

Ho diviso il mio codice fino in componenti, dove

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

}

e il corrispondente codice HTML

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

contenere la mia componente personalizzato data-cards. data-cards ha un parametro di input data, attraverso il quale viene passato l'elenco dei dati. Per poter utilizzare il componente data-cards, è necessario impostare l'attributo directives. Data è una classe che contiene tutto ciò di cui hai bisogno in una voce del tuo elenco.

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

Il componente data-cards sé ha il selettore ed ingressi attributi impostati, in modo che il componente può essere utilizzato dal data-list HTML. La funzione toggleDetails viene utilizzata per attivare o disattivare la parte di dettaglio di una voce di elenco.

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

Infine, nel file data-cards modello, costruisco la lista dei dati utilizzando *ngFor e diffondono i dati di visibilità <div> dell'elemento dipende dati showDetails attributo con *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> 

Per far funzionare tutto è necessario aggiungere alcune importazioni al mio codice, poiché ad es. la classe DataList dipende da DataCards e Data.

Consiglio anche cambiare lo stile del modello data-cards ... Senza essere in stile, non sembra esattamente bella :)

INEDITA RISPOSTA ORIGINALE:

sto lavorando a qualcosa simile ora. Penso che questo possa essere implementato usando le carte e *ngIf.

Così penso di fare qualcosa di simile

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

Nel toggleDetails() vorrei impostare la variabile showDetails true ...

Questo è solo il mio approccio (e non testato), ho intenzione di modificare la mia risposta quando ho finito di implementarlo.

+0

ok grazie per la risposta – mahmoudismail

+0

Ho aggiornato la risposta, dato che ho finito la mia implementazione ormai. – LPeteR90

+0

Proverò a dirci il risultato, grazie ancora :); – mahmoudismail