如何设置 ng-bootstrap 手风琴的样式？

Question

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

Answer 1

Following Solution is for ng-bootstrap version 5.x.x & 6.x.x & Angular 8 & 9

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

accordion.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>

accordion.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.

的现场演示

如何设置 ng-bootstrap 手风琴的样式？

How to style ng-bootstrap accordion?

ng-bootstrap

angular

angular9