颜色定义:
颜色定义是指在ZhiqimUI的核心CSS文件中,默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义,包括字体颜色、背景颜色和边框颜色等,以及对应的样式名称。
全局颜色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 全局文本颜色 | ${textColor} | ${colorMap.get("textColor")} | 全局颜色 | 全局颜色定义,定义在body中 |
| 全局背景颜色 | ${bgColor} | ${colorMap.get("bgColor")} | 全局背景 | 全局背景颜色,定义在body中 |
| 全局链接颜色 | ${linkColor} | ${colorMap.get("linkColor")} | 链接效果 | 全局链接颜色,定义在a,a:visited中 |
| 全局链接Hover颜色 | ${linkHoverColor} | ${colorMap.get("linkHoverColor")} | 全局链接颜色,定义在a:hover,a:focus,a:active中 |
白色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 白色文本 | ${whiteTextColor} | ${colorMap.get("whiteTextColor")} | 白色文本 | .z-text-white |
| 白色背景 | ${whiteBgColor} | ${colorMap.get("whiteBgColor")} | 白色背景 | .z-bg-white |
黑色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 黑色文本 | ${blackTextColor} | ${colorMap.get("blackTextColor")} | 黑色文本 | .z-text-black |
| 黑色背景 | ${blackBgColor} | ${colorMap.get("blackBgColor")} | 黑色背景 | .z-bg-black |
灰色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 灰色文本 | ${grayTextColor} | ${colorMap.get("grayTextColor")} | 灰色文本 | .z-text-gray |
| 灰色背景 | ${grayBgColor} | ${colorMap.get("grayBgColor")} | 灰色背景 | .z-bg-gray |
| 灰色边框 | ${grayBdColor} | ${colorMap.get("grayBdColor")} | 灰色边框 | .z-bd |
| 灰色按钮文本 | ${btnTextColor} | ${colorMap.get("btnTextColor")} | 灰色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 灰色按钮边框和背景 | ${btnBdColor} ${btnBgColor} |
${colorMap.get("btnBdColor")} ${colorMap.get("btnBgColor")} |
灰色按钮 |
|
| 灰色hover背景 | ${btnBgHoverColor} | ${colorMap.get("btnBgHoverColor")} | 灰色按钮 |
|
| 灰色按钮active背景 | ${btnBgActiveColor} | ${colorMap.get("btnBgActiveColor")} | 灰色按钮 |
红色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 红色文本 | ${redTextColor} | ${colorMap.get("redTextColor")} | 红色文本 | .z-text-red |
| 红色背景 | ${redBgColor} | ${colorMap.get("redBgColor")} | 红色背景 | .z-bg-red |
| 红色边框 | ${redBdColor} | ${colorMap.get("redBdColor")} | 红色边框 | .z-bd.z-red |
| 红色按钮边框 | ${redBtnBdColor} | ${colorMap.get("redBtnBdColor")} | 红色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 红色hover背景 | ${redHoverColor} | ${colorMap.get("redHoverColor")} | 红色按钮 |
橙色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 橙色文本 | ${orangeTextColor} | ${colorMap.get("orangeTextColor")} | 橙色文本 | .z-text-orange |
| 橙色背景 | ${orangeBgColor} | ${colorMap.get("orangeBgColor")} | 橙色背景 | .z-bg-orange |
| 橙色边框 | ${orangeBdColor} | ${colorMap.get("orangeBdColor")} | 橙色边框 | .z-bd.z-orange |
| 橙色按钮边框 | ${orangeBtnBdColor} | ${colorMap.get("orangeBtnBdColor")} | 橙色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 橙色hover背景 | ${orangeHoverColor} | ${colorMap.get("orangeHoverColor")} | 橙色按钮 |
黄色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 黄色文本 | ${yellowTextColor} | ${colorMap.get("yellowTextColor")} | 黄色文本 | .z-text-yellow |
| 黄色背景 | ${yellowBgColor} | ${colorMap.get("yellowBgColor")} | 黄色背景 | .z-bg-yellow |
| 黄色边框 | ${yellowBdColor} | ${colorMap.get("yellowBdColor")} | 黄色边框 | .z-bd.z-yellow |
| 黄色按钮边框 | ${yellowBtnBdColor} | ${colorMap.get("yellowBtnBdColor")} | 黄色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 黄色hover背景 | ${yellowHoverColor} | ${colorMap.get("yellowHoverColor")} | 黄色按钮 |
绿色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 绿色文本 | ${greenTextColor} | ${colorMap.get("greenTextColor")} | 绿色文本 | .z-text-green |
| 绿色背景 | ${greenBgColor} | ${colorMap.get("greenBgColor")} | 绿色背景 | .z-bg-green |
| 绿色边框 | ${greenBdColor} | ${colorMap.get("greenBdColor")} | 绿色边框 | .z-bd.z-green |
| 绿色按钮边框 | ${greenBtnBdColor} | ${colorMap.get("greenBtnBdColor")} | 绿色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 绿色hover背景 | ${greenHoverColor} | ${colorMap.get("greenHoverColor")} | 绿色按钮 |
青色
| 青色 | ||||
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 青色文本 | ${cyanTextColor} | ${colorMap.get("cyanTextColor")} | 青色文本 | .z-text-cyan |
| 青色背景 | ${cyanBgColor} | ${colorMap.get("cyanBgColor")} | 青色背景 | .z-bg-cyan |
| 青色边框 | ${cyanBdColor} | ${colorMap.get("cyanBdColor")} | 青色边框 | .z-bd.z-cyan |
| 青色按钮边框 | ${cyanBtnBdColor} | ${colorMap.get("cyanBtnBdColor")} | 青色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 青色hover背景 | ${cyanHoverColor} | ${colorMap.get("cyanHoverColor")} | 青色按钮 |
|
蓝色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 蓝色文本 | ${blueTextColor} | ${colorMap.get("blueTextColor")} | 蓝色文本 | .z-text-blue |
| 蓝色背景 | ${blueBgColor} | ${colorMap.get("blueBgColor")} | 蓝色背景 | .z-bg-blue |
| 蓝色边框 | ${blueBdColor} | ${colorMap.get("blueBdColor")} | 蓝色边框 | .z-bd.z-blue |
| 蓝色按钮边框 | ${blueBtnBdColor} | ${colorMap.get("blueBtnBdColor")} | 蓝色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 蓝色hover背景 | ${blueHoverColor} | ${colorMap.get("blueHoverColor")} | 蓝色按钮 |
紫色
| 名称 | 通配符 | 缺省值 | 举例 | 说明 |
| 紫色文本 | ${purpleTextColor} | ${colorMap.get("purpleTextColor")} | 紫色文本 | .z-text-purple |
| 紫色背景 | ${purpleBgColor} | ${colorMap.get("purpleBgColor")} | 紫色背景 | .z-bg-purple |
| 紫色边框 | ${purpleBdColor} | ${colorMap.get("purpleBdColor")} | 紫色边框 | .z-bd.z-purple |
| 紫色按钮边框 | ${purpleBtnBdColor} | ${colorMap.get("purpleBtnBdColor")} | 紫色按钮 |
(按钮、筛选按钮)
(多选按钮三种状态)
|
| 紫色hover背景 | ${purpleHoverColor} | ${colorMap.get("purpleHoverColor")} | 紫色按钮 |