通用变量
用于非组件或多个组件上的变量。
颜色
| 变量名 |
默认变量值 |
描述 |
场景 |
| 字体 |
|
|
|
@color-text-base |
 |
默认文字 |
tabs-默认选项 button行动按钮-次按钮 floatmenu浮动菜单-菜单项 list列表-label picker选择器-选项 input输入框-输入内容 modal弹窗-标题 step步骤条-标题 |
@color-text-base-inverse |
 |
深色背景下的文字 |
行动按钮-主按钮 临时告知 toast 徽标数 深色标签 |
@color-text-placeholder |
 |
文本框提示 |
input输入框、textarea输入区域-文字提示 清除图标的默认颜色 |
@color-text-disabled |
 |
失效 |
|
@color-text-caption |
 |
辅助描述 |
|
@color-text-paragraph |
 |
段落 |
|
@color-link |
 |
链接色 |
链接的颜色 可点击文字按钮的文字颜色 |
@color-shadow |
 |
阴影色 |
floatmenu浮动菜单 |
| 填充 |
|
|
|
@fill-base |
|
组件默认背景 |
|
@fill-body |
 |
页面背景 |
|
@fill-tap |
 |
默认背景按下 |
|
@fill-disabled |
|
失效背景 |
|
@fill-mask |
 |
遮罩背景 |
dropdown actionsheet floatmenu modal |
@fill-overlay-inverse |
 |
浮层背景反色 |
toast |
| 全局 |
|
|
|
@brand-primary |
|
主色 |
主按钮-背景色 icon-背景色 |
@brand-primary-tap |
 |
主色按下 |
|
@brand-success |
 |
成功 |
|
@brand-warning |
 |
警告 |
NoticeBar-文字 |
@brand-error |
 |
失败 |
|
@brand-hot |
 |
热门 |
优惠、热门、强调 |
@brand-important |
 |
重要 |
用于 badge 等 |
| 边框 |
|
|
|
@border-color-base |
|
基本边框色 |
button按钮-次按钮 list列表 tab选项卡 actionsheet操作列表-选项分割线 |
| 透明度 |
|
|
|
@opacity-disabled |
 |
组件禁用 |
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 |
 |
|
主按钮背景色 |
@primary-button-fill-tap |
 |
|
主按钮-按下背景色 |
@ghost-button-color |
|
|
同时应用于背景、文字颜色、边框色 |
@ghost-button-fill-tap |
|
|
|
@link-button-font-size |
32px |
链接按钮字体 |
|
@link-button-fill-tap |
|
链接按钮按下背景 |
|
List
| 变量名 |
默认变量值 |
描述 |
场景 |
@list-item-height |
90px |
用于列表项 |
列表 |
@list-item-height-sm |
70px |
小尺寸列表 |
|
@list-title-height |
60px |
索引列表分类标题的高度 |
索引列表-头部 |
Input
| 变量名 |
默认变量值 |
描述 |
场景 |
@input-font-size |
28px |
输入框文字 |
|
@input-color-icon |
|
输入框中操作图标 |
输入框中清除图标 |
@input-color-icon-tap |
|
输入框中操作图标按下 |
输入框中清除图标按下 |
@input-color-icon-inverse |
 |
深色背景下输入框中操作按钮 |
深色背景下输入框中清除按钮 |
@input-color-icon-tap-inverse |
 |
深色背景输入框中操作按钮按下 |
深色背景下输入框中清除按钮按下 |
| 背景 |
|
|
|
Tabs
| 变量名 |
默认变量值 |
描述 |
场景 |
@tabs-height |
84px |
|
tabs |
@tabs-font-size-heading |
30px |
tabs选项字体 |
|
@tabs-color |
|
Tabs 的高亮边和文字色彩 |
|
SegmentedControl
| 变量名 |
默认变量值 |
描述 |
场景 |
@segmented-control-color |
|
|
同时应用于背景、文字颜色、边框色 |
@segmented-control-height |
54px |
分段控件的高度 |
分段控件 |
@segmented-control-fill-tap |
 |
分段控件选项按下的背景色 |
|
TabBar
| 变量名 |
默认变量值 |
描述 |
场景 |
@tab-bar-height |
100px |
TabBar 的 高度 |
tabbar |
SearchBar
| 变量名 |
默认变量值 |
描述 |
场景 |
@search-bar-input-height |
56px |
搜索框高度 |
|
NoticeBar
| 变量名 |
默认变量值 |
描述 |
场景 |
@notice-bar-height |
72px |
|
临时公告 |
@notice-bar-fill |
 |
全局通知背景 |
notice-bar 背景色 |
Switch
| 变量名 |
默认变量值 |
描述 |
场景 |
@switch-fill |
 |
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%) 实现。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent