用途:为 8-bit 复古风格 UI 组件创建像素化边框、阴影和特效,适合需要真实像素艺术外观的界面开发。
主要能力:提供像素化边框图案,使用 9 个 div 元素配合绝对定位实现;提供像素化阴影图案,为组件增加层次感;提供图标按钮图案,为小型自包含按钮生成像素边框;并给出深色模式下的颜色处理建议。
使用方式:在相对定位容器内放置基础组件(如 ShadcnButton),并设置 rounded-none 去除圆角;通过绝对定位的 div 绘制四角像素、边缘分段和阴影条;图标按钮使用更小的像素边框;深色模式使用 CSS 自定义属性或 dark 变体,例如 bg-foreground dark:bg-ring。
关键原则:使用 rounded-none 移除基础组件圆角;使用固定像素尺寸(如 1.5、3px)保持复古感;所有边框元素在相对容器内绝对定位;深色模式使用 ring 或 foreground 配合 dark 变体保证对比度;按变体条件渲染,ghost、link、icon 等变体不显示边框。
参考实现:完整实现见 components/ui/8bit/button.tsx。
限制:资料未提供安装命令、依赖版本、浏览器兼容性、性能数据或收费信息,暂未提供。