时间戳

首页 > 解决方案 > 如何最小化 ngx-bootstrap 手风琴盒？

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

问题描述

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

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

页面的其余部分

标签： htmlresizeaccordionngx-bootstrap

解决方案

另一种方法是您可以使用[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>

推荐阅读