Question

我正在尝试从ng-bootstrap中为ng手风琴找到解决方案。

Accordin-是否有可能在行中的任何位置单击并展开/折叠？不仅在标签中...

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple" >
    <ng-template ngbPanelContent>
        Test text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Answer 1

使用自定义CSS应该很容易，例如：

component.css

ngb-accordion ::ng-deep .card-header {
    padding: 0;
}

ngb-accordion ::ng-deep .card-header button {
  width: 100%;
  padding: 1.125rem 2rem;
  text-decoration: none;
  text-align: left;

}
ngb-accordion ::ng-deep .card-header button:focus {
  box-shadow: none;
}

Stackblitz Example

Answer 2

这不是直接的答案，但我认为这是一个更好的解决方案

<div class="card">
 <div class="card-header" data-toggle="collapse" (click)="showBody=!showBody">
  The title
 </div>
  <div class="card-body" *ngIf="showBody">
   Test text
  </div>
</div>

为什么？它不需要任何3party。其高度灵活。并留下一个包含纯html的标记。仅使用角度属性。在此变体中，您可以在标题中添加html。前按钮，图像。只需在下面直接添加下一张卡片即可。任何悬停效果都可以使用额外的类轻松设置样式：

<div class="card my-accordian">

Answer 3

为什么不使用模板头并使用(click)="acc.toogle('ngb-panel-0')"？

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <!--give "id" to the pannel-->
  <ngb-panel id="ngb-panel-0">
    <!--use a ng-template ngbPanelHeader-->
    <ng-template ngbPanelHeader let-opened="opened">
      <!--it's only a div with a (click)--->
      <!-- acc is the template Reference variable of the accordion-->
      <!-- ngb-panel-0 is the "id" of the pannel-->
      <div (click)="acc.toggle('ngb-panel-0')" >
        Simple
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry 
       richardson ad squid. 3 wolf moon officia

    </ng-template>
  </ngb-panel>

单击行时，NGB手风琴展开

3 个答案: