zhixuanziben / musicapi Goto Github PK
View Code? Open in Web Editor NEW网易云音乐vue版的node.js后台
License: MIT License
网易云音乐vue版的node.js后台
License: MIT License
用于非组件或多个组件上的变量。
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
全局 | |||
@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 |
只用于特定组件。
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@list-item-height |
90px |
用于列表项 | 列表 |
@list-item-height-sm |
70px |
小尺寸列表 | |
@list-title-height |
60px |
索引列表分类标题的高度 | 索引列表-头部 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@tabs-height |
84px |
tabs |
|
@tabs-font-size-heading |
30px |
tabs选项字体 | |
@tabs-color |
Tabs 的高亮边和文字色彩 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@segmented-control-color |
同时应用于背景、文字颜色、边框色 | ||
@segmented-control-height |
54px |
分段控件的高度 | 分段控件 |
@segmented-control-fill-tap |
分段控件选项按下的背景色 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@tab-bar-height |
100px |
TabBar 的 高度 | tabbar |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@search-bar-input-height |
56px |
搜索框高度 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@notice-bar-height |
72px |
临时公告 | |
@notice-bar-fill |
全局通知背景 | notice-bar 背景色 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@switch-fill |
switch选中的背景色 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@tag-height |
48px |
标签高度 | |
@tag-height-sm |
28px |
小号标签高度 | |
@tag-color |
标签字体颜色、边线颜色 |
变量名 | 默认变量值 | 描述 | 场景 |
---|---|---|---|
@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
超小可选。
inverse
用于深色背景注
@brand-primary 10%
less 中用rgba(@brand-primary, 10%)
实现。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.