快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

颜色 Color

概述

JUI推荐使用以下调色板的颜色作为设计和开发规范,以保证页面和组件之间的视觉一致。

JUI中,色彩分为4种应用场景:品牌色、辅助色、中性色、背景色。

品牌色、辅助色和中性色以clsss类的方式进行书写,如:

<div class="j-success">Success Color</div>
Success Color

背景色以bg自定义属性的方式进行书写,如:

<div bg="success" class="j-white>Success Bg Color</div>
Success Bg Color
品牌色

JUI默认主题使用绿色作为品牌色调,当然,你也可以按照自己的需求在主题配置种修改它。

品牌色
#2db755

.j-brand

辅助色

辅助色是具有代表性的颜色,常用于信息提示,比如成功、警告和失败。

主辅色
#6699ff

.j-primary

成功色
#2db755

.j-success

警告色
#6699ff

.j-warning

危险色
#6699ff

.j-danger

主辅色-Light

.j-primary-light

成功色-Light

.j-success-light

警告色-Light

.j-warning-light

危险色-Light

.j-danger-light

主辅色-Dark

.j-primary-dark

成功色-Dark

.j-success-dark

警告色-Dark

.j-warning-dark

危险色-Dark

.j-danger-dark

中性色

中性色常用于文本、背景、边框、阴影等,可以体现出页面的层次结构。

黑色 1
#000

.j-black

黑色 2
#242121

.j-major

黑色 3
#575454

.j-default

黑色 4
#909399

.j-basic

灰色 1
#b9b9b9

.j-meta

灰色 2
#e7e7e7

.j-gray

灰色 3
#f5f6f9

.j-light

白色
#fff

.j-white

无效文本色 1
#b9b9b9

.j-disabled

无效背景色 2
#f5f6f9

.j-disabledBg

无效边框色
#e7e7e7

.j-disabledBorder

透明色
transparent

.j-transparent

背景色

背景色可用自定义属性bg直接写在HTML文档标签中,如:

<div bg="success"></div>

背景色bg值共有14种:

上一章:溢出 Overflow
下一章:文字 Font