离子段是离子项按钮中的单行

Question

我得到了followintg html：

universal:packageBin

这就是结果：

我发现<button ion-item (click)="doSome()" style="margin-left: 72px; display: block; padding-left: 0" > <div padding-left style="display: block"> <h6>Function</h6> <p>{{user.function}} </p> <h6 padding-top>About</h6> <p>{{user.about}}</p> <h6 padding-top>Task</h6> <p>{{user.task}}</p> </div> </button> 指令正在导致此问题。我该如何解决这个问题？

EDIT1：更多信息

我正在寻找的结果是这样的：

是手风琴的观点。基本上它是一个列表，每个项目都有手风琴组件。在手风琴我有上面的HTML。因为我希望手风琴中的项目可以通过涟漪效果进行点击，所以它必须是ion-item

手风琴：

<button ion-item></button>

简单的手风琴html：

export class AccordionComponent {

  @Input('expanded') expanded = false;

  constructor() {

  }

  toggle(){
    this.expanded = !this.expanded;
  }
}

EDIT2：
任何具有可扩展列表项的解决方案都可以。 listitem和expandedlistitem都需要涟漪效应。

Answer 1

请使用离子卡。您也可以将点击事件附加到卡上

<ion-card (click)="functionName()">
  <h6>Function</h6>
    <p>{{user.function}} </p>

    <h6 padding-top>About</h6>
    <p>{{user.about}}</p>

    <h6 padding-top>Task</h6>
    <p>{{user.task}}</p>
</ion-card>

Answer 2

这应该做多行段落。

<button ion-item (click)="doSome()" style="margin-left: 72px; display: block; padding-left: 0" >
<div padding-left style="display: block">
    <h6>Function</h6>
    <p text-wrap>{{user.function}} </p>

    <h6 padding-top>About</h6>
    <p text-wrap>{{user.about}}</p>

    <h6 padding-top>Task</h6>
    <p text-wrap>{{user.task}}</p>
</div>

当不在按钮标签中尝试文本换行时