You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
# 如何独立控制组件文字和图标颜色
|
|
|
|
|
|
|
|
|
|
[选中、hover样式的通用处理规则](./33.选中、hover样式的通用处理规则.md)中通用效果的实现中包含了`color`样式的设置.
|
|
|
|
|
|
|
|
|
|
对于一些图标+文字的节点,很多时候不需要在节点选中时候图标颜色也随之改变.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
而我们的图标是用icon-font实现的,本质上也是一个文本.那么其颜色属性就会向上继承.如果父节点设置了颜色,那么子节点颜色也会随之改变.
|
|
|
|
|
|
|
|
|
|
问题的本质是是CSS继承与优先级问题.对应到FineUI中,如果对图标指定`color`属性,那么图标的颜色优先级高于外部`.bi-list-item`等节点效果控制颜色.
|
|
|
|
|
|
|
|
|
|
如果未指定`color`属性,那么图标颜色继承自父级,会随着各种节点选中效果变化.
|
|
|
|
|
|
|
|
|
|
如何为图标指定颜色呢,FineUI中定义字体图标的`.font()`less方法,可以指定颜色.
|
|
|
|
|
|
|
|
|
|
```less
|
|
|
|
|
.font(@class, @content, @color: @color-bi-font-native) {
|
|
|
|
|
@fc: "\@{content}";
|
|
|
|
|
.@{class} {
|
|
|
|
|
& .b-font:before {
|
|
|
|
|
content: @fc;
|
|
|
|
|
color: @color;
|
|
|
|
|
}
|
|
|
|
|
&.disabled .b-font:before {
|
|
|
|
|
content: @fc;
|
|
|
|
|
color: @color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
定义字体时注意事项
|
|
|
|
|
|
|
|
|
|
1. 一般情况下,如果一个字体图标类名并不是用在特例场景,那么不要对其设置颜色,例如`delete-font, edit-font`等.否则会失去可复用性.
|
|
|
|
|
2. 避免对`.b-font`类名施加样式规则来控制字体图标样式.这样副作用比较明显,影响范围不可控.
|
|
|
|
|
3. 如果需要一个指定配色的字体图标,可以额外定义一个.如`.font(xxx-delete-font, @font-delete, @color-red)`
|
|
|
|
|
|
