如何在ionic 2中创建手风琴列表？

Question

我想在我的项目中集成一个折叠菜单，使用可展开的分组，但最近我需要一个可以展开文本或更准确地说是溢出内容的折叠菜单。

请问如何在ionic 2中完成此操作？

- Mahmoud Ismail

---

你能否与我们分享一下你到目前为止尝试过的内容？ - sebaferreras

我想创建一个像这个screenshot的手风琴列表。 - Mahmoud Ismail

Answer 1

在Github上查看ionic 2中手风琴列表的演示：

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 的贡献。

- Mahmoud Ismail

---

太棒了，真的有效。 - Sathish Sundar

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本身具有选择器和输入属性设置，因此可以从HTML data-list中使用组件。函数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 构建数据列表，并使用 *ngIf 使详细信息的 <div> 元素的可见性取决于数据的 showDetails 属性。

<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变量设置为true... 这只是我的方法（未经测试），我完成实施后会编辑我的答案。

- greyhairredbear

---

我已经更新了答案，因为我现在已经完成了我的实现。 - greyhairredbear

我会尝试并告诉我们结果，再次感谢您 :) - Mahmoud Ismail

请问您能否为我提供一个该代码的简单演示？ - Mahmoud Ismail

教程不可用。 - Khurshid Ansari