iOS 26 UI 样式库测试页面

基于iOS 26设计语言的现代化UI组件库

✨ 主要特性

🎨 iOS 26 设计语言

遵循最新的iOS设计规范

📱 响应式设计

完美适配各种屏幕尺寸

⚡ 高性能

使用CSS变量，轻量级实现

🎨 CSS 变量系统

颜色系统

--ios-primary
--ios-secondary
--ios-success
--ios-warning
--ios-danger

间距系统

--ios-spacing-xs (4px)
--ios-spacing-sm (8px)
--ios-spacing-md (16px)
--ios-spacing-lg (24px)
--ios-spacing-xl (32px)

🔘 按钮组件

基础按钮

按钮尺寸

按钮状态

📋 卡片组件

完整卡片

这是一个包含头部、内容和底部的完整卡片组件。

简单卡片

只有内容的简单卡片，适合展示信息。

交互卡片

悬停时会有阴影效果增强交互体验。

📝 表单组件

输入框组件

🏷️ 徽章组件

主要次要成功警告危险

📐 布局工具

Flexbox 布局

左侧内容

使用 flex 布局

右侧内容

自适应宽度

Grid 布局

网格 1

响应式网格

网格 2

移动端堆叠

网格 3

自适应布局

网格 4

完美适配

📝 文字工具类

字体大小

超小文字 (11px)

小文字 (13px)

基础文字 (17px)

大文字 (20px)

超大文字 (22px)

标题文字 (28px)

大标题文字 (34px)

字体粗细

细体 (300)

正常 (400)

中等 (500)

半粗体 (600)

粗体 (700)

文字颜色

主要文字

次要文字

第三级文字

第四级文字

文字对齐

左对齐文字

居中对齐文字

右对齐文字

📏 间距工具类

内边距 (Padding)

超小内边距 (4px)
小内边距 (8px)
中等内边距 (16px)
大内边距 (24px)
超大内边距 (32px)

外边距 (Margin)

超小外边距 (4px)
小外边距 (8px)
中等外边距 (16px)
大外边距 (24px)
超大外边距 (32px)

🎨 视觉效果

圆角效果

小圆角 (6px)
中等圆角 (8px)
大圆角 (12px)
超大圆角 (16px)
完全圆角

阴影效果

小阴影
中等阴影
大阴影
超大阴影

🎭 动画效果

淡入动画

使用 ios-fade-in 类

滑入动画

使用 ios-slide-up 类

缩放动画

使用 ios-scale-in 类

📱 响应式设计

响应式网格

调整浏览器窗口大小，观察网格布局的变化。在移动设备上，网格会自动堆叠为单列。

网格项 1

响应式布局

网格项 2

自动适配

网格项 3

移动端友好

网格项 4

完美体验

🔝 Header 组件

iOS26 风格 Header

页面顶部已经使用了新的 iOS26 风格 Header 组件，具有以下特性：

  • 🎨 iOS 26 设计语言，毛玻璃效果
  • 📱 响应式设计，移动端侧边菜单
  • ⚡ 滚动时背景透明度变化
  • 🔧 可配置的导航菜单

使用方法：

<template>
  <HeaderHome :navigation="navigation" />
</template>

<script setup>
const navigation = [
  { name: '首页', href: '/' },
  { name: '关于', href: '/about' }
]
</script>

📚 使用说明

快速开始

1. 导入样式

@import './components/iosui/ios26-ui.scss';

2. 使用组件

<button class="ios-btn-primary">主要按钮</button>
<div class="ios-card">
  <div class="ios-card-body">卡片内容</div>
</div>

3. 自定义变量

:root {
  --ios-primary: #your-color;
  --ios-radius-md: 12px;
}