【问题标题】:How to add a collapse icon in ngx-bootstrap Accordion如何在 ngx-bootstrap Accordion 中添加折叠图标
【发布时间】:2019-05-07 11:22:48
【问题描述】:

在我使用ngx-bootstrapAngular 应用程序中,我想添加一个折叠图标,它反映accordion 的状态(折叠/展开),如下所示:

【问题讨论】:

标签: css angular twitter-bootstrap ngx-bootstrap ngx-bootstrap-accordion


【解决方案1】:

你基本上可以在 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;
}

只需使用您最喜欢的图标的字体系列来设置 before 选择器的样式...

【讨论】:

【解决方案2】:

您可以使用accordion-group 输入isOpen

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

isContentOpen: boolean = false;

我推荐安装https://fontawesome.com/

【讨论】:

  • 我希望它这么简单,但是 1) 在手风琴组关闭时隐藏按钮,2) 按下按钮或切换面板时变量不会更新通过其他方式(例如单击标题本身),因此按钮字形不会保持同步。
  • 尽管如果你使用这里展示的accordion-heading 指令valor-software.com/ngx-bootstrap/#/accordion(例如&lt;button ... accordion-heading&gt;),除此之外所有需要的是在&lt;accordion-group (isOpenChange)="isContentOpen = !isContentOpen"&gt; 期间更新变量。
【解决方案3】:

这是一个对我有用的解决方案

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

【讨论】:

    【解决方案4】:

    以下答案适用于ngx-bootstrap@5.x.x。也解决了人们想要使用不同于 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>
    

    【讨论】:

    • 您如何确定#accordionGroupRef 的范围?
    • 无论何时使用&lt;ng-template&gt; 或像*ngIf*ngFor 这样的结构指令,它都会创建一个新的模板范围和模板引用变量:writesomecode.in/Angular/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-09-20
    • 2017-10-07
    • 2018-09-03
    • 2013-07-15
    • 2017-09-11
    • 1970-01-01
    • 2017-09-10
    相关资源
    最近更新 更多