Set Hintergrundfarbe Akkordeon Überschrift

Question

Ich möchte die Farbe eines Akkordeons je nach Status auf dem aktuellen Element in der Liste ändern.

Ich mag wie ng-class="{status: item.status}" etwas verwenden (wo ich testClass: true habe)

Das Problem ist jetzt, dass ich nicht die Farbe der gesamten Akkordeon Überschrift kann.

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

Jede Idee, wie dieses Problem zu lösen?

fand ich ähnliches Problem hier, aber die Lösung funktionierte nicht für mich https://github.com/angular-ui/bootstrap/issues/3038

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

Answer 1

Wenden Sie die Klasse auf die Akkordeongruppe an und stylen Sie sie dann mit 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/

Answer 2

Dies ist die Lösung für Ihr Problem

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

Sie über möchte die angewendete Klasse in der Hierarchie höher verschieben:

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

Dann wird Ihr CSS wie folgt aussehen:

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

Das Problem ist, dass Sie den Test-Element in einem Element mit Polsterung platzieren. Platzieren Sie die test-item-Klasse stattdessen höher und verwenden Sie dann css, um die Elemente zu targetieren.

Wenn Staaten Staaten Bootstrap übereinstimmen, dann können Sie die Validierungsklassennamen von hier wollen: https://getbootstrap.com/docs/4.0/migration/#panels (Panel-Erfolg, Panel-Info, Panel-Warnung, Panel-Gefahr)

Diese Namen Klasse sind bereits in Ihrem Bootstrap css.