color

color

概述

UI3.0颜色类，默认提供的基础类名在ui-color.css，需要在IDE工具可视化配置，即先定义主题色，设置模板主题，中国红、蜜桃粉、青草绿、天际蓝、子夜灰

1、背景色类别

定义：

bc-head

bc-bg

sc-bg

sc-bg-active

sc-bg-alert

说明：

bc-head类别: 基础header颜色;定义了header区域背景底色,在ui3.0框架中,IDE工具可以可视化配置
bc-bg类别: 基础body背景颜色; 定义了body背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg类别: 辅助控件背景颜色1; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-active类别: 辅助控件背景颜色2; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-alert类别: 警告背景色; 定义了header区域背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置

场景：

例子：

<!--header开始-->
            <div id="header" class="uh bc-text-head ub bc-head"></div>
            <!--header结束-->

图例：

2、按钮颜色类别

定义：

bc-btn

sc-btn

说明：

bc-btn 基础按钮颜色应用的是主题颜色
sc-btn 辅助按钮颜色应用的是主题颜色

类别分别用于定义不同颜色值,默认提供的字体颜色可以自己灵活应用,也可自定义

场景：

ui-color.css中鼠标定位颜色属性上可查看颜色

例子：

<div class='btn ub ub-ac bc-text-head ub-pc bc-btn'>确定</div>

图例：

3、文字色彩类别

定义：

bc-text

bc-text-head

sc-text

sc-text-active

sc-text-hint

sc-text-warn

sc-text-tab

说明：

bc-text 基础字体颜色 black
bc-text-head 基础标题字体颜色 white
sc-text 辅助字体颜色1 #848484
sc-text-active 辅助字体颜色2 应用的是主题颜色
sc-text-hint 辅助字体颜色3
sc-text-warn 辅助字体颜色4
sc-text-tab 辅助字体颜色5

类别分别用于定义不同色彩，默认提供的字体颜色可以自己灵活应用,也可自定义

场景：

ui-color.css中鼠标定位颜色属性上可查看颜色

例子：

<div class= "btn ub ub-ac bc-text-head ub-pc bc-btn " id="btn">无图片按钮</div>

图例：

4、边框色彩类别

定义：

bc-border

sc-border

sc-border-tab

说明：

bc-border 基础边框颜色默认是#BABABA
sc-border 辅助边框颜色默认是#FFFFFF
sc-border-tab 辅助边框颜色应用的是主题颜色

类别分别用于定义不同色彩，默认提供的边框颜色可以自己灵活应用,也可自定义

场景：

ui-color.css中鼠标定位颜色属性上可查看颜色

例子：

<div id="listview"class="ubt bc-border sc-bg"> </div>

图例：