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

Question

我在 Html 有一架手風琴

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

我想在單擊時減小框、文本和文本的大小。 基本上減小了整個盒子的大小。 怎么做？

我在下面嘗試了這些，它們減少了 Header 文本和正文，但沒有減少框

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

我想將元素與頁面的 rest 對齊。

Answer 1

由於我沒有找到調整它大小的選項，我發現我必須使用 angular 生成的類（Shadow CSS 概念），這可以在控制台頁面的元素部分中看到。 在這種情況下，它是“.panel-heading”和“.panel-body”。

Use the angular class within your own class to make the effect IN styles.css to get the effect. 像這樣：

.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;
}

結果：

Answer 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>