@1ing/liquid-glass-ui
v1.0.3
Published
现代液态玻璃UI组件库 - 轻量级、无依赖、响应式
Maintainers
1ingReadme
Liquid Glass UI
现代液态玻璃UI组件库 - 轻量级、无依赖、响应式
✨ 特性
- 液态玻璃效果 - 半透明毛玻璃质感
- 多主题支持 - 深色/浅色主题自动适配
- 轻量级 - 纯CSS，无JS依赖，28KB gzipped
- 响应式 - 完美适配各种设备
- 易于使用 - 即插即用，零配置
🚀 快速开始
安装
npm install @1ing/liquid-glass-ui使用
<!-- CDN 引入 -->
<link rel="stylesheet" href="https://unpkg.com/@1ing/liquid-glass-ui@latest/liquid-glass-ui.min.css">
<!-- 主题控制 -->
<body class="lgui-light"> <!-- 浅色主题 -->
<body class="lgui-dark"> <!-- 深色主题 -->
<body class="lgui-auto"> <!-- 自动主题 -->组件示例
<!-- 按钮 -->
<button class="glass-button">按钮</button>
<button class="glass-button primary">主要按钮</button>
<!-- 输入框 -->
<input type="text" class="glass-input" placeholder="输入内容">
<textarea class="glass-textarea" placeholder="文本域"></textarea>
<!-- 卡片 -->
<div class="glass-card">
<h4>卡片标题</h4>
<p>卡片内容</p>
</div>
<!-- 表单控件 -->
<label class="glass-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
复选框
</label>
<!-- 导航 -->
<div class="glass-nav">
<a href="#" class="nav-item active">首页</a>
<a href="#" class="nav-item">关于</a>
</div>🎨 完整组件
基础: 按钮、输入框、文本域、卡片
表单: 选择器、复选框、单选框、开关、时间选择器
数据: 进度条、加载器、徽章、头像
导航: 标签页、导航栏、面包屑、分页
反馈: 模态框、通知、工具提示
📚 文档
完整文档：https://liquidglass.yinxh.fun/
🎯 浏览器支持
Chrome 88+ | Firefox 84+ | Safari 14+ | Edge 88+
📄 许可证
MIT License © 2024 Liquid Glass UI Team
⭐ 如果这个项目对您有帮助，请给我们一个 Star！