跳到内容
WaperDesign
品牌组件
EN
组件目录

基础规范

颜色字体与字号间距与尺寸圆角阴影与边框动效图标焦点

基础组件

按钮徽章输入框与文本域搜索框下拉选择开关、勾选、单选分段与标签页筛选片头像进度、骨架屏与转圈提示条空状态卡片列表行页头与分节标题键值面包屑与返回表格键盘提示与字标

浮层交互

菜单与二级菜单右键菜单弹层、tooltip 与展开的下拉对话框与确认对话框抽屉Toast 与加载→完成

WAPER / UI

图标

lucide,线宽 1.75:菜单里 14、按钮里 16、侧栏行 18;四级颜色。

亮色

正在加载预览…

暗色

正在加载预览…

Waper Design

有个性,也有章法。

认识 Waper ↗
尺寸
14菜单项、消息操作
16按钮、圆形按钮、输入框的「+」
18侧栏行
线宽 1.75
1.75(默认)与 2.25 对比
四级颜色
1
2
3
4

默认二级色,悬停变一级。

常用图标(可以悬停)

  • Search
  • Plus
  • X
  • ChevronDown
  • ChevronRight
  • MoreHorizontal
  • Pencil
  • Trash2
  • Copy
  • Check
  • Share
  • Undo2
  • RefreshCw
  • ExternalLink
  • Settings
  • Bell
  • Radar
  • Library
  • Plug
  • FileText
  • Folder
  • Paperclip
  • ArrowUp
  • Mic
  • Globe
  • Calendar
  • Clock
  • Pin
  • Sparkles
  • Info
  • TriangleAlert
  • CircleCheck
尺寸
14菜单项、消息操作
16按钮、圆形按钮、输入框的「+」
18侧栏行
线宽 1.75
1.75(默认)与 2.25 对比
四级颜色
1
2
3
4

默认二级色,悬停变一级。

常用图标(可以悬停)

  • Search
  • Plus
  • X
  • ChevronDown
  • ChevronRight
  • MoreHorizontal
  • Pencil
  • Trash2
  • Copy
  • Check
  • Share
  • Undo2
  • RefreshCw
  • ExternalLink
  • Settings
  • Bell
  • Radar
  • Library
  • Plug
  • FileText
  • Folder
  • Paperclip
  • ArrowUp
  • Mic
  • Globe
  • Calendar
  • Clock
  • Pin
  • Sparkles
  • Info
  • TriangleAlert
  • CircleCheck