单击行时 Ngb-accordion 展开

Question

我正在尝试为 ng-bootstrap 中的 ng-accordion 找到解决方案。

Accordin - 有没有可能点击行中的任何地方然后 expand/collapse 呢？不仅在标签中...

<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 的标记。仅使用 angular 属性。在此变体中，您可以在 header 中添加 html。前按钮，图像。直接在下面添加下一张卡片。任何悬停效果都可以使用额外的 class:

轻松设置样式

<div class="card my-accordian">

Answer 3

为什么不使用模板 header 而使用 (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-accordion 展开

Ngb-accordion expand when click on row

angular

bootstrap-4

ng-bootstrap