Pixelium Design 更新:首版表格上线,完善表单、导航、反馈及视觉组件
前言
最近在维护我的像素风组件库 Pixelium Design,它迎来了一波不小的更新。
这次更新不仅带来了功能完善的像素风表格组件,还新增了不少输入组件、导航组件和反馈组件,补全了基础能力。此外,这次的改动,还带来了一个全新的视觉主题——蓝色 notice 主题,让整个组件库看起来更清爽、更有吸引用户注意的“通知提示”的感觉。
如果你之前觉得 Pixelium Design 还缺了点什么,那这次更新或许刚好能填上你心中的空缺。
📊 功能完善的表格组件
(v0.1.0) 开发表格组件的时候,我们考虑了不少实际业务场景中的痛点。这是我们的表格组件一些支持的特性:
-
行选择 & 跨页全选:支持单选复选。不仅支持单页勾选,还提供了 API 由开发者自定义地控制全选行为,仅选择当前页、追加当前页选择、跨页全选所有数据也可以轻松做到。

-
排序 & 多级排序:点击表头即可排序,更重要的是支持多字段组合排序,而很多主流组件库在这块仍处理得不够优雅。

-
总结行:支持在表头下方或表格底部插入汇总行,用于显示合计、平均值等统计信息——这在财务或数据看板场景中极其实用。表头总结行也可以让你在长列表中快速捕获数据的描述统计,是十分实用的功能。

-
背景色:支持纯色、棋盘格和斑马纹。

-
边框:具有较高的自由度,甚至可以配置出我们最讨厌的三线表(懂的都懂)。

-
分页策略灵活:既支持前端分页(一次性加载,本地切页),也支持异步分页(按需请求后端)。
-
合并单元格:支持按行列 span 合并。
-
固定表头 & 固定列:左右冻结、顶部冻结,保持展示关键数据。
-
多级表头:清晰呈现嵌套表头结构,层级关系一目了然。
-
展开行:每行可展开详情内容,适合展示子列表或操作面板。
-
筛选:内置列筛选能力。
可以说,Table 表格组件不仅能满足日常展示,还能完成复杂报表的需求。
🎨 新增蓝色 notice 主题
本次更新最显眼的变化,莫过于新增了 ‘notice’ 蓝色主题。在 v0.1.0 版本中,无论是 Dialog、Message、Alert 这类反馈型组件,还是 Button、Tag 这种通用组件,只要支持主题配置,都可以通过设置 'notice' 来启用这一清新蓝调。


这个配色灵感来源于 Element UI、Ant Design 等组件库的默认主题,主打冷静、清晰、不打扰,也比较符合提示信息配色的惯例,特别适合用于提示性而非警告性的场景。底层实现上,我们通过 CSS 变量统一管理主题色,确保未来扩展更多主题时也能保持结构整洁。
📝 表单组件完善
表单是用户与系统交互的核心载体。(v0.0.3) 我们对表单体系也进行了补全和优化:
Form:提供统一的表单布局、校验状态管理与错误提示能力,支持异步验证与嵌套结构。
Switch:开关控件,支持自定义开/关文案、禁用状态及尺寸调节。
Slider:滑动条,可用于数值范围选择,支持垂直/水平方向、步长控制与 tooltip 显示。
Radio:单选框及其组合容器。
Checkbox:多选框及其组合容器。

🔔 反馈组件补充
(v0.1.0) 这次新增了五个反馈类组件,覆盖了从轻量提示到强交互确认弹窗的不同使用场景:
Alert:一个消息栏。支持设置文本对齐、图标位置等配置,能轻松实现文档说明、操作引导等静态提示。

Dialog:提供基础模态框能力,贴心地提供了 Dialog.info()、Dialog.confirm() 等静态方法调用方式,一行代码就能弹出对话框,适合快速交互。

Popconfirm:气泡确认框,常用于危险操作前的二次确认(比如删除按钮),点击外部自动关闭,体验轻盈。

Badge:角标,可叠加在图标或文字上,支持 dot 模式和数值模式,小巧但信息明确。

Progress:条状进度条,但提供了两种背景样式:纯色填充和棋盘格纹理,方便在不同设计语境下使用。

🧭 导航组件补齐拼图
导航是任何中后台系统绕不开的一环。这次 (v0.1.0) 我们补齐了完整的导航组件家族:
Pagination:分页器,支持总页数、每页条数、跳转输入等常用功能。

此外,参考 Naive UI 的设计,分页器固定页面跳转按钮的个数,避免连续点击时,页码变化引起按钮数量改变导致的误操作。

Menu:构建侧边栏或顶部导航菜单的基石,支持嵌套、折叠、选中高亮、图标前缀、强调模式等。

Breadcrumb:面包屑导航,用于展示当前页面在站点结构中的位置。

DropDown:下拉菜单容器,常用于用户头像菜单或筛选面板。

BackTop:回到顶部按钮,滚动一定距离后自动出现。

👁️ 视觉组件:表现力 UP
为了让界面更具个性与表现力,在 v0.0.3 新增了两个专注于视觉呈现的工具和组件:
pixelate 工具函数:传入一张图片 URL、base64 字符串或者 <img> 对象,即可生成指定粒度的像素化效果。适用于头像趣味处理、低分辨率预览、艺术滤镜等场景。使用简单,性能友好,纯前端实现,不依赖额外库。在 Web Worker 中计算,不阻塞页面。
TextOutline(文本描边)组件:基于 text-stroke 和 background-clip: text 实现的文本描边,支持描边颜色渐变,特别适合标题强化、暗色背景下的可读性提升等需求。

🗓 更新计划
v0.2.0
- 导航组件:标签页。
- 反馈组件:通知、抽屉。
- 数据展示组件:卡片、折叠区域、时间线、日历。
- 表单组件:评分、日期选择器、时间选择器、颜色选择器。
- 视觉组件:打字机、轮播、数字动画。
- 优化代码和完善测试用例。
- 像素风格的落地页和后台模板和电话微波炉(暂定)。
💬 欢迎参与!
Pixelium Design 是一个认真打磨的开源项目。如果你在使用中遇到问题,或者有新组件建议、设计优化想法,欢迎提交 Issue 或 PR!
一个组件库的成长,从来不是一个人的战斗。