🧸 TingUI 🌸

把复古硅胶计算器的软糯触感，写进温柔代码里

一套充满温柔质感的新拟态 CSS 组件库

✨ 特性

🎯 60+ 精美组件 - 按钮、卡片、表单、导航等 🌙 深色模式支持 - 温柔不刺眼的视觉体验 📱 响应式设计 - 手机平板都好看 🎨 精致质感 - 软糯糯的硅胶触感 ♿ 无障碍支持 - 让每个人都能用

🚀 快速开始

📦 安装

bash

npm install ting-ui

✨ 基础使用

html

<!-- 引入样式 -->
<link rel="stylesheet" href="node_modules/ting-ui/dist/tingui.css">

<!-- 引入 JavaScript -->
<script src="node_modules/ting-ui/dist/tingui.umd.js"></script>
<script>
  // 初始化组件
  TingUI.init();
</script>

🎯 使用组件

html

<!-- 按钮 - 软软糯糯的 -->
<button class="t-button">默认按钮</button>
<button class="t-button t-button--primary">主要按钮</button>

<!-- 卡片 - 装着小惊喜 -->
<div class="t-card">
  <h3>🎀 给你的小卡片</h3>
  <p>里面藏着甜甜的话～</p>
</div>

<!-- 输入框 - 写下你的小秘密 -->
<input class="t-input" placeholder="✍️ 在这里写点什么吧...">
</script>

📖 故事要从哪里说起...

记得小时候，家里有一个 💗 硅胶计算器，按键软软的，按下去会有 Q 弹的回馈感。后来这种计算器慢慢消失了，再也找不到那种温暖的手感。直到前不久，竟然在某宝意外发现了同款！那一刻，儿时的记忆全都涌了上来……🥹

于是就有了这个想法：把这种温柔、软萌、复古的硅胶质感，做成一套 UI 组件库。让代码也有温度，让界面也能传递温暖。

作为一个热爱前端开发的人，这两个月来，反复反复写了又改，改了又写。期间真的求助于很多热心的大佬们，他们不厌其烦地帮我 review 代码，解答问题…

💝 真的超级感谢你们！

☕️ 给我投喂一杯奶茶吧 😋

做这套组件库真的好累好累呀，每天回来就是写代码、改 BUG、写文档...有时候写到深夜，眼睛都酸酸的 😭

但是看到有人喜欢这套风格，就又有了动力！

🌸 如果你觉得这套组件库 ✨ 蛮好看也蛮实用的 ✨

🧋 可以请我喝奶茶哟~

每一杯奶茶都会变成我继续写代码的动力！让我知道有人在支持我，我就不会孤单啦～

🌟 投喂榜

排名	昵称	投喂	留言
🥇	小兔子乖乖	🧋 波霸奶茶	加油鸭！很好看！
🥈	匿名大佬	☕️ 星巴克	继续更新哦
🥉	前端小可爱	🍵 抹茶拿铁	支持女孩子写代码！
⭐	等你来上榜	✨	你的留言

✨ 如果你也想上榜，扫码投喂后告诉我你的昵称和留言哟～

🧩 组件列表

✨ 总计 60+ 组件，更多可爱组件正在路上～ 🚂

🎨 基础组件

组件	说明	状态
🎯 Button	按钮 - 软软糯糯的触感	✅
✍️ Input	输入框 - 写下小秘密	✅
🖼 Card	卡片 - 装着小惊喜	✅
🏷 Tag	标签 - 贴个小标记	✅
🔠 Typography	排版 - 文字也有温度	✅
📏 Divider	分割线 - 温柔的分隔	✅
🎨 Color	色彩 - 温柔配色方案	✅
🖼 Image	图片 - 展示美好瞬间	✅

📝 表单组件

组件	说明	状态
☑️ Checkbox	复选框 - 点一点选择	✅
⚪️ Radio	单选框 - 选一个最爱	✅
🔘 Switch	开关 - 开开关关	✅
📎 Upload	上传 - 分享文件	✅
📅 DatePicker	日期选择 - 选个日子	🚧
⏰ TimePicker	时间选择 - 选个时刻	🚧
🔢 InputNumber	数字输入 - 精确计数	✅
📝 Form	表单 - 收集信息	✅
🎚️ Slider	滑块 - 滑动选择	✅
⭐ Rate	评分 - 打个小星星	✅
🌳 Cascader	级联选择 - 层级选择	🚧
🎯 Select	选择器 - 下拉选择	✅

🧭 导航组件

