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.
112 lines
3.1 KiB
112 lines
3.1 KiB
2 years ago
|
# 选中、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
|
||
|
|
```
|