1.6 KiB

Raw Permalink Blame History

如何独立控制组件文字和图标颜色

选中、hover样式的通用处理规则中通用效果的实现中包含了color样式的设置.

对于一些图标+文字的节点,很多时候不需要在节点选中时候图标颜色也随之改变.

而我们的图标是用icon-font实现的,本质上也是一个文本.那么其颜色属性就会向上继承.如果父节点设置了颜色,那么子节点颜色也会随之改变.

问题的本质是是CSS继承与优先级问题.对应到FineUI中,如果对图标指定color属性,那么图标的颜色优先级高于外部.bi-list-item等节点效果控制颜色.

如果未指定color属性,那么图标颜色继承自父级,会随着各种节点选中效果变化.

如何为图标指定颜色呢,FineUI中定义字体图标的.font()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;
    }
  }
}

定义字体时注意事项

一般情况下,如果一个字体图标类名并不是用在特例场景,那么不要对其设置颜色,例如delete-font, edit-font等.否则会失去可复用性.
避免对.b-font类名施加样式规则来控制字体图标样式.这样副作用比较明显,影响范围不可控.
如果需要一个指定配色的字体图标,可以额外定义一个.如.font(xxx-delete-font, @font-delete, @color-red)

1.6 KiB Raw Permalink Blame History

如何独立控制组件文字和图标颜色

1.6 KiB

Raw Permalink Blame History