uView

# Color 色彩

uView经过大量调试和研究，得出一套专有的调色板，在各个组件内部，使用统一的配色，为您的产品带来统一又鲜明的视觉效果。

注意

uView为了更好编写css，使用了scss预处理器，使用uView之前，请确认您的Hbuilder X已经安装了scss预处理器，一般情况下，相信您已经安装了。如果没有安装， 请在 Hbuilder X->工具->插件安装 中找到找到"scss/sass编译"安装即可，安装完毕如果不生效，请重启Hbuilder X。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

# 主题色

primary，success，error，warning，info是uView的主题色，他们给人在视觉感受上分别对应于蓝色，绿色，红色，黄色，灰色。 而他们又有对应的disabled、dark和light状态，分别表示对应的禁止，加深和变浅的对应颜色。举例uView的button组件来说：

  1. 设置type参数为primary时，按钮显示蓝色。
  2. 按钮被按下时，使用的是primary的加深颜色，也即dark状态。
  3. 按钮设置为镂空状态(plain为true)时，背景色为primary的变浅颜色，也即light状态。
  4. 按钮处于禁止状态时，使用的是primary的稍浅颜色，也即disabled状态。

# 主色

蓝色作为uView主色调，表示一种鲜明，积极的态度

Primary
#3296FA
Dark
#2074D4
Disabled
#85CAFF
Light
#D6F0FF
Primary-Care
#2074D4
Dark-Care
#90BAE9

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */
/* 常规 */
$u-type-primary: #3296FA;
$u-type-primary-light: #D6F0FF;
$u-type-primary-disabled: #85CAFF;
$u-type-primary-dark: #2074D4;


/* 关怀模式 */
u-type-primary: #2074d4;
u-type-primary-disabled: #90BAE9;
u-type-primary-dark: #2074d4;
u-type-primary-light: #2074d4;

/* 在您编写css的地方使用这些变量 */
.title {
	color: $u-type-primary;
	......
}

# 辅助色

除了主色外的场景色，需要在不同的场景中使用，如绿色代表成功，红色代表错误，黄色代表警示。

Error
#F56C6C
Dark
#CF5155
Disabled
#FFC6C2
Light
#FFEDEB
Error-Care
#CF5155
Dark-Care
#E7A8AA
Warning
#E6A23C
Dark
#BF7E28
Disabled
#FFDB94
Light
#FFF8E6
Warning-Care
#BF7E28
Dark-Care
#DFBF94
Success
#67C23A
Dark
#4A9C27
Disabled
#A9DB88
Light
#EDF5E6
Success-Care
#4A9C27
Dark-Care
#A5CD93

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */

/* 常规模式 */
$u-type-success: #67C23A;
$u-type-success-disabled: #A9DB88;
$u-type-success-dark: #4A9C27;
$u-type-success-light: #EDF5E6;

$u-type-warning: #E6A23C;
$u-type-warning-disabled: #FFDB94;
$u-type-warning-dark: #BF7E28;
$u-type-warning-light: #FFF8E6;

$u-type-error: #F56C6C;
$u-type-error-disabled: #FFC6C2;
$u-type-error-dark: #CF5155;
$u-type-error-light: #FFEDEB;

/* 关怀模式 */
u-type-warning: #bf7e28;
u-type-warning-disabled: #DFBF94;
u-type-warning-dark: #bf7e28;
u-type-warning-light: #bf7e28;

u-type-success: #4a9c27;
u-type-success-disabled: #A5CD93;
u-type-success-dark: #4a9c27;
u-type-success-light: #4a9c27;

u-type-error: #cf5155;
u-type-error-disabled: #E7A8AA;
u-type-error-dark: #cf5155;
u-type-error-light: #cf5155;

/* 在您编写css的地方使用这些变量 */
.title {
	color: $u-type-success;
	......
}

# 文字颜色

uView中，分别提炼了4种用于文字颜色，分别是：主要文字、常规文字、次要文字、占位文字颜色。

  • 主要文字颜色一般用于内容的标题等，如新闻列表的标题
  • 常规文字颜色一般用于内容的主体，如新闻列表的概要
  • 次要文字颜色一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字
  • 占位文字颜色属于更浅的灰色，看场景选择使用
主要文字
#303133
常规文字
#606266
次要文字
#909399
占位文字
#c0c4cc 
/* 变量的定义，该部分uView已全局引入，无需您编写 */

/* 常规模式 */
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;

/* 关怀模式 */
u-main-color: #000000;
u-content-color: #000000;
u-tips-color: #808080;
u-light-color: #808080;

/* 在您编写css的地方使用这些变量 */
.title {
	color: $u-main-color;
}

# 背景颜色

uView中，定义了一个背景颜色，如下：

背景色
#F7FAFF

我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这个变量，如下：

/* 变量的定义，该部分uView已全局引入，无需您编写 */

/* 常规模式 */
$u-bg-color: #F7FAFF;

/* 关怀模式 */
u-bg-color: #EBEEF5;

/* 在您编写css的地方使用这些变量 */
.title {
	color: $u-bg-color;
}

# 边框颜色

uView自定义了一个边框的颜色，值为#e4e7ed，如果想使用，如下：

一级边框
#303133
二级边框
#606266
三级边框
#909399
四级边框
#c0c4cc 

/* 变量的定义，该部分uView已全局引入，无需您编写 */

/* 常规模式 */
u-border-color: #dcdfe6;
u-border-color-dark: #E4E7ED;
u-border-color-disabled: #EBEEF5;
u-border-color-light: #F2F6FC;

/* 关怀模式 */
u-border-color: #91939A;
u-border-color-disabled: #dcdfe6;
u-border-color-dark: #dcdfe6;
u-border-color-light: #dcdfe6;

/* 在您编写css的地方使用这个变量 */
.item {
	border: 1px solid $u-border-color;
}

← Image 图片 →