Tui-Plus3.0.0

Appearance

主题样式 ​

一套完整的主题样式系统，旨在为应用程序提供统一、美观且易于维护的视觉风格。系统包含丰富的配置选项，涵盖了背景颜色、文字颜色、圆角、边距、边框以及字体大小等多个方面。通过简单的 CSS 类名，开发者可以轻松地应用预设的主题样式，例如信息提示、成功状态、警告状态、错误状态以及主要颜色等。此外，系统还支持自定义颜色覆盖，允许开发者根据具体需求调整主题色，从而实现更加个性化的设计。总而言之，这套主题样式系统为开发者提供了便捷高效的工具，帮助他们快速构建出具有一致性和专业性的用户界面。

主题配置表 ​

属性名值描述
id'DefaultMode'主题的唯一标识符
name'默认'主题名称
unit'rpx'单位
infonormal'#909399'信息提示正常状态颜色
infodark'#82848a'信息提示深色状态颜色
infodisabled'#c8c9cc'信息提示禁用状态颜色
infolight'#f4f4f5'信息提示浅色状态颜色
primarynormal'#2979ff'主要颜色正常状态颜色
primarydark'#2b85e4'主要颜色深色状态颜色
primarydisabled'#a0cfff'主要颜色禁用状态颜色
primarylight'#dcedff'主要颜色浅色状态颜色
successnormal'#19be6b'成功状态正常颜色
successdark'#18b566'成功状态深色颜色
successdisabled'#71d5a1'成功状态禁用颜色
successlight'#DFEAE2'成功状态浅色颜色
warningnormal'#ff9900'警告状态正常颜色
warningdark'#f29100'警告状态深色颜色
warningdisabled'#fcbd71'警告状态禁用颜色
warninglight'#fff1dd'警告状态浅色颜色
errornormal'#fa3534'错误状态正常颜色
errordark'#dd6161'错误状态深色颜色
errordisabled'#fab6b6'错误状态禁用颜色
errorlight'#ffe0e0'错误状态浅色颜色
colornormal'#333333'文本颜色正常状态
colordark'#606266'文本颜色深色状态
colordisabled'#909399'文本颜色禁用状态
colorlight'#c0c4cc'文本颜色浅色状态
colorinverse'#ffffff'文本颜色反色状态
bgcolorview'#ffffff'视图背景颜色
bgcolorpage'#f8f8f8'页面背景颜色
borderbase'#DCDFE6'基础边框颜色
borderlight'#E4E7ED'浅色边框颜色
borderlighter'#EBEEF5'更浅色边框颜色
borderextralight'#F2F6FC'额外浅色边框颜色
radiuslarge20大尺寸圆角半径
radiusmedium16中等尺寸圆角半径
radiussmall12小尺寸圆角半径
radiusmini8迷你尺寸圆角半径
marginlarge32大尺寸外边距
marginmedium28中等尺寸外边距
marginsmall24小尺寸外边距
marginmini20迷你尺寸外边距
paddinglarge24大尺寸内边距
paddingmedium20中等尺寸内边距
paddingsmall16小尺寸内边距
paddingmini12迷你尺寸内边距
sizelarge36大尺寸字体大小
sizemedium28中等尺寸字体大小
sizesmall24小尺寸字体大小
sizemini22迷你尺寸字体大小

背景主题样式 ​

css对应组件的属性style备注
tdbtype='' effect=''background-color:bgcolorview;background-color:#ffffff;
tdb-itype='info' effect=''background-color:infonormal;background-color:#909399;
tdb-i,dtype='info' effect='dark'background-color:infodark;background-color:#82848a;
tdb-i,ditype='info' effect='disabled'background-color:infodisabled;background-color:#c8c9cc;
tdb-i,ltype='info' effect='light'background-color:infolight;background-color:#f4f4f5;
tdb-i,l,red or tdb,i,,red or bg-redtype='info' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb-etype='error' effect=''background-color:errornormal;background-color:#fa3534;
tdb-e,dtype='error' effect='dark'background-color:errordark;background-color:#dd6161;
tdb-e,ditype='error' effect='disabled'background-color:errordisabled;background-color:#fab6b6;
tdb-e,ltype='error' effect='light'background-color:errorlight;background-color:#ffe0e0;
tdb-e,l,red or tdb-e,,red or bg-redtype='error' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb-wtype='warning' effect=''background-color:warningnormal;background-color:#ff9900;
tdb-w,dtype='warning' effect='dark'background-color:warningdark;background-color:#f29100;
tdb-w,ditype='warning' effect='disabled'background-color:warningdisabled;background-color:#fcbd71;
tdb-w,ltype='warning' effect='light'background-color:warninglight;background-color:#fff1dd;
tdb-w,l,red or tdb-e,,red or bg-redtype='warning' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb-stype='success' effect=''background-color:successnormal;background-color:#19be6b;
tdb-s,dtype='success' effect='dark'background-color:successdark;background-color:#18b566;
tdb-s,ditype='success' effect='disabled'background-color:successdisabled;background-color:#71d5a1;
tdb-s,ltype='success' effect='light'background-color:successlight;background-color:#DFEAE2;
tdb-s,l,red or tdb-e,,red or bg-redtype='success' effect='light' color:redbackground-color:red;自定义颜色覆盖主题
tdb-ptype='primary' effect=''background-color:primarynormal;background-color:#2979ff;
tdb-p,dtype='primary' effect='dark'background-color:primarydark;background-color:#2b85e4;
tdb-p,ditype='primary' effect='disabled'background-color:primarydisabled;background-color:#a0cfff;
tdb-p,ltype='primary' effect='light'background-color:primarylight;background-color:#dcedff;
tdb-p,l,red or tdb-e,,red or bg-redtype='primary' effect='light' color:redbackground-color:red;自定义颜色覆盖主题

