jquery ui css 变量

在开发组件时, 有时需要用到jquery ui里定义的颜色。 Enhancer 在组件页面提供了下面这些和 jquery ui 相关的 css 变量:

  1.   --ui-widget-ui-widget-content-border-color: 238, 238, 238;
  2.   --ui-widget-content-border-color: 238, 238, 238;
  3.   --ui-widget-content-background-color: 255, 255, 255;
  4.   --ui-widget-content-color: 51, 51, 51;
  5.   --ui-widget-header-border-color: 238, 238, 238;
  6.   --ui-widget-header-background-color: 255, 255, 255;
  7.   --ui-widget-header-color: 51, 51, 51;
  8.   --ui-state-default-border-color: 238, 238, 238;
  9.   --ui-state-default-background-color: 246, 246, 246;
  10.   --ui-state-default-color: 69, 69, 69;
  11.   --ui-state-hover-border-color: 204, 204, 204;
  12.   --ui-state-hover-background-color: 237, 237, 237;
  13.   --ui-state-hover-color: 43, 43, 43;
  14.   --ui-state-active-border-color: 0, 115, 234;
  15.   --ui-state-active-background-color: 0, 115, 234;
  16.   --ui-state-active-color: 255, 255, 255;
  17.   --ui-state-highlight-border-color: 255, 250, 144;
  18.   --ui-state-highlight-background-color: 255, 250, 144;
  19.   --ui-state-highlight-color: 119, 118, 32;
  20.   --ui-state-error-border-color: 241, 168, 153;
  21.   --ui-state-error-background-color: 253, 223, 223;
  22.   --ui-state-error-color: 95, 63, 63;
  23.   --ui-widget-overlay-background-color: 170, 170, 170;
  24.   --ui-widget-shadow-color: 102, 102, 102;

使用方法

  1. .class {
  2.   border-corlor: rgb(var(--ui-state-default-border-color));
  3.   background-corlor: rgb(var(--ui-state-default-background-color));
  4.   color: rgb(var(--ui-state-default-corlor));
  5. }
  7. // 或者
  9. .class {
  10.   border-corlor: rgba(var(--ui-state-default-border-color), 0.5);
  11.   background-corlor: rgba(var(--ui-state-default-background-color), 0.5);
  12.   color: rgba(var(--ui-state-default-color), 0.5);
  13. }

特别注意

  • 如果组件使用到了这些 jquery ui 变量, 为了兼容 IE, 你需要把 webpack.config.js 里的 styleLoaderOptions 的两个被注释的属性打开
  • 如果你有其他 link 或 style 标签 需要用 css 变量, 但这些标签里的内容是不会经过本组件的 webpack 打包, 为了兼容 IE, 你可以像下面这样来转换:
  1. Enhancer.CssVar.bind('标签的 dom 对象', '组件名')