首页 > 解决方案 > ng bootstrap Accordion to cant add arrow down icon

问题描述

Any one know how to to add ng bootstrap Accordion for icon-arrow-down

I added this <i class="icon-arrow-down"></i> but not work

This is my code

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="Task Tyeps (5)">  <i class="icon-arrow-down"></i>
    <ng-template ngbPanelContent>
   text.....
    </ng-template>
  </ngb-panel>
</ngb-accordion>

I try to add like this

enter image description here

Thanks

标签: cssangularaccordionng-bootstrap

解决方案


最后我解决了我的问题

<ngb-accordion class="range-accordion">
    <ngb-panel>
        <ng-template ngbPanelTitle>
            <div class="d-flex justify-content-between">
                <div class="d-flex" style="font-weight: bold; color: #1c2128;">Checklist items</div>
                <div class="d-flex"><i class="icon-arrow-down"></i></div>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            text
        </ng-template>
    </ngb-panel>
</ngb-accordion>

根据我们的要求添加一些自定义样式。

.range-accordion .btn-link {
    width: 100%;
    text-decoration-line: none;
}

推荐阅读