• jquery ui css 变量
    • 使用方法
    • 特别注意

    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 对象', '组件名')