苹果风格组件展示
这个页面展示了我们创建的苹果风格组件集合。
AppleLoadingSpinner 加载组件
基础加载器
加载中...
全屏加载器
AppleProgressBar 进度条组件
基础进度条
不同颜色的进度条
AppleTabs 标签页组件
数据概览
这里是概览页面的内容。显示网站的访问统计、用户活跃度等关键指标。
AppleModal 模态框组件
AppleCard 组件
基础卡片
基础卡片
这是一个基础的苹果风格卡片
这是卡片的内容区域。卡片具有毛玻璃效果、圆角和柔和的阴影，完美体现了苹果的设计语言。
不同变体的卡片
升级版卡片
更强的阴影效果
这个卡片有更强的阴影效果，给人悬浮的感觉。
边框卡片
带有彩色边框
这个卡片有明显的边框，突出显示重要内容。
填充卡片
品牌色背景
这个卡片使用品牌色作为背景，适合重要的行动呼吁。
AppleButton 组件
不同样式的按钮
不同尺寸的按钮
带图标的按钮
加载状态
组合示例
博客文章管理
创建和管理你的博客内容
轻松创建、编辑和发布你的博客文章。支持 Markdown 语法，让写作变得更加便捷。
数据统计
查看网站访问数据
实时监控网站的访问情况，了解用户行为和内容表现。
个人设置
自定义你的个人资料
管理你的个人信息、偏好设置和账户安全。
AppleSearch 搜索组件
基础搜索
搜索功能特点
- 实时搜索: 支持输入时实时搜索
- 智能高亮: 搜索关键词高亮显示
- 键盘导航: 支持方向键选择结果
- 类型分类: 不同类型的搜索结果标识
- 无结果状态: 友好的无搜索结果提示
AppleNotification 通知组件
通知演示
通知特性
- 多种类型: 支持成功、信息、警告、错误四种类型
- 自定义位置: 支持多个位置显示（右上、左上、右下等）
- 自动关闭: 可设置自动关闭时间
- 手动关闭: 支持点击关闭按钮
- 美观动画: 流畅的进入和退出动画
设计特色
我们的苹果风格组件具有以下特色：
- 毛玻璃效果：使用
backdrop-filter创建现代感的透明效果 - 圆角设计：统一的圆角半径，符合苹果的设计语言
- 柔和阴影：多层次的阴影系统，创造深度感
- 流畅动画：使用 cubic-bezier 缓动函数的平滑过渡
- 交互反馈：悬浮、点击时的视觉反馈
- 响应式设计：适配不同屏幕尺寸
- 深色模式支持：自动适应明暗主题
这些组件完美体现了苹果的设计哲学：简约、优雅、功能性。