前端UI组件展示 - 云间拾光

📚 关于本组件库

个人前端学习过程中整理的常用 UI 组件集合，覆盖多种常见交互元素。

🎯 收录组件

按钮、表单、开关、进度条、弹窗、卡片、标签、分页、提示框、折叠面板等，共 20+

⚙️ 技术栈

HTML5 + CSS3 + 原生 JavaScript，Flexbox 布局、CSS 变量、过渡动画，零框架依赖

📖 学习要点

CSS 主题化、box-shadow 焦点环、transform 过渡动画、classList.toggle() 状态切换

🔧 如何使用

查看实时效果，在浏览器开发者工具中复制源码到自己的项目

按钮组件

包含不同样式、尺寸、状态的按钮，支持hover交互效果

表单组件

包含输入框、单选框、复选框、开关、下拉菜单等常用表单元素

文本输入

禁用状态

密码输入

下拉选择

▼

单选按钮

选项一

选项二

选项三

复选框

选项一

选项二

选项三

开关切换

消息通知

隐私保护

夜间模式

进度条

加载进度 75%

弹窗组件

支持动画效果的模态弹窗，点击遮罩层可关闭

卡片组件

带hover效果的卡片布局，包含头部、内容、底部区域

卡片标题一

新品

这是卡片内容区域，支持多行文本展示，可用于展示产品信息、文章摘要等内容。

更新于 2026-03-23

卡片标题二

标签组件

不同样式的标签，支持可关闭类型

分页组件

带选中状态、禁用状态的分页控件

<

1

2

3

4

5

>

提示框组件

右侧弹出的提示消息，支持自动消失

面包屑导航

展示当前页面层级路径，支持点击跳转

警告提示

不同类型的提示信息，用于展示重要通知

✓

操作成功

您的操作已成功完成，数据已保存。

×

!

注意提示

请确保信息填写完整后再提交。

×

错误提示

提交失败，请检查输入的信息是否正确。

×

i

信息提示

本系统将于今晚22:00进行例行维护。

×

加载动画

不同风格的加载指示器

旋转加载

三点加载

进度条加载

圆形脉冲

折叠面板

可展开/收起的面板，用于内容分组展示

学习路线 ▼

前端开发学习路线：HTML → CSS → JavaScript → Vue/React → 移动端开发 → 工程化

技术栈 ▼

主要使用技术：Vue3、TypeScript、Pinia、Vite、Element Plus、Chart.js 等

项目经验 ▼

已完成多个实战项目，包括个人博客系统、在线记账本、血压记录助手等

标签页

切换不同内容区域的标签导航

技术文章

项目展示

关于我

前端开发技术文章

分享前端开发中的知识点与实战经验，涵盖 CSS 布局技巧、JavaScript 高级特性、Vue3 源码解读等内容。

个人项目展示

包含血压记录助手、简易记账本、前端UI组件库等技术演示项目，均为纯前端实现。

关于我

前端开发者，专注于 Vue3 技术栈的学习与实践，持续更新技术笔记与项目经验。

头像

不同尺寸和样式的头像

A

前

小

大

徽章

用于显示数量或状态标记

新新消息

5 未读消息

在线状态

已上线

时间线

按时间顺序展示事件

2026-03

完成组件库学习

系统学习了10+种前端常用UI组件的实现原理

2026-02

完成记账本项目

开发了简易记账本，支持本地数据存储和图表统计

2026-01

开始前端学习

从HTML、CSS、JavaScript基础开始系统学习

前端 UI 组件库 · 学习实践集