平台组件UI

品牌色

中性色

辅助色

功能色

左右布局

上下布局

T型布局

基于 4px 刻度， 我们分别抽离了一套常用的间距体系，

小间距 4px、8px、12px：常用于信息展示型的内容，且具有亲密的主次关系之间排布。

常规间距 16px、20px、24px：常规间距应用于大部分场景的排布，如标题上下间距，模块容器之间的间距。

大间距 32px、40px、48p：大间距用于相对疏离模块的排布或无分割线，需要使用大间距区分模块。

相关性越强的元素之间间距越小，关联性越弱则间距越大。设计者可根据内容整体的致密和疏松偏好，灵活配置这三种间距对应的的具体数值。

2px

全圆角

字号

字重

单个时间

时间范围

数据展示：省略字符

Shadow-0 零度 无投影数值，一般用于常规控件

Shadow-1 低度 常用于突出页面栏目模块，页面框架结构的划分搭建

Shadow-2 常规 常用于水平面元素悬浮状态，如卡片hover状态、气泡提示框

Shadow-3 高度 常用于模态弹窗等高于页面的元素

按钮类型

图标按钮

不可用状态

加载中状态

幽灵按钮

危险按钮

block按钮

按钮类型

基础用法

带图标

带下拉菜单

基本用法

竖直方向的步骤条

带有进度的步骤条

基本用法

滑动

附加内容

位置

卡片式页签

每页数量

自定义跳转到某一页

总数

适应文本高度的文本域

前缀和后缀

搜索框

输入框组合

密码框

带字数提示

前置/后置标签

超出边界

标签

自动分词

多选

联动

分组

带搜索框

隐藏已选择项

自由扩展

弹出位置

组合下拉菜单

多级菜单

右键菜单

加载中状态

基本用法

高亮

多选

可勾选

线性样式

虚拟滚动

基本用法

移入展开

禁用选项

搜索

动态加载选项

多选

基本用法

范围选择器

不可选择日期和时间

选择不超过七天的时间范围

预设范围

额外的页脚

基本用法

12小时制

步长选项

范围选择器

全选

联动checkbox

表单域

基本使用

内联登陆栏

表单布局

对齐方式

自定义校验规则

动态增减表单项

表单验证

高级搜索

弹出层中新建表单

带输入框的滑块

带icon的滑块

带标签的滑块

已上传的文件列表

照片墙

拖拽上传

文件夹上传

上传前转换文件

自定义进度条样式

固定列

可伸缩列

可选择

自定义筛选菜单

多列排序

固定表头

表头分组

筛选和排序

嵌套子表格

单元格自动省略

基本用法

栅格列表

自定义标题

带边框

基础用法

手风琴

面板嵌套

可选择

多彩标签

图标按钮

动态添加和删除

角标数字

红点

状态点

缎带

位置：四个方向

基本用法

自定义节点

横向时间轴

数据卡片