个人前端学习过程中整理的常用 UI 组件集合,覆盖多种常见交互元素。
按钮、表单、开关、进度条、弹窗、卡片、标签、分页、提示框、折叠面板等,共 20+
HTML5 + CSS3 + 原生 JavaScript,Flexbox 布局、CSS 变量、过渡动画,零框架依赖
CSS 主题化、box-shadow 焦点环、transform 过渡动画、classList.toggle() 状态切换
查看实时效果,在浏览器开发者工具中复制源码到自己的项目
包含不同样式、尺寸、状态的按钮,支持hover交互效果
包含输入框、单选框、复选框、开关、下拉菜单等常用表单元素
支持动画效果的模态弹窗,点击遮罩层可关闭
带hover效果的卡片布局,包含头部、内容、底部区域
不同样式的标签,支持可关闭类型
带选中状态、禁用状态的分页控件
右侧弹出的提示消息,支持自动消失
展示当前页面层级路径,支持点击跳转
不同类型的提示信息,用于展示重要通知
不同风格的加载指示器
可展开/收起的面板,用于内容分组展示
前端开发学习路线:HTML → CSS → JavaScript → Vue/React → 移动端开发 → 工程化
主要使用技术:Vue3、TypeScript、Pinia、Vite、Element Plus、Chart.js 等
已完成多个实战项目,包括个人博客系统、在线记账本、血压记录助手等
切换不同内容区域的标签导航
分享前端开发中的知识点与实战经验,涵盖 CSS 布局技巧、JavaScript 高级特性、Vue3 源码解读等内容。
包含血压记录助手、简易记账本、前端UI组件库等技术演示项目,均为纯前端实现。
前端开发者,专注于 Vue3 技术栈的学习与实践,持续更新技术笔记与项目经验。
不同尺寸和样式的头像
用于显示数量或状态标记
按时间顺序展示事件
本组件库为个人前端学习成果 · 纯 HTML + CSS + JavaScript 实现 · 无任何外部框架依赖
© 2025–2026 云间拾光 · 个人非经营性网站 · 滇ICP备2026004252号
← 返回首页