设置背景色手风琴标题

Question

我想根据列表中当前项目的状态更改手风琴的颜色。

我想使用类似 ng-class="{status: item.status}" 的东西（我有 testClass: true）

现在的问题是我无法设置整个手风琴标题的颜色。

<accordion>
    <accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
        <accordion-heading>
            <div ng-class="{testClass: true}">
                <p>Test</p>
            </div>
        </accordion-heading>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="text-content font-size-14">{{item.text}}</div>
                </div>
            </div>
        </div>
    </accordion-group>
</accordion>

CSS

.testClass {
background-color: burlywood;
}

知道如何解决这个问题吗？

我在这里发现了类似的问题，但解决方案对我不起作用 https://github.com/angular-ui/bootstrap/issues/3038

fiddle: http://jsfiddle.net/f8ce1b0w/2/

Answer 1

这是您问题的解决方案

.test{
  background-color: red;
}

 .test-parent.panel-default > .panel-heading {
    background-color:red;
}

<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
        <accordion-heading>
         <div class="test">
          I can have markup, too!
          </div>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
      </accordion-group>

Answer 2

您需要将已应用的 class 移到更高的层次结构中：

http://jsfiddle.net/f8ce1b0w/7/

那么您的 css 将如下所示：

.panel-warning .panel-heading {
  //customize your css here
}

问题是您将测试项目放置在带有填充的项目中。相反，将测试项目-class 放在更高的位置，然后使用 css 来定位项目。

如果您的州将匹配 Bootstrap 个州，那么您可能需要从此处验证 class 个名称：https://getbootstrap.com/docs/4.0/migration/#panels （面板成功、面板信息、面板警告、面板危险）

这些 class 个名称已经在您的 Bootstrap css 中。

Answer 3

将 class 应用于 'accordion-group'，然后使用 css 设置样式。

HTML

<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">

CSS

.panel {
  &.test {
    & > .panel-heading {
      background-color: red;
    }
  } 
}

http://jsfiddle.net/BramG/f8ce1b0w/8/

设置背景色手风琴标题

Set background color accordion heading

css

angularjs

angular-ui-bootstrap