我正在尝试在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,三角形的颜色最终没有改变。
5条答案
按热度按时间im9ewurl1#
如果我对你的问题理解正确的话,你想知道如何使用一个angular指令来动态地设置before/after伪标记的样式。
不要使用ng-style,而是使用ng-class来附加一个类,这个类将确定要使用哪个before/after伪类。
字符串
在CSS中:
型
zlhcx6iw2#
其他的答案不允许你基于控制器变量的值来设计元素的样式,这个答案可以!
使用
@HostBinding
来定义CSS变量,然后您可以在.scss文件中使用这些变量,从而非常容易地动态设置:before
和:after
的样式。.ts:
字符串
.scss:
型
注意:有些人在使用这种方法时使用DomSanitizer,但我认为没有必要(没有它也能工作)-参见https://stackoverflow.com/a/64252610/1205871
8yoxcaq73#
在这种情况下,我会避免使用ng-style,你可能会发现使用ng-class并应用不同的类更容易,这将允许你将所有的CSS放在一个地方,而不是在HTML中覆盖。
只需将您的代码更改为:
字符串
其中subCategory应该是一个布尔值,在单击时设置subCategory,然后它将添加breadcrumb-color作为类值,你应该得到这样的结果:
型
一些示例css,现在你可以设置之前和之后,你请:
型
2hh7jdfx4#
ng-class应该为你想做的事情工作。
字符串
粗编码example
kmynzznz5#
您可以在CSS中定义颜色:
字符串
然后使用ngClass:
型
在您的控制器中设置上述功能。
型