[英]How to add a collapse icon in ngx-bootstrap Accordion
In my Angular app that is using ngx-bootstrap , I would like to add a collapse icon which reflects the status of the accordion (collapsed/expanded) like the following:在我使用ngx-bootstrap的Angular应用程序中,我想添加一个折叠图标来反映手风琴的状态(折叠/展开),如下所示:
You can basically do this in css:你基本上可以在 css 中做到这一点:
.accordion-toggle[aria-expanded="true"]:before {
content: "\f107";
font: normal normal normal 14px/1 FontAwesome;
}
.accordion-toggle[aria-expanded="false"]:before {
content: '\f106';
font: normal normal normal 14px/1 FontAwesome;
}
Just have to style the before selector with the font familly of your favorite icon...只需要使用您最喜欢的图标的字体系列来设置 before 选择器的样式...
Here is a solution that worked for me这是一个对我有用的解决方案
<accordion-group [isOpen]="false" #myGroup>
<button class="btn btn-light float-right">
{{ myGroup?.isOpen ? 'Opened' : 'Closed' }}
<i class="fas" [ngClass]="{'fa-caret-down': myGroup?.isOpen, 'fa-caret-up': !myGroup?.isOpen}"></i>
</button>
</accordion-group>
You can use the accordion-group
input isOpen
.您可以使用
accordion-group
输入isOpen
。
HTML HTML
<accordion-group [isOpen]="isContentOpen">
<button class="btn btn-light float-right">
<i *ngIf="isContentOpen" class="fas fa-caret-up">Open</i>
<i *ngIf="!isContentOpen" class="fas fa-caret-down">Close</i>
</button>
</accordion-group>
TS TS
isContentOpen: boolean = false;
I recommend installing https://fontawesome.com/我建议安装https://fontawesome.com/
Following answer works with ngx-bootstrap@5.xx
.以下答案适用于
ngx-bootstrap@5.xx
。 Also solves the problem for people wanting to use something different than FontAwesome:还解决了想要使用与 FontAwesome 不同的东西的人的问题:
<!-- Please note that the #accordionGroupRef is scoped! -->
<accordion-group
*ngFor="let number of [1,2,3,4];"
[isOpen]="false"
#accordionGroupRef
>
<!-- Header -->
<h5 class="m-0" accordion-heading>
{{ accordionGroupRef.isOpen ? "OPEN" : "CLOSED"}}
I am accordion {{number}}
<span class="float-right"> I float all the way on the right!</span>
</h5>
<!-- Content -->
Accordion content
</accordion-group>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.