组件的主题

什么是组件主题

组件的主题主要是涉及是组件的色调。 在系统的后台提供了8个组件的主题模板设置 如图：

组件的颜色选择（只有使用了快搭的主题颜色变量才能实现组件的主题与平台一致）

       {
            /**
             * 主题名称
             */
            name: "默认主题",

            /**
             * 字体、边框的颜色
             */
            kd_color: ColorUtils.getLightColor(color, 1),
            /**
             * 主色的逐渐变浅
             * kd_color_0 是 kd_color 变深
             * 其他都是按0.1逐步变浅
             */

            kd_color_0: ColorUtils.getDarkColor(color, 0.1),
            kd_color_1: color,
            kd_color_2: ColorUtils.getLightColor(color, 0.1),
            kd_color_3: ColorUtils.getLightColor(color, 0.2),
            kd_color_4: ColorUtils.getLightColor(color, 0.3),
            kd_color_5: ColorUtils.getLightColor(color, 0.4),
            kd_color_6: ColorUtils.getLightColor(color, 0.5),
            kd_color_7: ColorUtils.getLightColor(color, 0.6),
            kd_color_8: ColorUtils.getLightColor(color, 0.7),
            kd_color_9: ColorUtils.getLightColor(color, 0.8),
            kd_color_10: ColorUtils.getLightColor(color, 0.9),
            kd_color_11: ColorUtils.getLightColor(color, 1),

            /**
             * 连接的颜色
             */
            kd_link_color: "#1e90ff",
            /**
             * 设计焦点的颜色
             */
            kd_design_focuse_color: "blue",

            /**
             * 背景色
             */
            kd_bg_color: color,
            /**
             * 不可用的背景颜色
             */
            kd_bg_color_disabled: "#f5f5f5",
            /**
             *  激活（获取焦点）的背景颜色
             */
            kd_bg_color_active: ColorUtils.getLightColor(color, 0.1),

            /**
            * 鼠标停留字体，边框的颜色
            */
            kd_color_hover: ColorUtils.getLightColor(color, 0.8),
            /**
             * 激活（获取焦点）的颜色
             */
            kd_color_active: ColorUtils.getLightColor(color, 0.2),
            /**
            * 不可用(字体颜色
            */
            kd_color_disabled: "#00000040",
            /**
             * 轮廓线颜色
             */
            kd_color_outline: color,

            /**
             * 组件边框颜色
             */
            kd_border_color: "#C9C9C9",
            /**
             * 组滚动框颜色
             */
            kd_scroll_color: "#C9C9C9",

            /**
             * 正常的字体颜色
             * 一般是白底黑字/黑底白字
             */
            kd_normal_font_color: "#555",

            /**
             * 鼠标停留组件边框颜色
             */
            kd_border_color_hover: ColorUtils.getLightColor(color, 0.1),
            /**
             * 激活（获取焦点）字体，边框的颜色
             */
            kd_border_color_active: ColorUtils.getLightColor(color, 0.7),
            /**
             * 不可用边框颜色
             */
            kd_border_color_disabled: "#d9d9d9",

            /**
             * 成功主色调
             */
            kd_success_color: "#52c41a",
            kd_success_color_hover: "#73d13d",
            kd_success_color_active: "#389e0d",
            kd_success_color_outline: "rgba(82,196,26,0.2)",


            /**
             * 输入框的提示颜色
             */
            kd_placeholder_color: "#b2b2b2",

            /**
             *  错误的颜色
             */
            kd_error_color: "#ff4d4f",
            kd_error_color_hover: "#ff7875",
            kd_error_color_active: "#d9363e",
            kd_error_color_outline: "rgba(255,77,79,0.2)",
            kd_error_color_bg: "#FF5722",
            kd_error_color_border: "#ffccc7",

            /**
             *  警告颜色
             */
            kd_warning_color: "#faad14",
            kd_warning_color_hover: "#ffc53d",
            kd_warning_color_active: "#d48806",
            kd_warning_color_outline: "rgba(250,173,20,0.2)",
            kd_warning_color_bg: "#FFB800",

            /**
             * 信息提示颜色
             */
            kd_info_color: "#1890ff",
            kd_info_color_bg: "#e6f7ff",
            kd_info_color_border: "#91d5ff",

        }

组件的主题设置样例(以下代码只是保留关键部分)

import * as _ from 'lodash';
import { KDTheme } from '../components/theme/KDTheme';
import { ButtonItemsAttrEditor } from "../designer/attrbuteEditors/ButtonItemsAttrEditor";
import { IconAttrEditor } from "../designer/attrbuteEditors/IconAttrEditor";
import { InputAttrEditor } from "../designer/attrbuteEditors/InputAttrEditor";
import { InputAttrFormulaEditor } from "../designer/attrbuteEditors/InputAttrFormulaEditor";
import { SelectAttrEditor } from "../designer/attrbuteEditors/SelectAttrEditor";
import { SwitchAttrEditor } from "../designer/attrbuteEditors/SwitchAttrEditor";
import { IMenuItem } from "../designer/Contextmenu";
import { Common } from "../utils/Common";
import { ScriptContext } from "../utils/ScriptContext";
import { ButtonBase, IBtnBaseConfig } from "./ButtonBase";
import { Component, serialize } from "./decorators/Decorators";
import { DropDownEditorBase, IDropDrownComponent } from "./DropDownEditorBase";


/**
 * 按钮组件基类
 */
