定制 ngbAccordion

Question

我在我的一个项目中使用 NgbAccordion，需要自定义它的文本颜色属性，但无法这样做。我写了 css 但它不会以任何方式影响手风琴。你可以看到我的代码here

我还遇到了 this 用户提到无法自定义 ngbAccordion，但我仍然想知道是否有人解决了这个问题。如果不是，我可以使用什么其他方法，而不是 bootstrap 手风琴，由于某些项目特定原因不允许在项目中使用 jquery 和 popper js，这就是原因。

Answer 1

在我上面提到的 github 问题 link 中，在同一个线程中我找到了这个解决方案并且它有效。使用了以下 css:

::ng-deep .card {
  margin-bottom: 20px;
}

::ng-deep .card .card-header.active > a > span {
  color: #1d2124;
}

也更新了 stackblitz 代码

Answer 2

你可以这样做

 <ng-template ngbPanelTitle>
          <div class="card title"><span class="steps">1</span>
            Step 1</div>
        </ng-template>
        <ng-template ngbPanelContent>
 <span class="content">  
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
          aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
          sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
          craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
</span>
        </ng-template>

并在 css

.title {
      background:#ccc;
       height:30px;
      color:#000;
    }
       .steps {
                  display: inline-block;
                  box-sizing: border-box;
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  border: 1px solid #000;
                  text-align: center;
                  margin-right: 10px;
                  color: #202A36;
            }
            .card {
              margin-bottom: 10px;
            }
            .content {
              color: #1b8cd3;
}

这是为标题提供背景颜色，就像您可以使用其他样式属性一样

定制 ngbAccordion

customizing ngbAccordion

angular-directive

ng-bootstrap

angular