组件展示 · DATE Design
Web 常用组件 · v1.1
COMPONENTS · 组件库
常用 Web 组件展示

全部组件遵循 DATE Design v1.1:直角(圆角 0)、1px 边界、焦点 2px+2px 外距、控件高 40(移动 48)。右上角可切换 8 套主题。

ACTIONS · 动作
按钮 Button

规范:每区域仅一个主按钮;次按钮承载补充;文字按钮低强调;危险动作须用具体名称;加载时保留标签与位置并阻止重复。

点击"提交并加载"会进入加载态 1.5s 自动恢复;"弹出提示"在底部弹出一条信息提示。

FORMS · 表单
输入框 / 文本域 / 选择
我们不会公开你的邮箱。
邮箱格式不正确。

规范:输入默认控件底色 + 1px 默认边界;错误用危险前景色边界;焦点 2px 焦点色 + 2px 外距;占位用 placeholder 文字色。

SELECTORS · 选择
复选框 / 单选 / 开关

规范:选中用主操作底色;圆角 0 故选中标记亦为方块;焦点环独立叠加。

NAVIGATION · 导航
标签页 Tabs / 导航菜单
概览面板:展示关键指标与今日摘要。

当前选中:仪表盘(导航/激活用主操作底色)。

DATA · 数据
进度条 / 表格 / 列表
0%
A
设计评审
今天 10:30
B
需求梳理
今天 14:00
C
发布演练
明天 09:00
名称类型更新大小
index.html文档10-1712 KB
components.html文档10-1728 KB
logo.svg图像10-164 KB
report.pdf文档10-15210 KB
FEEDBACK · 反馈
提示 Alert / 标签 / 面包屑 / 工具提示
成功:配置已保存。
信息:正在后台同步数据。
注意:存储空间即将用尽。
错误:无法连接到服务器。
默认信息成功警告危险
工作台/项目/组件展示
这是一个工具提示
DISPLAY · 展示
分页 / 折叠面板 / 滑块

当前页 1;首尾页禁用对应方向。

数值:40

一套以低饱和中性色与冰蓝为主、强调直角与清晰层级的跨端设计标准。