angularjs 如何在Angular中更改before/after的样式?

b1zrtrql  于 11个月前  发布在  Angular
关注(0)|答案(5)|浏览(168)

我正在尝试在CSS中使用before/after实现带有三角形的面包屑,如本教程所示:
http://css-tricks.com/triangle-breadcrumbs/
相关片段:

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

字符串
但是,我将其用作定向流,类似于:
首页_分类>>子分类>>详细信息
这个流程开始时Main_Category高亮显示,其他两个部分是暗的,下面有一个可以选择的部分。选择时,Sub_Category高亮显示,另一个部分弹出。
如果它们是伪元素,我如何更改前/后边框颜色?
所以从教程中,我认为可以在主要部分做到这一点:

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


但是我没有地方可以为before/after设置 ng-style,三角形的颜色最终没有改变。

im9ewurl

im9ewurl1#

如果我对你的问题理解正确的话,你想知道如何使用一个angular指令来动态地设置before/after伪标记的样式。
不要使用ng-style,而是使用ng-class来附加一个类,这个类将确定要使用哪个before/after伪类。

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

字符串
在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;
}

zlhcx6iw

zlhcx6iw2#

其他的答案不允许你基于控制器变量的值来设计元素的样式,这个答案可以!
使用@HostBinding来定义CSS变量,然后您可以在.scss文件中使用这些变量,从而非常容易地动态设置:before:after的样式。
.ts:

size = 10
padding = 2

@HostBinding('attr.style')
public get cssVars() {
  return `
    --switch-size: ${this.size};
    --switch-padding: ${this.padding};
    --switch-size-inner: ${this.size - this.padding * 2};
  `;
}

字符串
.scss:

.my-class:before {
  height: calc(var(--switch-size) * 1px);
}


注意:有些人在使用这种方法时使用DomSanitizer,但我认为没有必要(没有它也能工作)-参见https://stackoverflow.com/a/64252610/1205871

8yoxcaq7

8yoxcaq73#

在这种情况下,我会避免使用ng-style,你可能会发现使用ng-class并应用不同的类更容易,这将允许你将所有的CSS放在一个地方,而不是在HTML中覆盖。
只需将您的代码更改为:

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

字符串
其中subCategory应该是一个布尔值,在单击时设置subCategory,然后它将添加breadcrumb-color作为类值,你应该得到这样的结果:

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


一些示例css,现在你可以设置之前和之后,你请:

.breadcrumb-color li a {
    background: red;
}

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

2hh7jdfx

2hh7jdfx4#

ng-class应该为你想做的事情工作。

<li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

字符串
粗编码example

kmynzznz

kmynzznz5#

您可以在CSS中定义颜色:

.breadcrumb li a.main-category {
    background: hsla(34, 85%, 35%, 1);
}

.breadcrumb li a.main-category:after {
    border-left-color: hsla(34, 85%, 35%, 1);
}

.breadcrumb li a.sub-category {
    background: hsla(44, 75%, 45%, 1);
}

.breadcrumb li a.sub-category:after {
    border-left-color: hsla(44, 75%, 45%, 1);
}

/* ... and so on for other categories */

字符串
然后使用ngClass:

<ul class="breadcrumb">
    <li><a href="#" ng-class="{'main-category': isMainCategoryActive(), 'sub-category': isSubCategoryActive()}">Home</a></li>
    <!-- ... other breadcrumbs -->
</ul>


在您的控制器中设置上述功能。

$scope.isMainCategoryActive = function() {
    // Your logic to determine if main category is active
    return true; // Or false
};

$scope.isSubCategoryActive = function() {
    // Your logic to determine if sub category is active
    return false; // Or true
};

相关问题