Color 色彩组件
在各个组件内部,使用统一的配色,为您的产品带来统一又鲜明的视觉效果。
温馨提示
本项目参考了 uView-Plus 开源项目的组件开发方式,基于 Vue 3 和 TypeScript 实现了自定义组件。目前该组件仍处于测试阶段。
感谢 uView-Plus 开源项目及其团队成员的贡献,他们的组件开发思路为本项目提供了宝贵地参考。如果需要了解更多组件开发细节,可以参考uView-Plus的 button组件 的代码实现。
注意
华玥为了更好编写css,使用了scss预处理器,使用uview-plus之前,请确认您的Hbuilder X已经安装了scss预处理器,一般情况下,相信您已经安装了。如果没有安装, 请在 Hbuilder X->工具->插件安装 中找到找到"scss/sass编译"安装即可,安装完毕如果不生效,请重启Hbuilder X。
平台差异说明
APP(vue) | H5 | 微信小程序 |
---|---|---|
✔ | ✔ | ✔ |
颜色使用示例
红色(red)
#E83A30
dark
#BA2E26
disabled
#F39C97
light
#FAD8D6
紫红色(purplered)
#E72F8C
dark
#B9276F
disabled
#F397C5
light
#FAD5E8
紫色(purple)
#892FE8
dark
#6E27BA
disabled
#C497F3
light
#E7D5FA
蓝紫色(bluepurple)
#5F4FD9
dark
#4C3FAE
disabled
#AFA7EC
light
#DFDCF7
海蓝色(aquablue)
#3646FF
dark
#2B38CC
disabled
#9AA2FF
light
#D7DAFF
蓝色(blue)
#3D7EFF
dark
#3465CC
disabled
#9EBEFF
light
#D8E5FF
靛蓝色(indigo)
#31C9E8
dark
#28A1BA
disabled
#98E4F3
light
#D6F4FA
青色(cyan)
#2DE88D
dark
#24BA97
disabled
#96F3DE
light
#D5FAF2
青绿色(teal)
#24F083
dark
#1DC069
disabled
#91F7C1
light
#D3FCE6
绿色(green)
#31E749
dark
#28B93D
disabled
#98F3A4
light
#D6FADB
黄绿色(yellowgreen)
#A4E82F
dark
#82BA27
disabled
#D1F397
light
#EDFAD5
酸橙色(lime)
#D5EB00
dark
#AABC00
disabled
#E9F57F
light
#F7FBCC
黄色(yellow)
#FFF420
dark
#CCC21A
disabled
#FFF88F
light
#FFFDD2
橘黄色(orangeyellow)
#FFCA28
dark
#CCA220
disabled
#FFE493
light
#FFF4D4
橙色(orange)
#FFA726
dark
#CC851E
disabled
#FFD392
light
#FFEDD4
橘红色(orangered)
#FF7043
dark
#CC5A36
disabled
#FFB7A1
light
#FFE2D9
棕色(brown)
#914F2C
dark
#743F23
disabled
#C8A795
light
#E9DCD5
玄灰色(grey)
#78909C
dark
#5F7E8B
disabled
#C6D1D8
light
#E4E9EC
灰色(gray)
#AAAAAA
dark
#838383
disabled
#E6E6E6
light
#F8F7F8