如何使用 Angular 或 CSS 在 Bootstrap 4 手风琴中添加下拉箭头状态

Question

如何使用 Angular2 或纯 CSS 实现一个简单的箭头 (>) 来指示 Bootstrap 4 手风琴中的 aria-expanded="true" or aria-expanded="false" 状态？

我看了很多教程并尝试了更多，但我认为我遗漏了一些东西。

我尝试过仅使用 CSS，但箭头不显示（这可能是要走的路）：

.card .card-header:after{
    float: right;
    border: 2px solid #f07f09;
    border-width: 0 3px 3px 0;
    padding: 6px;
    margin-right: 10px;
}

我尝试过使用ngClass，但我的问题是它使用以下代码将箭头状态应用于所有元素（有没有办法使用索引来完成这项工作？）：

<i [ngClass]="{'right':!expanded, 'down':expanded}"></i>

以及设置状态的方法：

(click)="changeDropdownArrowState()"

我的组件中的方法：

  changeDropdownArrowState () {
    this.expanded = !this.expanded;
  }

我的 HTML：

<div class="card">
    <div class="card-header" id="headingOne">
        <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" (click)="changeDropdownArrowState()">
                <h1>Personal Details
                    <i [ngClass]="{'right':!expanded, 'down':expanded}"></i>
                </h1>
            </button>
        </h2>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#retailCliamAccordian">
        <div class="card-body">
            some text
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" (click)="changeDropdownArrowState()">
                <h1>Product Details
                    <i [ngClass]="{'right':!expanded, 'down':expanded}"></i>
                </h1>
            </button>
        </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#retailCliamAccordian">
        <div class="card-body">
            other text
        </div>
    </div>
</div>

我的 CSS：

i {
    float: right;
    border: 2px solid #f07f09;
    border-width: 0 3px 3px 0;
    padding: 6px;
    margin-right: 10px;
}

.right {
    transform: rotate(-45deg);
}

.down {
    transform: rotate(45deg);
}

我认为使用属性aria-expanded="true/false" 可能是另一种方法。

Answer 1

如果您“只想让它工作”，您可以在 .ts 文件中创建一个真/假值数组，如下所示： expandableAreasState = [true, false, false, ...] // in this example first item will be expanded by default

然后重新定义方法：

  changeDropdownArrowState(index: number) {
    this.expandableAreasState[index] = !this.expandableAreasState[index];
  }

并像这样在模板内部调用：

<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" (click)="changeDropdownArrowState(0)"> // next one with 1 instead of 0 and so on...
     <h1>Product Details
          <i [ngClass]="{'right':!expandableAreasState[0], 'down':expandableAreasState[0]}"></i>
     </h1>
</button>

但是，在您的情况下，我可能会继续使用 ng-bootstrap，因为它引入了没有任何 jQuery 依赖项的引导程序，并通过其指令集大大简化了开发。

https://ng-bootstrap.github.io/#/components/collapse/examples

如果您的卡片不太复杂并且彼此之间不太不同，那么我会考虑创建这样的界面：

CardConfig {
  title: string;
  text: string;
  ...
}

并在一些 util / config 文件中创建这些卡设置的数组，如下所示：

export const cardConfiguration: CardConfig[] = [{title: ''Personal details, text: 'some text', ...}]

然后我将其导入component.ts:

cardConfig = cardConfiguration

并在模板内使用*ngFor 遍历它们。