dailer
/
FineUI-100-Questions
2
2
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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.
58 Commits
1 Branch
0 Tags
6.1 MiB
 
Tree: 1bd3d9a118
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1bd3d9a118'
${ noResults }
FineUI-100-Questions/questions/33.选中、hover样式的通用处理规则.md

3.1 KiB
Raw Blame History

选中、hover样式的通用处理规则

FineUI中内置了许多常用的样式规则 .bi-border .bi-background .bi-list-item-active等等.

充分践行了Atomic CSS-in-JS原子化js原则,及每个CSS类都对应一个唯一的样式规则.

原子CSS有什么好处

  1. 以约定的形式使编写代码更加方便快捷
  2. 避免样式文件过度臃肿,重复书写无尽的重复样式规则
  3. 利于统一风格切换,例如我们仅需修改.bi-list-item-active规则即可将产品中所有应用了节点选中效果的节点同步切换

如何利用FineUI在不同业务线中创建自己的原子CSS,实现统一的节点选中效果

我们先看一下预定义的.bi-list-item-active是如何实现的

.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上才生效

动手实践一个效果. 鼠标悬浮时背景和边框高亮,选中时背景和文字高亮

.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中定义了若干种样式规则

// 文字颜色
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