如何设计 ng-bootstrap 手风琴？

Question

我想为 ng-bootstrap 的手风琴添加自定义淡入淡出样式！ 我怎样才能实现它？

Answer 1

以下解决方案适用于 ng-bootstrap 版本 5.xx & 6.xx & Angular 8 & 9

如果手风琴的内容从 DOM 中删除，则淡入淡出样式将不适用，因此，您需要添加[destroyOnHide]='false'以及ngb -accordion选择器。 现在，当内容被隐藏时，内容不会从 DOM 中删除。

手风琴.component.html：

<div class="card">
   <div class="card-body">

      <!-- ngb Accordion starts -->

      <ngb-accordion [destroyOnHide]='false' [closeOthers]="true" activeIds="panel1">

         <ngb-panel id="panel1">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 1 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               Donut caramels sweet roll bonbo
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel2">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 2 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               tootsie roll sweet gummi bears chocolate bar.
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel3">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 3 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               tootsie roll sweet gummi bears chocolate bar.
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel4" [disabled]="true">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 4 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               gummi bears jujubes cotton candy cake marshmallow. Tart cake danish dessert
            </ng-template>
         </ngb-panel>

      </ngb-accordion>

      <!-- ngb Accordion ends -->

   </div>
</div>

手风琴.component.scss：

// collapse toggle
::ng-deep .collapse {
  transition: max-height .55s, opacity .35s ease-in-out;
  max-height: 0;
  opacity: 0;
  display: block !important;

  &.show {
    max-height: 100rem;
    opacity: 1;
  }
}

::ng-deep .accordion {
  .card {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .04) !important;

    .card-header {
      // padding-top: 0;
      padding: 0;

      button {
        padding: 1.2rem;
        width: 100%;

        span {
          float: left;
          font-size: 1.2rem;
        }
      }
    }

    .card-body {
      padding: 1rem;
    }
  }
}

你可以从这里看到现场演示。