🧸 TbeUI - 温柔的UI 🌸

让界面永远不会硬邦邦，把温柔写进代码里

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

感觉不错的话，可以请我喝奶茶哟~

✨ 特性

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

📖 在线文档

📚 查看完整在线文档

📚 免费素材站

🚀 快速开始

📦 安装

npm install tbe-ui

✨ 基础使用

<!-- 引入样式 (压缩版，推荐生产环境使用) -->
<link rel="stylesheet" href="node_modules/tbe-ui/dist/css/tbeui.css">

<!-- 引入 JavaScript -->
<script src="node_modules/tbe-ui/dist/js/tbeui.js"></script>
<script>
  // 初始化组件
  TbeUI.init();
</script>

📁 文件结构

dist/
├── css/
│   ├── tbeui.css          # 压缩版（推荐生产环境）
│   └── tbeui.full.css     # 完整版（便于调试）
└── js/
    ├── tbeui.js           # JS格式 - 压缩版
    └── tbeui.full.js      # JS格式 - 完整版

🎯 使用组件

<!-- 按钮 - 软软糯糯的 -->
<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 代码，解答问题…

💝 真的超级感谢你们！

请我喝杯奶茶吧

🌟 投喂榜

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

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

✨ 另外，如果可能，也可以带上建议或者意见哟～

🧩 组件列表

✨ 总计 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% |

🥛 后续计划

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

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

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

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

💝 贡献指南

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

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

有任何问题都可以提 Issues

📝 License

MIT License

Copyright © 2024 TbeUI Team 🌸

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