如何设计 ng-bootstrap 手风琴的样式？答案

【问题标题】：How to style ng-bootstrap accordion?如何设计 ng-bootstrap 手风琴的样式？
【发布时间】：2020-06-05 13:42:49
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

如果 accordion 的内容从 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;
    }
  }
}

您可以通过here.观看现场演示

【讨论】：