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

【问题标题】：How to Minimize ngx-bootstrap Accordion box?如何最小化 ngx-bootstrap 手风琴盒？
【发布时间】：2020-05-02 11:41:28
【问题描述】：

我有一个 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>

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

【问题讨论】：

标签： html resize accordion ngx-bootstrap

【解决方案1】：

由于我没有找到调整它大小的选项，我发现我必须使用 angular 生成的类（Shadow CSS 概念），这可以在控制台页面的元素部分中看到。在这种情况下，它是“.panel-heading”和“.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;
}

结果：

【讨论】：

【解决方案2】：

另一种方法是您可以使用 [panelClass]="customClass" 为您的 ngx-bootstrap 手风琴定义自定义样式。

在css中：

.custom-accordion-style {
    /*any size you want*/
    line-height: 30px;
    font-size: small;
}

在ts中：

customClass='custom-accordion-style';

在html中：

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

【讨论】：