通用变量
用于非组件或多个组件上的变量。
颜色
变量名 |
默认变量值 |
描述 |
场景 |
字体 |
|
|
|
@color-text-base |
![](https://camo.githubusercontent.com/7f20c0774617c3876f945b849a56b9107ee4458279124bad84680c0ad3db8a86/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3030303030302d3030303030302e7376673f7374796c653d666c6174) |
默认文字 |
tabs-默认选项 button行动按钮-次按钮 floatmenu浮动菜单-菜单项 list列表-label picker选择器-选项 input输入框-输入内容 modal弹窗-标题 step步骤条-标题 |
@color-text-base-inverse |
![](https://camo.githubusercontent.com/d821d3addf89fd125e99cecbbb310d2c6bfd06a5bf36b715332cb86eb69316bd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6666666666662d6666666666662e7376673f7374796c653d666c6174) |
深色背景下的文字 |
行动按钮-主按钮 临时告知 toast 徽标数 深色标签 |
@color-text-placeholder |
![](https://camo.githubusercontent.com/ad80a6e8b3dc7fa9614436a59c4015be9f547538fddb99429dd53e4c05e2eb4b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6363636363632d6363636363632e7376673f7374796c653d666c6174) |
文本框提示 |
input输入框、textarea输入区域-文字提示 清除图标的默认颜色 |
@color-text-disabled |
![](https://camo.githubusercontent.com/0733e23d4169e946aac2ae3e65d3aa1c973f44873319a7b13ef36a2dc1e23763/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6262626262622d6262626262622e7376673f7374796c653d666c6174) |
失效 |
|
@color-text-caption |
![](https://camo.githubusercontent.com/abec789660adb131ef8b5f2465f37049b9331ae3f5d853cb91b3ff887818e7da/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3838383838382d3838383838382e7376673f7374796c653d666c6174) |
辅助描述 |
|
@color-text-paragraph |
![](https://camo.githubusercontent.com/2f6e00d7122b3bbad7608f8f9ef94dffed846fad8a6c3cdd96f5e09c245dd4c2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3333333333332d3333333333332e7376673f7374796c653d666c6174) |
段落 |
|
@color-link |
![](https://camo.githubusercontent.com/a11ec50aff438e47de2a1fd0447188d96f44854af6a8467e742fc0d16e132d50/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3130386565392d3130386565392e7376673f7374796c653d666c6174) |
链接色 |
链接的颜色 可点击文字按钮的文字颜色 |
@color-shadow |
![](https://camo.githubusercontent.com/c7edc5624f3788b869842186c4e7f52c33b17f3752548404fe4a3e564b904138/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3830383038305f32302532352d6464646464642e7376673f7374796c653d666c6174) |
阴影色 |
floatmenu浮动菜单 |
填充 |
|
|
|
@fill-base |
![](https://camo.githubusercontent.com/d821d3addf89fd125e99cecbbb310d2c6bfd06a5bf36b715332cb86eb69316bd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6666666666662d6666666666662e7376673f7374796c653d666c6174) |
组件默认背景 |
|
@fill-body |
![](https://camo.githubusercontent.com/aca900050055aae79d0ebbc13eec8a46cdc4c7a653a0322eb8de7b90adcc896f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6635663566392d6635663566392e7376673f7374796c653d666c6174) |
页面背景 |
|
@fill-tap |
![](https://camo.githubusercontent.com/7a5e85f925f4425ad3333ce9e3aaedcd8f79494fb8fe7564c88686517f28d0ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6464646464642d6464646464642e7376673f7374796c653d666c6174) |
默认背景按下 |
|
@fill-disabled |
![](https://camo.githubusercontent.com/7a5e85f925f4425ad3333ce9e3aaedcd8f79494fb8fe7564c88686517f28d0ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6464646464642d6464646464642e7376673f7374796c653d666c6174) |
失效背景 |
|
@fill-mask |
![](https://camo.githubusercontent.com/5ed582a69cdaa5bf1ca11dda0f61ba0b905c9052ae4fd555d0eb1f564b7b504b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3030303030305f35302532352d3830383038302e7376673f7374796c653d666c6174) |
遮罩背景 |
dropdown actionsheet floatmenu modal |
@fill-overlay-inverse |
![](https://camo.githubusercontent.com/c7f62af6852471c03b7308e5ce6adfb776cd1936c42cf6250ffc8e95b5040240/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3030303030305f38302532352d3434343434342e7376673f7374796c653d666c6174) |
浮层背景反色 |
toast |
全局 |
|
|
|
@brand-primary |
![](https://camo.githubusercontent.com/a11ec50aff438e47de2a1fd0447188d96f44854af6a8467e742fc0d16e132d50/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3130386565392d3130386565392e7376673f7374796c653d666c6174) |
主色 |
主按钮-背景色 icon-背景色 |
@brand-primary-tap |
![](https://camo.githubusercontent.com/9e819e125d8c15fae97f3d73e327ec3d4512f66f27ecc7b4180552a214c32f78/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3132383464362d3132383464362e7376673f7374796c653d666c6174) |
主色按下 |
|
@brand-success |
![](https://camo.githubusercontent.com/f139d7b3fc18e0d822b4ac9b879a006a42d65f9ab0c04a174e0d469f093963bb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3661626634372d3661626634372e7376673f7374796c653d666c6174) |
成功 |
|
@brand-warning |
![](https://camo.githubusercontent.com/806608f82ebd45d4d21f223e89949efdf63f15100176e7e96495e536f473e4a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6638366532312d6638366532312e7376673f7374796c653d666c6174) |
警告 |
NoticeBar-文字 |
@brand-error |
![](https://camo.githubusercontent.com/336075d94ea3ed3719b3f20ad5c8836d2ac99079dc72e0b27ac879817a91cb8e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6634333333632d6634333333632e7376673f7374796c653d666c6174) |
失败 |
|
@brand-hot |
![#F96268](https://camo.githubusercontent.com/5163f9c467779b29047706ba6ee8491961ebf9822d2306ee77e1714f0e19f4e6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d4639363236382d4639363236382e7376673f7374796c653d666c6174) |
热门 |
优惠、热门、强调 |
@brand-important |
![#F96268](https://camo.githubusercontent.com/2f1feb9ea2d6746855675c0bd39fc441c02bfd9eaed3cf6358f8c1963a528751/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d4646334233302d4646334233302e7376673f7374796c653d666c6174) |
重要 |
用于 badge 等 |
边框 |
|
|
|
@border-color-base |
![](https://camo.githubusercontent.com/7a5e85f925f4425ad3333ce9e3aaedcd8f79494fb8fe7564c88686517f28d0ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6464646464642d6464646464642e7376673f7374796c653d666c6174) |
基本边框色 |
button按钮-次按钮 list列表 tab选项卡 actionsheet操作列表-选项分割线 |
透明度 |
|
|
|
@opacity-disabled |
![](https://camo.githubusercontent.com/fc55f8aa85089062441e0899ebca0e0a20819897d2248f9fa8d03dbe4ab6231e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6f7061636974792d33302532352d6464646464642e7376673f7374796c653d666c6174) |
组件禁用 |
switch checkbox radio |
组件 |
|
|
|
字体尺寸
变量名 |
默认变量值 |
描述 |
场景 |
全局 |
|
|
|
@font-size-icontext |
20px |
图标辅助文字 |
tabbar-图标辅助文字 |
@font-size-caption-sm |
24px |
辅助文字 - 小 |
列表-辅助文字 列表-日期 |
@font-size-base |
26px |
基本字体 |
弹窗-描述 列表-标题 |
@font-size-subhead |
28px |
副标题 |
Tabs |
@font-size-caption |
30px |
辅助文字 |
列表-右侧内容 |
@font-size-heading |
34px |
标题字体 |
list列表-label input输入框-输入内容 input输入框-暗提示 modal弹框-标题 城市选择-选项 actionsheet操作列表-选项 steps进度条-标题 |
@font-size-display-sm |
36px |
展示型字体 - 小 |
|
@font-size-display-md |
42px |
展示型字体 - 中 |
|
@font-size-display-lg |
48px |
展示型字体 - 大 |
|
@font-size-display-xl |
60px |
展示型字体 - 超大 |
|
字体族
变量名 |
默认变量值 |
描述 |
场景 |
@font-family-base |
-apple-system,"SF UI Text",Roboto,Noto,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; |
默认全局字体 |
|
@font-family-code |
Consolas,Menlo,Courier,monospace |
代码字体 |
|
圆角
变量名 |
默认变量值 |
描述 |
场景 |
@radius-xs |
4px |
|
icon消息类\tag |
@radius-sm |
6px |
|
行动按钮-辅助按钮 floatmenu浮动菜单-容器 searchbar搜索框 |
@radius-md |
10px |
|
toast actionsheet-图标 输入框-密码输入框 行动按钮-主/次按钮 |
@radius-lg |
14px |
|
modal弹框 |
边框尺寸
变量名 |
默认变量值 |
描述 |
场景 |
@border-width-sm |
1px |
标准边框 |
浮动菜单 弹框- list 动作菜单 选择器 input 文字类icon |
@border-width-md |
2px |
|
次/辅助按钮 输入框-验证码前纵向分割线 |
@border-width-lg |
4px |
|
steps步骤条-轴线 tabs选项卡-选中项的边线 |
间距
变量名 |
默认变量值 |
描述 |
场景 |
水平 |
|
|
|
@h-spacing-sm |
12px |
|
行动按钮-辅助按钮 |
@h-spacing-md |
18px |
|
floatmenu-容器与分割线&分割线与文字 |
@h-spacing-lg |
30px |
容器内横向间距 |
notice-bar 列表 表单 modal-关闭图标距离容器边距 |
垂直 |
|
|
|
@v-spacing-xs |
6px |
|
列表:标题和辅助文字间 |
@v-spacing-sm |
12px |
|
toast:图标和文字 |
@v-spacing-md |
18px |
|
actionsheet:选项和取消操作间 列表:title、footer离list选项的间距 分享组件:图标和文字 分享组件:图标和文字 |
@v-spacing-lg |
30px |
|
title的外边距 modal-关闭图标距离容器边距 modal-图片与标题间距 |
@v-spacing-xl |
42px |
容器内纵向间距 |
actionsheet-分享组件 modal |
高度
变量名 |
默认变量值 |
描述 |
场景 |
@option-height |
84px |
|
actionsheet-选项 picker |
图标尺寸
变量名 |
默认变量值 |
描述 |
场景 |
@icon-size-xxs |
30px |
|
搜索框内icon 公告左右两侧icon 表单右侧对勾icon、下一级icon、title bar 返回按钮占位符 |
@icon-size-xs |
36px |
|
`` |
@icon-size-sm |
42px |
|
float button里的icon 表单里的小图 表单里的多项选择checkbox、表单里同意条款checkbox 输入框右侧删除按钮 定位icon 临时告知左侧icon |
@icon-size-md |
44px |
|
navbar 上 |
@icon-size-lg |
72px |
|
toast 里的icon 页面正中loading icon |
组件变量
只用于特定组件。
Button
变量名 |
默认变量值 |
描述 |
场景 |
@button-height |
84px |
|
button action-sheet 弹窗按钮 |
@button-height-sm |
46px |
|
辅助按钮-小尺寸 |
@across-button-height |
84px |
|
通栏按钮 |
@button-font-size-sm |
24px |
小按钮字体大小 |
|
@button-font-size |
36px |
按钮字体大小 |
|
@primary-button-fill |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
|
主按钮背景色 |
@primary-button-fill-tap |
![](https://camo.githubusercontent.com/727be1f03f80a86442ec277bb73e409008cad9beaeac9f10a08b60e490bac873/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d2d7461702d3132383464362e7376673f7374796c653d666c6174) |
|
主按钮-按下背景色 |
@ghost-button-color |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
|
同时应用于背景、文字颜色、边框色 |
@ghost-button-fill-tap |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
|
|
@link-button-font-size |
32px |
链接按钮字体 |
|
@link-button-fill-tap |
![](https://camo.githubusercontent.com/7a5e85f925f4425ad3333ce9e3aaedcd8f79494fb8fe7564c88686517f28d0ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6464646464642d6464646464642e7376673f7374796c653d666c6174) |
链接按钮按下背景 |
|
List
变量名 |
默认变量值 |
描述 |
场景 |
@list-item-height |
90px |
用于列表项 |
列表 |
@list-item-height-sm |
70px |
小尺寸列表 |
|
@list-title-height |
60px |
索引列表分类标题的高度 |
索引列表-头部 |
Input
变量名 |
默认变量值 |
描述 |
场景 |
@input-font-size |
28px |
输入框文字 |
|
@input-color-icon |
![](https://camo.githubusercontent.com/ad80a6e8b3dc7fa9614436a59c4015be9f547538fddb99429dd53e4c05e2eb4b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6363636363632d6363636363632e7376673f7374796c653d666c6174) |
输入框中操作图标 |
输入框中清除图标 |
@input-color-icon-tap |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
输入框中操作图标按下 |
输入框中清除图标按下 |
@input-color-icon-inverse |
![](https://camo.githubusercontent.com/2e94d33227bdeae72c2ef09471c45a75a26aa4407c13cd9125d56f26bc3415ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6666666666665f36302532352d6363636363632e7376673f7374796c653d666c6174) |
深色背景下输入框中操作按钮 |
深色背景下输入框中清除按钮 |
@input-color-icon-tap-inverse |
![](https://camo.githubusercontent.com/2cae7525b91f6415bb445cc577cdce271f6b4e435af309c97c803d97f534473c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6666666666665f34302532352d6363636363632e7376673f7374796c653d666c6174) |
深色背景输入框中操作按钮按下 |
深色背景下输入框中清除按钮按下 |
背景 |
|
|
|
Tabs
变量名 |
默认变量值 |
描述 |
场景 |
@tabs-height |
84px |
|
tabs |
@tabs-font-size-heading |
30px |
tabs选项字体 |
|
@tabs-color |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
Tabs 的高亮边和文字色彩 |
|
SegmentedControl
变量名 |
默认变量值 |
描述 |
场景 |
@segmented-control-color |
![](https://camo.githubusercontent.com/d35a462c3606423cc07ed2db5f6291546b53111406caafdbde3b5ef442950fb9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172792d3130386565392e7376673f7374796c653d666c6174) |
|
同时应用于背景、文字颜色、边框色 |
@segmented-control-height |
54px |
分段控件的高度 |
分段控件 |
@segmented-control-fill-tap |
![](https://camo.githubusercontent.com/f0ff2a6b16a7f7522a384aa38b42bbd4e3c33f357418911a5b8689149d79addc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2534302d6272616e642d2d7072696d6172795f31302532352d3130386565392e7376673f7374796c653d666c6174) |
分段控件选项按下的背景色 |
|
TabBar
变量名 |
默认变量值 |
描述 |
场景 |
@tab-bar-height |
100px |
TabBar 的 高度 |
tabbar |
SearchBar
变量名 |
默认变量值 |
描述 |
场景 |
@search-bar-input-height |
56px |
搜索框高度 |
|
NoticeBar
变量名 |
默认变量值 |
描述 |
场景 |
@notice-bar-height |
72px |
|
临时公告 |
@notice-bar-fill |
![](https://camo.githubusercontent.com/acbe0fb50653c0a4b2ac59c723791d87a7838a8c5e24749af2f9110bb42f5905/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d6666666164612d6666666164612e7376673f7374796c653d666c6174) |
全局通知背景 |
notice-bar 背景色 |
Switch
变量名 |
默认变量值 |
描述 |
场景 |
@switch-fill |
![](https://camo.githubusercontent.com/4b5d19613a8396d8c34d81e5edf4800f360922e4d3fdaa94e7745e2bca895619/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532332d3444443836352d3444443836352e7376673f7374796c653d666c6174) |
switch选中的背景色 |
|
Tag
变量名 |
默认变量值 |
描述 |
场景 |
@tag-height |
36px |
标签高度 |
|
Table
变量名 |
默认变量值 |
描述 |
场景 |
@table-title-height |
60px |
表格头高度 |
|
变量命名规范
@{组件}-{属性}-{场景}-{状态}-{大小}-{反色}
组件
可选,具体组件名:如 button
tabs
list
input
等。未指定时表示全局通用。
组件名可以复合,例如 default-button
table
tabs-current
link-button
以表示更精确的主体。
属性
必选,变量实际内容。
brand
通用品牌色
fill
背景色
border-color
边框色
color
色彩。优先使用上面三种。
border-width
边框大小
font-size
文字大小
radius
圆角大小
height
容器高度
v-spacing
垂直间距
h-spacing
水平间距
场景
text
文本
heading
标题
subhead
子标题
caption
辅助说明文字
paragraph
段落文字
placeholder
占位符
display
广告/展示
icontext
图标文字
link
链接
body
页面
overlay
浮层
mask
遮罩
shadow
阴影
状态
可选。
base
基本/默认
tap
按下
disabled
失效
-
priamry
主要
success
成功
warning
警告
info
信息
important
重要/强调
error
错误
大小
约定的大小选项。可选,一般和 font-size
radius
height
spacing
border-width
进行配合。
xl
超大
lg
大
md
中
sm
小
xs
超小
反色
可选。
注 @brand-primary 10%
less 中用 rgba(@brand-primary, 10%)
实现。