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

Question

我想使用可扩展组将手风琴集成到我的项目中，但对于最近的项目，我需要手风琴的再现来扩展文本或更准确地说是溢出内容。

你能告诉我如何在 ionic 2 内完成吗？

Answer 1

编辑：

好的，我想我已经明白了。 This tutorial 对我帮助很大，所以我也推荐阅读。

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

@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 是一个 class，其中包含列表项中您需要的所有内容。

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

组件 data-cards 本身具有选择器和输入属性集，因此可以从 data-list HTML 使用该组件。函数 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 构建了数据列表，并使细节 <div> 元素的可见性取决于数据 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 class 取决于 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...

这只是我的方法（未经测试），我将在完成实施后编辑我的答案。

Answer 2

查看 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。

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

How can I create an Accordion List within ionic 2?

accordion

toggle

ionic2