From a4ff935b64bf004a20d6c5d42fea737ec0957ee4 Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 2 Sep 2022 15:50:24 +0800 Subject: [PATCH] update --- README.md | 3 + images/36.png | Bin 0 -> 14583 bytes ...中、hover样式的通用处理规则.md | 111 ++++++++++++++++++ ...独立控制组件文字和图标颜色.md | 38 ++++++ 4 files changed, 152 insertions(+) create mode 100644 images/36.png create mode 100644 questions/33.选中、hover样式的通用处理规则.md create mode 100644 questions/34.独立控制组件文字和图标颜色.md diff --git a/README.md b/README.md index 8df46bc..e9dc116 100644 --- a/README.md +++ b/README.md @@ -52,3 +52,6 @@ FineUI 100个问题题,带你走进FineUI的世界 - [29、BI.Layers.create参数详解原理](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/29.BI.Layers.create参数详解原理.md) - [30、上对齐的横向布局](./questions/27.上对齐的横向布局.md) - [31、tab选项卡组件的logic属性实现动态高度](./questions/26.tab选项卡组件的logic属性实现动态高度.md) +- [32、为什么FineUI中采用display:none隐藏组件](./questions/26.tab选项卡组件的logic属性实现动态高度.md) +- [33、选中、hover样式的通用处理规则](./questions/26.tab选项卡组件的logic属性实现动态高度.md) +- [34、如何独立控制组件文字和图标颜色](./questions/34.独立控制组件文字和图标颜色.md) diff --git a/images/36.png b/images/36.png new file mode 100644 index 0000000000000000000000000000000000000000..d9f1b49c486c5adc43e88b9470a04d49ac3df88a GIT binary patch literal 14583 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 literal 0 HcmV?d00001 diff --git a/questions/33.选中、hover样式的通用处理规则.md b/questions/33.选中、hover样式的通用处理规则.md new file mode 100644 index 0000000..a40957a --- /dev/null +++ b/questions/33.选中、hover样式的通用处理规则.md @@ -0,0 +1,111 @@ +# 选中、hover样式的通用处理规则 + +FineUI中内置了许多常用的样式规则 `.bi-border .bi-background .bi-list-item-active`等等. + +充分践行了[Atomic CSS-in-JS](https://juejin.cn/post/6917073600474415117)原子化js原则,及每个CSS类都对应一个唯一的样式规则. + +## 原子CSS有什么好处 + +1. 以约定的形式使编写代码更加方便快捷 +2. 避免样式文件过度臃肿,重复书写无尽的重复样式规则 +3. 利于统一风格切换,例如我们仅需修改`.bi-list-item-active`规则即可将产品中所有应用了节点选中效果的节点同步切换 + +## 如何利用FineUI在不同业务线中创建自己的原子CSS,实现统一的节点选中效果 + +我们先看一下预定义的`.bi-list-item-active`是如何实现的 + +```less +.bi-list-item-active { + &:hover, &.hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + .background-color(@color-bi-background-highlight, 10%); + } + &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} +``` + +FineUI中BasicButton的通用特性,其被选中时候会在相应DOM节点上添加`.active`类名,所以采用用`&.active`方式控制选中效果 +采用`&:hover`处理鼠标悬浮效果. + +同理,FineUI中组件被禁用的时候会在相应DOM上添加`.disabled`类名. + +也许有人会好奇,为什么要刻意对`.bi-input`和`.bi-textarea`添加了样式规则呢,这是因为input和textarea标签的样式是不继承的.只有将样式规则设定到对应DOM上才生效 + +动手实践一个效果. 鼠标悬浮时背景和边框高亮,选中时背景和文字高亮 + +```less +.bi-list-item-select2 { + &:hover { + + &.bi-border { + border-color: @color-bi-border-highlight; + } + + background-color: @color-bi-background-highlight; + } + + &.active { + color: @color-bi-text; + + & .bi-input { + color: @color-bi-text; + } + + & .bi-textarea { + color: @color-bi-text; + } + + background-color: @color-bi-background-highlight; + } + // disabled 省略 +} +``` + +## 什么情况下我需要自定义原子CSS类名呢 +在开发实践中,如果某个样式效果是产品层面通用的,不止一个地方使用,或此样式效果要支持动态主题变化的时候, +我们需要定义一个通用的CSS类名,例如FineBI中定义了若干种样式规则 +```text +// 文字颜色 +bi-primary-text +bi-secondary-text + +// 分割线 +bi-split +bi-dark-split + +// 节点 +bi-list-item-text +bi-list-item-text2 +bi-list-item-text-transparent +bi-list-item-text-transparent2 +bi-list-item-text-light +``` diff --git a/questions/34.独立控制组件文字和图标颜色.md b/questions/34.独立控制组件文字和图标颜色.md new file mode 100644 index 0000000..982bab6 --- /dev/null +++ b/questions/34.独立控制组件文字和图标颜色.md @@ -0,0 +1,38 @@ +# 如何独立控制组件文字和图标颜色 + +[选中、hover样式的通用处理规则](./33.选中、hover样式的通用处理规则.md)中通用效果的实现中包含了`color`样式的设置. + +对于一些图标+文字的节点,很多时候不需要在节点选中时候图标颜色也随之改变. + +![示例](../images/36.png) + +而我们的图标是用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`类名施加样式规则来控制字体图标样式.这样副作用比较明显,影响范围不可控. +