Pixelium Design 更新：首版表格上线，完善表单、导航、反馈及视觉组件

前言最近在维护我的像素风组件库 Pixelium Design它迎来了一波不小的更新。这次更新不仅带来了功能完善的像素风表格组件还新增了不少输入组件、导航组件和反馈组件补全了基础能力。此外这次的改动还带来了一个全新的蓝色 notice 主题让组件看起来更有吸引用户注意的通知提示的感觉。如果你之前觉得 Pixelium Design 还缺了点什么那这次更新或许刚好能填上你心中的空缺。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原文https://juejin.cn/post/7615807694734573610