如何改变Angular之前/之后的风格？ [英] How to change style for before/after in Angular?

问题描述

我试图在CSS中使用之前/之后的三角形实现面包屑，如本教程中所示：

http://css-tricks.com/triangle-breadcrumbs/

相关snippets：

 < ul class =breadcrumb> 
< li>< a href =＃>主页< / a>< / li> 
< / ul> 
 
 .breadcrumb li a {
 color：white; 
 text-decoration：none; 
 padding：10px 0 10px 65px; 
背景：hsla（34,85％，35％，1）; 
职位：亲属; 
 display：block; 
 float：left; 
} 
 
 .breadcrumb li a：在{
 content：; 
 display：block; 
 width：0; 
 height：0; 
 border-top：50px纯色透明; 
 border-bottom：50px纯色透明; 
 border-left：30px solid hsla（34,85％，35％，1）; 
位置：绝对; 
 top：50％; 
 margin-top：-50px;剩余
：100％; 
 z-index：2; 
} 
  

但是，我将它用作定向流，如下所示：

Main_Category >>子类别>>详细信息

此流程以Main_Category突出显示，其他2个部分为黑色，一个可以从中选择的底部。在选择时，Sub_Category会突出显示，另一个弹出。

我的问题是如何更改前/后边框颜色，如果它们是伪元素？因此，从教程中，我认为可以在主要部分做到这一点：

 < li>< a href =＃ ng-style =background：{{color}}>主页< / a>< / li> 
  

但是我没有在哪里为前/后设置ng style，并且三角形颜色结束如果我正确理解你的问题，你想知道如何使用一个角度指令来动态地设置样式之前/ after伪标签。

不使用ng样式，而是使用ng-class附加一个类，该类将确定要使用哪个伪类之前/之后的类。 p>

 < ul class =breadcrumb> 
< li>< a href =＃ng-class =someBooleanInScope？'color-0'：'color-1'>主页< / a>< / li> 
< / ul> 
  

在CSS中：

  .breadcrumb li a：在{
 content：; 
 display：block; 
 width：0; 
 height：0; 
 border-top：50px纯色透明; 
 border-bottom：50px纯色透明; 
 border-left：30px solid hsla（34,85％，35％，1）; 
位置：绝对; 
 top：50％; 
 margin-top：-50px;剩余
：100％; 
 z-index：2; 
} 
 
 .breadcrumb li a.color-0：在{
 background：black; 
} 
 
 .breadcrumb li a.color-1：在{
 background：blue; 
} 
  

I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:

http://css-tricks.com/triangle-breadcrumbs/

Relevant snippets:

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
</ul>

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

However, I'm using it as a directed flow, something like:

Main_Category >> Sub_Category >> Details

This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.

My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.

解决方案

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.

Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

And in CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

这篇关于如何改变Angular之前/之后的风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！