Tuniao UI

Appearance

Color 色彩 ​

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

注意

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

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√兼容中兼容中兼容中兼容中

主色调 ​

TuniaoUI的主题色是#01BEFF，然后还有以下的配色供用户参考

主题色
#01BEFF
图鸟橙
#FBBD12
子配色
#00FFC8
反色调
#FFF00D
文本
#080808
背景
#F4F4F4
辅助粉
#FF71D2
辅助蓝
#82B2FF

我们在全局样式中，通过scss提供了对应的颜色变量，方便您在任何可以编写scss的地方进行调用。

css
/* 变量的定义，该部分TuniaoUI已全局引入，无需您编写 */
$tn-main-color: #01BEFF;
$tn-match-color: #00FFC6;
$tn-reverse-main-color: #FFF00D;
$tn-female-color: #FF71D2;
$tn-male-color: #82B2FF;
$tn-main-orange: #FBBD12;
$tn-bg-color: #FFFFFF;
$tn-space-color: #F8F7F8;

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

内置颜色 ​

TuniaoUI为了方便用户进行配色，提供了一套常用的配色供用户选择。

红色(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

以上的颜色值TuniaoUI也提供了对应的颜色变量，方便您在任何可以编写scss的地方进行调用。

scss
$tn-color-red: #E83A30  ;
$tn-color-red-dark: #BA3027  ;
$tn-color-red-disabled: #F9CDCB  ;
$tn-color-red-light: #FAD8D6  ;
//  ......
$tn-color-gray: #AAAAAA  ;
$tn-color-gray-dark: #838383  ;  
$tn-color-gray-disabled: #E6E6E6;
$tn-color-gray-light: #F8F7F8;

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

上述列出来的颜色值TuniaoUI提供了对于的类供用户进行直接使用。

使用规则如下：

  • 作为字体颜色：tn-color-[颜色标识]--[类型]
  • 作为背景颜色：tn-bg-[颜色标识]--[类型]
  • 作为边框颜色：tn-border-[颜色标识]--[类型]
  • 作为阴影颜色：tn-shadow-[颜色标识]
  • 作为文字阴影颜色：tn-text-shadow-[颜色标识]

颜色标识包含 ​

white,red,purplered,purple,bluepurple,aquablue,blue,indigo,

cyan,teal,green,yellowgreen,lime,yellow,orangeyellow,orange,

orangered,brown,gray,grey

类型包含 ​

dark,disabled,light

使用示例 ​

vue

<view class="tn-bg-cyan tn-color-white tn-border tn-border-red--disabled"></view>

内置渐变色 ​

TuniaoUI为了方便用户提供了一系列的渐变色，供用户进行使用。

使用规则如下：

  • 普通渐变色：tn-main-gradient-[颜色标识]--[类型]

颜色标识包含 ​

white,red,purplered,purple,bluepurple,aquablue,blue,indigo,

cyan,teal,green,yellowgreen,lime,yellow,orangeyellow,orange,

orangered。

类型包含 ​

light(浅色渐变),reverse(颜色反转),single(单色渐变)

效果演示 ​

  • 不加类型值
tn-main-gradient-red
tn-main-gradient-purplered
tn-main-gradient-purple
tn-main-gradient-bluepurple
tn-main-gradient-aquablue
tn-main-gradient-blue
tn-main-gradient-indigo
tn-main-gradient-cyan
tn-main-gradient-teal
tn-main-gradient-green
tn-main-gradient-yellowgreen
tn-main-gradient-lime
tn-main-gradient-yellow
tn-main-gradient-orangeyellow
tn-main-gradient-orange
tn-main-gradient-orangered
  • 加 reverse
tn-main-gradient-red--reverse
tn-main-gradient-purplered--reverse
tn-main-gradient-purple--reverse
tn-main-gradient-bluepurple--reverse
tn-main-gradient-aquablue--reverse
tn-main-gradient-blue--reverse
tn-main-gradient-indigo--reverse
tn-main-gradient-cyan--reverse
tn-main-gradient-teal--reverse
tn-main-gradient-green--reverse
tn-main-gradient-yellowgreen--reverse
tn-main-gradient-lime--reverse
tn-main-gradient-yellow--reverse
tn-main-gradient-orangeyellow--reverse
tn-main-gradient-orange--reverse
tn-main-gradient-orangered--reverse
  • 加 light
tn-main-gradient-red--light
tn-main-gradient-purplered--light
tn-main-gradient-purple--light
tn-main-gradient-bluepurple--light
tn-main-gradient-aquablue--light
tn-main-gradient-blue--light
tn-main-gradient-indigo--light
tn-main-gradient-cyan--light
tn-main-gradient-teal--light
tn-main-gradient-green--light
tn-main-gradient-yellowgreen--light
tn-main-gradient-lime--light
tn-main-gradient-yellow--light
tn-main-gradient-orangeyellow--light
tn-main-gradient-orange--light
tn-main-gradient-orangered--light
  • 加 single
tn-main-gradient-red--single
tn-main-gradient-purplered--single
tn-main-gradient-purple--single
tn-main-gradient-bluepurple--single
tn-main-gradient-aquablue--single
tn-main-gradient-blue--single
tn-main-gradient-indigo--single
tn-main-gradient-cyan--single
tn-main-gradient-teal--single
tn-main-gradient-green--single
tn-main-gradient-yellowgreen--single
tn-main-gradient-lime--single
tn-main-gradient-yellow--single
tn-main-gradient-orangeyellow--single
tn-main-gradient-orange--single
tn-main-gradient-orangered--single

使用示例 ​

vue
<view class="tn-main-gradient-red"></view>
<view class="tn-main-gradient-red--reverse"></view>
<view class="tn-main-gradient-red--light"></view>
<view class="tn-main-gradient-red--light--reverse"></view>
<view class="tn-main-gradient-red--single"></view>
<view class="tn-main-gradient-red--single--reverse"></view>
<view class="tn-cool-bg-color-1"></view>

使用示例 ​

  • 酷炫渐变色：tn-cool-bg-color-[1~16]
tn-cool-bg-color-1
tn-cool-bg-color-2
tn-cool-bg-color-3
tn-cool-bg-color-4
tn-cool-bg-color-5
tn-cool-bg-color-6
tn-cool-bg-color-7
tn-cool-bg-color-8
tn-cool-bg-color-9
tn-cool-bg-color-10
tn-cool-bg-color-11
tn-cool-bg-color-12
tn-cool-bg-color-13
tn-cool-bg-color-14
tn-cool-bg-color-15
tn-cool-bg-color-16

使用示例 ​

vue
<view class="tn-cool-bg-color-1"></view>

Copyright © 2022-present Tuniao UI