组件	说明	状态
📋 Menu	菜单 - 导航小助手	✅
🍞 Breadcrumb	面包屑 - 记住回家的路	✅
📌 Tabs	标签页 - 切换内容	✅
🔍 Pagination	分页 - 一页一页翻	✅
👣 Steps	步骤条 - 一步一步来	✅
⏱️ Timeline	时间线 - 记录美好	✅
🎯 Anchor	锚点 - 快速定位	🚧
🏠 Backtop	回到顶部 - 一键回家	✅

📊 数据展示

组件	说明	状态
📊 Table	表格 - 整整齐齐	✅
🌳 Tree	树形 - 层级展示	✅
📊 Progress	进度条 - 看进度	✅
🎴 Badge	徽标数 - 小红点	✅
🏷️ Tag	标签 - 分类标记	✅
🎨 Avatar	头像 - 展示形象	✅
📋 List	列表 - 整齐排列	✅
🖼️ Carousel	轮播 - 自动切换	✅
📅 Calendar	日历 - 查看日期	🚧
📊 Statistic	统计数值 - 展示数据	✅
⏳ Countdown	倒计时 - 等待时刻	✅
🎯 Descriptions	描述列表 - 键值对	✅

💬 反馈组件

组件	说明	状态
💬 Message	消息提示 - 悄悄告诉你	✅
🔔 Notification	通知 - 重要的事情	✅
📦 Modal	对话框 - 弹个小窗	✅
⏳ Loading	加载 - 等一下下	✅
⚠️ Alert	警告提示 - 提醒注意	✅
❓ Popconfirm	气泡确认 - 再确认下	✅
💭 Tooltip	文字提示 - 鼠标悬停	✅
🎈 Popover	气泡卡片 - 更多信息	✅
🎴 Result	结果 - 操作反馈	✅
🦴 Skeleton	骨架屏 - 加载占位	✅
🚫 Empty	空状态 - 暂无数据	✅

🗂️ 布局组件

组件	说明	状态
📐 Grid	栅格 - 排排坐	✅
📦 Layout	布局 - 页面结构	✅
📏 Space	间距 - 留白呼吸	✅
🪟 Affix	固钉 - 固定位置	✅
🎯 Split	分割面板 - 可拖拽	🚧

🎯 其他组件

组件	说明	状态
🌐 Locale	国际化 - 多语言	✅
🎨 Theme	主题 - 换肤	✅
🖱️ Scroll	滚动 - 平滑滚动	✅
⌨️ Keyboard	快捷键 - 键盘操作	🚧

📊 组件完成度统计

分类	总数	已完成	进行中	完成率
🎨 基础组件	8	8	0	100%
📝 表单组件	12	9	3	75%
🧭 导航组件	8	6	2	75%
📊 数据展示	12	9	3	75%
💬 反馈组件	11	11	0	100%
🗂️ 布局组件	5	4	1	80%
🎯 其他组件	4	3	1	75%
总计	60	50	10	83%

🥛 后续计划

下一个目标：🥛 牛奶风格组件库

想做一套温柔到心坎里的，暖暖的牛奶风！但是...

💭 需要大家的支持才能继续开发下去

如果投喂的人多，我就优先做这个！如果没人支持...可能就要找别的工作了 😅

💝 贡献指南

如果你想让这套组件库变得更好看：

🍴 Fork 本仓库 - 复制一份到你的小天地
🌿 创建你的分支 (git checkout -b feature/AmazingFeature)
💾 提交你的修改 (git commit -m '✨ 添加了某个功能')
🚀 推送到分支 (git push origin feature/AmazingFeature)
🎉 发起 Pull Request

有任何问题都可以提 Issues

📝 License

MIT License

可以随意使用、修改、分享，保留我的名字就好啦～

用最软萌的代码，写最温暖的应用

✨ 如果这个项目对你有帮助，可以请我喝杯奶茶 ✨
🧋 一点点波霸奶茶，去冰三分糖

💖 愿你今天也有好心情，也愿我能继续写下去 💖

🧸 TingUI 🌸 ​

✨ 特性 ​

🚀 快速开始 ​

📦 安装 ​

✨ 基础使用 ​

🎯 使用组件 ​

📖 故事要从哪里说起... ​

☕️ 给我投喂一杯奶茶吧 😋 ​

🌟 投喂榜 ​

🧩 组件列表 ​

🎨 基础组件 ​

📝 表单组件 ​

🧭 导航组件 ​

📊 数据展示 ​

💬 反馈组件 ​

🗂️ 布局组件 ​

🎯 其他组件 ​

📊 组件完成度统计 ​

🥛 后续计划 ​

下一个目标：🥛 牛奶风格组件库 ​

💝 贡献指南 ​

📝 License ​