Liquid Glass UI Vue

一个具有现代液态玻璃效果和苹果风格设计的 Vue 3 组件库。

✨ 特性

• 🎨 液态玻璃效果 - 现代化的毛玻璃视觉效果
• 🎯 苹果风格设计 - 简洁优雅的界面设计
• 📱 完全响应式 - 适配各种设备尺寸
• ⚡ TypeScript 支持 - 完整的类型定义
• 🎭 主题支持 - 支持明暗主题切换
• ♿ 无障碍友好 - 完整的键盘导航和屏幕阅读器支持
• 🔧 高度可定制 - 灵活的配置选项

📦 安装

npm install liquid-glass-ui-vue
# 或
pnpm add liquid-glass-ui-vue
# 或
yarn add liquid-glass-ui-vue

🚀 快速开始

全局安装

import { createApp } from 'vue'
import LiquidGlassUI from 'liquid-glass-ui-vue'
import 'liquid-glass-ui-vue/dist/style.css'

const app = createApp(App)
app.use(LiquidGlassUI)
app.mount('#app')

按需引入

<template>
  <div>
    <LgButton variant="primary" @click="handleClick">
      点击我
    </LgButton>

    <LgSelect
      v-model="selected"
      :options="options"
      placeholder="选择一个选项"
      searchable
    />

    <LgInput
      v-model="text"
      type="password"
      placeholder="输入密码"
      clearable
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LgButton, LgSelect, LgInput } from 'liquid-glass-ui-vue'

const selected = ref('')
const text = ref('')
const options = [
  { label: '选项 1', value: 'option1' },
  { label: '选项 2', value: 'option2' },
  { label: '选项 3', value: 'option3' }
]

function handleClick() {
  console.log('按钮被点击了!')
}
</script>

🎯 组件列表

LgButton - 按钮

• 多种变体：primary, secondary, success, warning, error, info
• 三种尺寸：small, medium, large
• 支持加载状态和禁用状态

LgInput - 输入框

• 支持多种类型：text, password, email, number, tel
• 密码显示/隐藏切换功能
• 可清除功能
• 完整的表单验证支持

LgSelect - 选择器

• 单选和多选模式
• 可搜索和过滤功能
• 现代化的搜索框设计
• 双向箭头指示器
• 完整的键盘导航

LgModal - 弹窗

• 多种尺寸：small, medium, large
• 可自定义头部和底部
• 支持遮罩点击关闭

LgCard - 卡片

• 灵活的内容布局
• 支持阴影效果
• 可点击交互

LgContainer - 容器

• 响应式布局
• 流体宽度支持
• 可自定义间距

LgForm - 表单

• 完整的表单验证
• 多种布局模式
• 自定义验证规则

LgMenu - 菜单

• 水平和垂直模式
• 支持子菜单
• 响应式设计

📖 文档

详细的使用文档和示例请访问：GitHub Wiki

🎨 主题定制

:root {
  --lg-primary-color: #3b82f6;
  --lg-secondary-color: #64748b;
  --lg-success-color: #10b981;
  --lg-warning-color: #f59e0b;
  --lg-error-color: #ef4444;
  --lg-info-color: #06b6d4;
}

🔧 开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🔗 相关链接

• GitHub 仓库
• 在线演示
• 问题反馈