Punch-UI 介绍
Punch-UI 是一个基于 ofa.js 构建的现代化 UI 组件库，提供了丰富的组件和完善的主题定制能力。
特性
- 🎨 Material Design 3 - 采用最新的 Material Design 3 设计规范，提供现代化的视觉体验
- 🌗 主题切换 - 内置深色/浅色主题支持，可自动跟随系统或手动切换
- 📦 按需加载 - 基于 ofa.js 的模块化设计，只加载需要的组件
- 🔧 高度可定制 - 支持自定义主题、颜色和样式
- 📱 响应式设计 - 所有组件都支持响应式布局，适配移动端和桌面端
组件列表
Punch-UI 提供了丰富的组件库，涵盖以下类别：
基础组件
- Button - 按钮，支持多种样式、尺寸和颜色
- Input - 输入框，支持多种样式和尺寸
- Textarea - 多行文本输入框
表单组件
- Checkbox - 复选框，支持单个和组合使用
- Radio - 单选框，支持单个和组合使用
- Select - 下拉选择器
- Switch - 开关切换
数据展示
- List - 列表项组件，支持前缀和后缀
- Tabs - 标签页组件
反馈组件
- Dialog - 模态对话框
- Snackbar - 轻提示
导航组件
- Navigation - 导航栏和导航布局
工具函数
- Toast - 轻量级提示
- Alert - 警告框
- Confirm - 确认框
- Prompt - 输入框
为什么选择 Punch-UI？
1. 无需构建工具
Punch-UI 基于 ofa.js，可以直接在浏览器中使用，无需 Webpack、Vite 等构建工具。这使得开发更加简单快捷。
2. 模块化设计
每个组件都是独立的模块，可以按需加载，不会引入不必要的代码。
3. 完善的主题系统
基于 Material Design 3 的颜色系统，提供语义化的颜色变量，自动适配深色/浅色主题。
4. 易于定制
支持通过 CSS 变量自定义主题，也可以通过 CSS Part 选择器自定义组件样式。
浏览器支持
Punch-UI 支持所有现代浏览器：
- Chrome（最新版本）
- Firefox（最新版本）
- Safari（最新版本）
- Edge（最新版本）