如何設計 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;
    }
  }
}

你可以從這里看到現場演示。