@Component({ icon: 'fa fa-square', gourp: "form", title: '按钮', name: '按钮', visiable: false })
export class YHButtonBase extends ButtonBase implements IDropDrownComponent {

    ...

       doGetCss(): YHButtonBaseStyle {
        const styles = {
            YHButtonBase: {
                "margin-right": "5px",
                "display": "inline-block",
                "vertical-align": "middle",
                "line-height": "32px",
                "padding": "0 18px",
                "background-color": KDTheme.kd_bg_color,
                "white-space": "nowrap",
                "text-align": "center",
                "font-size": "14px",
                "border": "none",
                "border-radius": "4px",
                "cursor": "pointer",
                "color": KDTheme.kd_color,
                "box-shadow": "0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)",
                "&:hover": {
                    "opacity": "0.8",
                    "filter": "alpha(opacity=80)",
                    "color": KDTheme.kd_color_10,
                },
                "&:active": {
                    "opacity": "1",
                    "filter": "alpha(opacity=100)",
                },
                "&+.kdayun-btn": {
                    "margin-left": "5px",
                },
                "& span.ripple": {
                    "position": "absolute",
                    "transform": "scale(0)",
                    "animation": "ripple 600ms linear",
                    "border-radius": "50%",
                    "background-color": "rgba(255, 255, 255, 0.2)",
                },
                "&[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active": {
                    "cursor": "not-allowed !important",
                    "color": KDTheme.kd_color_disabled + "!important",
                    "background": KDTheme.kd_bg_color_disabled + "!important",
                },
                "&[theme=primary]": {
                    "border": "1px solid " + KDTheme.kd_border_color,
                    "background-color": KDTheme.kd_color_11,
                    "color": KDTheme.kd_normal_font_color,
                    "&:hover": {
                        "border-color": KDTheme.kd_color_1,
                        "color": KDTheme.kd_color_1,
                    },
                    "&[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active": {
                        "border-color": KDTheme.kd_border_color_disabled + "!important",
                    },

                },
                "&[theme=normal]": {
                    "background-color": KDTheme.kd_color_1,
                },
                "&[theme=warm]": {
                    "background-color": KDTheme.kd_warning_color_bg,
                },
                "&[theme=danger]": {
                    "background-color": KDTheme.kd_error_color_bg,
                },
                "&[theme=link]": {
                    "background-color": "transparent!important",
                    "border-color": "transparent",
                    "box-shadow": "none",
                    "color": "#1e90ff",
                    "text-decoration": "underline",
                    "&[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active": {
                        "background-color": "transparent!important",
                    },
                },
                "&[size=lg]": {
                    "height": "44px",
                    "line-height": "44px",
                    "padding": "0 25px",
                    "font-size": "16px",
                },
                "&[size=sm]": {
                    "height": "30px",
                    "line-height": "30px",
                    "padding": "0 10px",
                    "font-size": "12px",
                    "& i": {
                        "font-size": "14px !important",
                        "margin-right": "2px",
                    },
                },
                "&[size=xs]": {
                    "height": "22px",
                    "line-height": "22px",
                    "padding": "0 5px",
                    "font-size": "12px",
                    "& i": {
                        "font-size": "14px !important",
                    },
                },
                "&[size=fluid]": {
                    "width": "100%"
                },
                "& .kdayun-btn-icon": {
                    "margin-right": "3px",
                    "font-size": "18px",
                    "vertical-align": "middle",
                },
                "& .fa-angle-down": {
                    "margin-left": "4px",
                }
            },
            "@keyframes ripple": {
                "to": {
                    "transform": "scale(4)",
                    "opacity": 0,
                }
            },
            "@global": {
                ".kdayun-btn-container": {
                    "font-size": "0",
                },
                ".kdayun-btn-container $button": {
                    "margin-right": "10px",
                    "margin-bottom": "0px",
                },
                ".kdayun-btn-container $button+$button": {
                    "margin-left": "0",
                },
                ".kdayun-btn-group": {
                    "display": "inline-block",
                    "vertical-align": "middle",
                    "font-size": "0",
                },
                ".kdayun-btn-group $button": {
                    "margin-left": "0 !important",
                    "margin-right": "0 !important",
                    "border-left": "1px solid rgba(255, 255, 255, .5)",
                    "border-radius": "0",
                },
                ".kdayun-btn-group .kdayun-btn-primary": {
                    "border-left": "none",
                },
                ".kdayun-btn-group .kdayun-btn-primary:hover": {
                    "border-color": KDTheme.kd_border_color,
                    "color": KDTheme.kd_color,
                },
                ".kdayun-btn-group $button:first-child": {
                    "border-left": "none",
                    "border-radius": "2px 0 0 2px",
                },
                ".kdayun-btn-group .kdayun-btn-primary:first-child": {
                    "border-left": "1px solid " + KDTheme.kd_border_color,
                },
                ".kdayun-btn-group $button:last-child": {
                    "border-radius": "0 2px 2px 0",
                },
                ".kdayun-btn-group $button+$button": {
                    "margin-left": "0",
                },
                ".kdayun-btn-group+.kdayun-btn-group": {
                    "margin-left": "10px",
                },
            },
        }
        return styles;
    }
    ...
}

上面的代码省略了其他无关部分的代码,只是列出了主要的相关的代码点. 详情见其备注

参考

组件开发-JSS的说明
JSS
CSS in JS 简介
CSS in JS的好与坏
浅谈CSS-in-JS
组件的类继承关系列表
组件开发环境搭建