文字颜色(作为前景的时候使用) ​

css对应组件的属性style备注
tdctype='' effect=''color:colornormal;color:#333333;
tdc-itype='info' effect=''color:colorinverse;color:#ffffff;
tdc-i,dtype='info' effect='dark'color:colorinverse;color:#ffffff;
tdc-i,ditype='info' effect='disabled'color:colorinverse;color:#ffffff;
tdc-i,ltype='info' effect='light'color:infonormal;color:#909399;
tdc-i,l,red or tdc-i,,red or c-redtype='info' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc-etype='error' effect=''color:colorinverse;color:#ffffff;
tdc-e,dtype='error' effect='dark'color:colorinverse;color:#ffffff;
tdc-e,ditype='error' effect='disabled'color:colorinverse;color:#ffffff;
tdc-e,ltype='error' effect='light'color:errornormal;color:#fa3534;
tdc-e,l,red or tdc-e,,red or c-redtype='error' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc-wtype='warning' effect=''color:colorinverse;color:#ffffff;
tdc-w,dtype='warning' effect='dark'color:colorinverse;color:#ffffff;
tdc-w,ditype='warning' effect='disabled'color:colorinverse;color:#ffffff;
tdc-w,ltype='warning' effect='light'color:warningnormal;color:#ff9900;
tdc-w,l,red or tdc-e,,red or c-redtype='warning' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc-stype='success' effect=''color:colorinverse;color:#ffffff;
tdc-s,dtype='success' effect='dark'color:colorinverse;color:#ffffff;
tdc-s,ditype='success' effect='disabled'color:colorinverse;color:#ffffff;
tdc-s,ltype='success' effect='light'color:successnormal;color:#19be6b;
tdc-s,l,red or tdc-e,,red or c-redtype='success' effect='light' color:redcolor:red;自定义颜色覆盖主题
tdc-ptype='primary' effect=''color:colorinverse;color:#ffffff;
tdc-p,dtype='primary' effect='dark'color:colorinverse;color:#ffffff;
tdc-p,ditype='primary' effect='disabled'color:colorinverse;color:#ffffff;
tdc-p,ltype='primary' effect='light'color:primarynormal;color:#2979ff;
tdc-p,l,red or tdc-e,,red or c-redtype='primary' effect='light' color:redcolor:red;自定义颜色覆盖主题

文字颜色对照 ​

