如何最小化ngx-bootstrap手风琴盒？

Question

我有一个Html中的手风琴。

<accordion [isAnimated]="true">
      <accordion-group heading="Date Created">
        {{ example text }}
      </accordion-group>
    </accordion>

我想缩小方框、文字和点击时文字的大小。基本上是缩小整个方框的大小。如何做到这一点？

我试过下面这些方法，可以减少标题文字和正文文字，但不能减少方框的大小。

<accordion-group panalClass="xyz">
        <button
          class="btn btn-link btn-block clearfix"
          accordion-heading
          type="button" panalClass="xyz"
        >
          <div class="pull-centre float-centre" style="background-color: blue;">
            Date Created
          </div>
        </button>
        {{ example text }}
      </accordion-group>

我想将元素与页面的其他部分对齐。

Answer 1

由于我没有找到调整大小的选项，我发现我必须使用angular生成的类（Shadow CSS概念），这可以在控制台页面的元素部分看到。在这种情况下，它是".panel-head "和".panel-body"。

在自己的类中使用angular类，使其在styles.css中得到效果。像这样。

.accordion-small {
  .panel-heading {
    padding: 0px;
  }
}

.accordion-small {
  .panel-body {
    padding: 5px;
    font-size: small;
    text-align: center;
  }
}

在html里

<accordion [isAnimated]="true" class="accordion-small">
      <accordion-group>
        <button
          class="btn btn-link btn-block clearfix"
          accordion-heading
          type="button"
        >
          <div class="pull-centre float-centre header-name">
            Date Created
          </div>
        </button>
        {{ example text }}
      </accordion-group>
    </accordion>

在组件css中

.header-name {
  font-size: small;
}

结果：