设计变量表及命名规范
通用变量
用于非组件或多个组件上的变量。
颜色
| 变量名 | 默认变量值 | 描述 | 场景 |
|---|---|---|---|
| 字体 | |||
@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 |
48px |
标签高度 | |
@tag-height-sm |
28px |
小号标签高度 | |
@tag-color |
|
标签字体颜色、边线颜色 |
Table
| 变量名 | 默认变量值 | 描述 | 场景 |
|---|---|---|---|
@table-title-height |
60px |
表格头高度 |
变量命名规范
@{组件}-{属性}-{场景}-{状态}-{大小}-{反色}
组件
可选，具体组件名：如 button
tabs list
input 等。未指定时表示全局通用。
组件名可以复合，例如
default-buttontabletabs-currentlink-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超小
反色
可选。
inverse用于深色背景
注
@brand-primary 10%less 中用rgba(@brand-primary, 10%)实现。