css对应组件的属性style备注
tqctype='' effect=''color:colornormal;color:#333333;
tqc-n(默认等同于tqc)type='' effect='normal'color:colornormal;color:#333333;
tqc-dtype='' effect='dark'color:colordark;color:#606266;
tqc-ditype='' effect='disabled'color:colordisabled;color:#909399;
tqc-ltype='' effect='light'color:colorlight;color:#c0c4cc;
tqc-itype='info' effect=''color:infonormal;color:#909399;
tqc-i,dtype='info' effect='dark'color:infodark;color:#82848a;
tqc-i,ditype='info' effect='disabled'color:infodisabled;color:#c8c9cc;
tqc-i,ltype='info' effect='light'color:infolight;color:#f4f4f5;
tqc-i,l,red or tqc-i,,red or c-redtype='info' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc-etype='error' effect=''color:errornormal;color:#fa3534;
ttd-e,dtype='error' effect='dark'color:errordark;color:#dd6161;
ttd-e,ditype='error' effect='disabled'color:errordisabled;color:#fab6b6;
tqc-e,ltype='error' effect='light'color:errorlight;color:#ffe0e0;
tqc-e,l,red or tqc-e,,red or c-redtype='error' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc-wtype='warning' effect=''color:warningnormal;color:#ffffff;
tqc-w,dtype='warning' effect='dark'color:warningdark;color:#ffffff;
tqc-w,ditype='warning' effect='disabled'color:warningdisabled;color:#ffffff;
tqc-w,ltype='warning' effect='light'color:warninglight;color:#ff9900;
tqc-w,l,red or tqc-e,,red or c-redtype='warning' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc-stype='success' effect=''color:colorinverse;color:#ffffff;
tqc-s,dtype='success' effect='dark'color:colorinverse;color:#ffffff;
tqc-s,ditype='success' effect='disabled'color:colorinverse;color:#ffffff;
tqc-s,ltype='success' effect='light'color:successnormal;color:#19be6b;
tqc-s,l,red or tqc-e,,red or c-redtype='success' effect='light' color:redcolor:red;自定义颜色覆盖主题
tqc-ptype='primary' effect=''color:colorinverse;color:#ffffff;
tqc-p,dtype='primary' effect='dark'color:colorinverse;color:#ffffff;
tqc-p,ditype='primary' effect='disabled'color:colorinverse;color:#ffffff;
tqc-p,ltype='primary' effect='light'color:primarynormal;color:#2979ff;
tqc-p,l,red or tqc-e,,red or c-redtype='primary' effect='light' color:redcolor:red;自定义颜色覆盖主题

圆角主题 ​

css对应组件的属性style备注
tdrsize='' 等同于 size='medium'border-radius:radiusmedium;border-radius:16rpx;
tdr-misize='mini'border-radius:radiusmini;border-radius:8rpx;
tdr-ssize='small'border-radius:radiussmall;border-radius:12rpx;
tdr-msize='medium'(默认值)border-radius:radiusmedium;border-radius:16rpx;
tdr-lsize='large'border-radius:radiuslarge;border-radius:20rpx;
tdr-l,30
tdr-l,15px
r-25		size='large' size=30border-radius:30rpx;
border-radius:15px;
border-radius:25rpx;		自定义字体大小覆盖主题
tdr-l,,usize='large' option='u'(左上角)border-top-left-radius:radiuslarge;border-top-left-radius:20rpx;
tdr-l,,rsize='large' option='r'(右上角)border-top-right-radius:radiuslarge;border-top-left-radius:20rpx;
tdr-l,,bsize='large' option='b'(右下角)border-bottom-right-radius:radiuslarge;border-top-left-radius:20rpx;
tdr-l,,lsize='large' option='l'(左下角)border-bottom-left-radius:radiuslarge;border-top-left-radius:20rpx;
tdr-l,,ur,tdr-l,,bl,tdr-l,,ulr,---size='large' option='ur'(u r b l 可自由组合)border-top-left-radius:radiuslarge;border-top-right-radius:radiuslarge;border-top-left-radius:20rpx;border-top-right-radius:20rpx;

外边距 ​

css对应组件的属性style备注
tdmsize='' 等同于 size='medium'margin:radiusmedium;margin:16rpx;
tdm-misize='mini'margin:radiusmini;margin:8rpx;
tdm-ssize='small'margin:radiussmall;margin:12rpx;
tdm-msize='medium'(默认值)margin:radiusmedium;margin:16rpx;
tdm-lsize='large'margin:radiuslarge;margin:20rpx;
tdm-l,30
tdm-l,15px
r-25		size='large' size=30margin:30rpx;
margin:15px;
margin:25rpx;		自定义字体大小覆盖主题
tdm-l,,tsize='large' option='t'margin-top:radiuslarge;margin-top:20rpx;
tdm-l,,bsize='large' option='b'margin-bottom:radiuslarge;margin-top:20rpx;
tdm-l,,lsize='large' option='l'margin-left:radiuslarge;margin-left:20rpx;
tdm-l,,rsize='large' option='r'margin-right:radiuslarge;margin-right:20rpx;
tdm-l,,ur,tdm-l,,bl,tdm-l,,ulr,---size='large' option='ur'(t b l r 可自由组合)margin-left:radiuslarge;margin-right:radiuslarge;margin-left:20rpx;margin-right:20rpx;

内边距 ​

css对应组件的属性style备注
tdpsize='' 等同于 size='medium'padding:radiusmedium;padding:16rpx;
tdp-misize='mini'padding:radiusmini;padding:8rpx;
tdp-ssize='small'padding:radiussmall;padding:12rpx;
tdp-msize='medium'(默认值)padding:radiusmedium;padding:16rpx;
tdp-lsize='large'padding:radiuslarge;padding:20rpx;
tdp-l,30
tdp-l,15px
r-25		size='large' size=30padding:30rpx;
padding:15px;
padding:25rpx;		自定义字体大小覆盖主题
tdp-l,,tsize='large' option='t'padding-top:radiuslarge;padding-top:20rpx;
tdp-l,,bsize='large' option='b'padding-bottom:radiuslarge;padding-top:20rpx;
tdp-l,,lsize='large' option='l'padding-left:radiuslarge;padding-left:20rpx;
tdp-l,,rsize='large' option='r'padding-right:radiuslarge;padding-right:20rpx;
tdp-l,,ur,tdp-l,,bl,tdp-l,,ulr,---size='large' option='ur'(t b l r 可自由组合)padding-left:radiuslarge;padding-right:radiuslarge;padding-left:20rpx;padding-right:20rpx;

边框 ​

css对应组件的属性style备注
tbctype='' effect=''border:1px solid borderlightborder:1px solid #E4E7ED;
tbc-itype='info' effect='normal'border:1px solid infonormalborder:1px solid #909399;
tbc-i,dtype='info' effect='dark'border:1px solid infodarkborder:1px solid #82848a;
tbc-i,ditype='info' effect='disabled'border:1px solid infodisabledborder:1px solid #c8c9cc;
tbc-i,ltype='info' effect='light'border:1px solid infolightborder:1px solid #f4f4f5;
tbc-ptype='primary' effect='normal'border:1px solid primarynormalborder:1px solid #2979ff;
tbc-p,dtype='primary' effect='dark'border:1px solid primarydarkborder:1px solid #2b85e4;
tbc-p,ditype='primary' effect='disabled'border:1px solid primarydisabledborder:1px solid #a0cfff;
tbc-p,ltype='primary' effect='light'border:1px solid primarylightborder:1px solid #dcedff;
tbc-stype='success' effect='normal'border:1px solid successnormalborder:1px solid #19be6b;
tbc-s,dtype='success' effect='dark'border:1px solid successdarkborder:1px solid #18b566;
tbc-s,ditype='success' effect='disabled'border:1px solid successdisabledborder:1px solid #71d5a1;
tbc-s,ltype='success' effect='light'border:1px solid successlightborder:1px solid #DFEAE2;
tbc-wtype='warning' effect='normal'border:1px solid warningnormalborder:1px solid #ff9900;
tbc-w,dtype='warning' effect='dark'border:1px solid warningdarkborder:1px solid #f29100;
tbc-w,ditype='warning' effect='disabled'border:1px solid warningdisabledborder:1px solid #fcbd71;
tbc-w,ltype='warning' effect='light'border:1px solid warninglightborder:1px solid #fff1dd;
tbc-etype='error' effect='normal'border:1px solid errornormalborder:1px solid #fa3534;
tbc-e,dtype='error' effect='dark'border:1px solid errordarkborder:1px solid #dd6161;
tbc-e,ditype='error' effect='disabled'border:1px solid errordisabledborder:1px solid #fab6b6;
tbc-e,ltype='error' effect='light'border:1px solid errorlightborder:1px solid #ffe0e0;
tbc-e,l,red or tbc,,,red or bc-redtype='error' effect='light' color='red'border:1px solid red;自定义边框颜色覆盖主题色
tbc-e,l,,ltype='error' effect='light' color='red' option='l'border-left:1px solid red;
tbc-e,l,,rtype='error' effect='light' color='red' option='l'border-right:1px solid red;
tbc-e,l,,ttype='error' effect='light' color='red' option='l'border-top:1px solid red;
tbc-e,l,,btype='error' effect='light' color='red' option='l'border-bottom:1px solid red;
tbc-e,l,,tb
tbc-e,l,,lr
tbc-e,l,,ltb		type='error' effect='light' color='red' option='l'border-bottom:1px solid red;第四个参数为方向可自由组合

文本主题尺寸 ​

css对应组件的属性style备注
ttssize='medium'(默认值)font-size:sizemedium;font-size:28rpx;
tts-misize='mini'font-size:sizemedium;font-size:22rpx;
tts-ssize='sizesmall'font-size:sizemedium;font-size:24rpx;
tts-msize='medium'font-size:sizemedium;font-size:28rpx;
tts-lsize='sizelarge'font-size:sizemedium;font-size:36rpx;
tts-l,30
tts-l,15px
s-18		size='sizelarge' default=30font-size:30rpx;
font-size:15px;
font-size:18rpx;		自定义字体大小覆盖主题大小

页面背景 ​

css说明style备注
tpgbackground-color:bgcolorpage;background-color:#f8f8f8;

元素背景 ​

css说明style备注
tvgbackground-color:bgcolorview;background-color:#ffffff;