返回介绍

开发指南

组件

JS

模板

Color 色彩

发布于 2021-04-03 05:35:25 字数 4031 浏览 909 评论 0 收藏 0

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

注意

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

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

主题色

primarysuccesserrorwarninginfo是uView的主题色,他们给人在视觉感受上分别对应于蓝色,绿色,红色,黄色,灰色。 而他们又有对应的disableddarklight状态,分别表示对应的禁止,加深和变浅的对应颜色。举例uView的button组件来说:

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

主色

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

Primary
#2979ff Dark
#2b85e4 Disabled
#a0cfff Light
#ecf5ff

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

/* 变量的定义,该部分uView已全局引入,无需您编写 */
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;


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

辅助色

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

Error
#fa3534 Dark
#dd6161 Disabled
#fab6b6 Light
#fef0f0 Warning
#ff9900 Dark
#f29100 Disabled
#fcbd71 Light
#fdf6ec Success
#19be6b Dark
#18b566 Disabled
#71d5a1 Light
#dbf1e1 Info
#909399 Dark
#82848a Disabled
#c8c9cc Light
#f4f4f5

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

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

$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;

$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;

$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;

$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;

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

文字颜色

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

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

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

背景颜色

uView中,定义了一个背景颜色,如下:

背景颜色
#f3f4f6

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

/* 变量的定义,该部分uView已全局引入,无需您编写 */
$u-bg-color: #f3f4f6;

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

边框颜色

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

/* 变量的定义,该部分uView已全局引入,无需您编写 */
$u-border-color: #e4e7ed;

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文