如何在离子2中创建一个手风琴列表？

Question

我想使用可扩展组在我的项目中集成手风琴,但对于最近的项目,我需要演绎扩展文本或更准确地溢出内容的手风琴.

你能告诉我它会怎么做ionic 2吗？

Answer 1

检查的演示手风琴名单内ionic 2的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';
    }
  }

感谢@ LPeteR90.

Answer 2

编辑:

好吧,我想我已经弄明白了.本教程对我帮助很大,所以我也建议你阅读它.

我已将代码拆分为组件,其中

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

}

和相应的HTML

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

包含我的自定义组件data-cards.data-cards有一个输入参数data,通过该参数传递数据列表.为了能够使用该data-cards组件,您需要设置该directives属性.Data是一个包含列表项中所需内容的类.

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

组件data-cards本身具有选择器和输入属性集,因此可以从data-listHTML中使用该组件.该函数toggleDetails用于切换是否显示列表条目的详细信息部分.

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

最后,在data-cards模板文件中,我使用构建数据列表,*ngFor并使details <div>元素的可见性依赖于data showDetails属性*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>

要使一切正常工作,您需要在我的代码中添加一些导入,因为例如,DataList类依赖于DataCards和Data.

我还建议更改data-cards模板的样式...没有样式,它看起来不漂亮:)

联合原始答复:

我现在正在做类似的事情.我认为这可以通过使用卡和实现*ngIf.

所以我想我会做类似的事情

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

在toggleDetails()我将showDetails变量设置为真...

这只是我的方法(并且未经测试),当我完成它时,我将编辑我的答案.