isom-crystal-ui

v1.0.6

Published

5 months ago

Crystal UI - 紫色科幻3D主题组件库

0High
0Medium
0Low

dzycd

ui components crystal sci-fi purple 3d glass theme

Crystal UI

🔮 紫色科幻3D主题组件库

安装

NPM

npm install crystal-ui

CDN

<link rel="stylesheet" href="https://unpkg.com/crystal-ui/dist/crystal-ui.min.css">
<script src="https://unpkg.com/crystal-ui/dist/crystal-ui.umd.min.js"></script>

快速开始

基础使用

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="crystal-ui/dist/crystal-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="crystal-theme">
    <div class="crystal-card">
        <div class="crystal-card-title">标题</div>
        <div class="crystal-card-content">内容</div>
    </div>
    
    <script src="crystal-ui/dist/crystal-ui.umd.min.js"></script>
    <script>
        CrystalUI.init();
    </script>
</body>
</html>

ES Module

import CrystalUI, { CrystalBG } from 'crystal-ui';
import 'crystal-ui/dist/crystal-ui.min.css';

CrystalUI.init();
CrystalBG.init('stars');

组件

卡片

<div class="crystal-card">
    <div class="crystal-card-title">标题</div>
    <div class="crystal-card-content">内容</div>
    <div class="crystal-card-footer">
        <button class="crystal-btn">取消</button>
        <button class="crystal-btn crystal-btn-primary">确定</button>
    </div>
</div>

<!-- 带动画效果 -->
<div class="crystal-card card-glow">发光卡片</div>
<div class="crystal-card card-float">悬浮卡片</div>

按钮

<button class="crystal-btn">默认按钮</button>
<button class="crystal-btn crystal-btn-primary">主要按钮</button>

弹窗提示

CrystalUI.info('这是一条信息');
CrystalUI.success('操作成功');
CrystalUI.error('操作失败');
CrystalUI.warning('警告信息');
CrystalUI.confirm('确定要删除吗？', '确认', () => {
    console.log('已确认');
});

加载动画

CrystalUI.showLoader('加载中...');
// 完成后
CrystalUI.hideLoader();

导航栏

<nav class="crystal-navbar">
    <a class="crystal-navbar-brand" href="#">Logo</a>
    <div class="crystal-navbar-menu">
        <a class="crystal-navbar-item active" href="#">首页</a>
        <a class="crystal-navbar-item" href="#">关于</a>
    </div>
</nav>

侧边栏

<nav class="crystal-sidebar auto-hide" id="sidebar">
    <div class="crystal-sidebar-title">导航</div>
    <ul class="crystal-sidebar-nav">
        <li class="crystal-sidebar-item active">
            <a href="#"><i class="fas fa-home"></i><span>首页</span></a>
        </li>
        <li class="crystal-sidebar-item">
            <a href="#"><i class="fas fa-cog"></i><span>设置</span></a>
        </li>
    </ul>
</nav>

<script>
CrystalUI.initSidebarAutoHide('#sidebar', {
    idleDelay: 3000,
    position: 'left'
});
</script>

文字特效

<span class="crystal-gradient-text">渐变流动文字</span>
<span class="crystal-glow-text">发光文字</span>
<span class="crystal-pulse-text">脉冲文字</span>
<span class="crystal-highlight-text">高亮文字</span>

动画类

<div class="crystal-fade-in">淡入</div>
<div class="crystal-slide-in-up">上滑入</div>
<div class="crystal-zoom-in">缩放入</div>
<div class="crystal-pulse">脉冲</div>
<div class="crystal-shake">抖动</div>

流动特效

<div class="crystal-flow">流动光效</div>
<div class="crystal-border-flow">边框流动</div>
<div class="crystal-highlight">悬停高亮</div>

表单元素

<!-- 输入框 -->
<input type="text" class="crystal-input" placeholder="输入框">
<input type="text" class="crystal-input small" placeholder="小尺寸">
<input type="text" class="crystal-input large" placeholder="大尺寸">

<!-- 带图标输入框 -->
<div class="crystal-input-group">
    <i class="fas fa-search crystal-input-icon"></i>
    <input type="text" class="crystal-input" placeholder="搜索...">
</div>

<!-- 文本域 -->
<textarea class="crystal-textarea" placeholder="多行文本"></textarea>

<!-- 下拉选择 -->
<select class="crystal-select">
    <option>选项一</option>
    <option>选项二</option>
</select>

<!-- 复选框 -->
<label class="crystal-checkbox">
    <input type="checkbox">
    <span class="crystal-checkbox-box"></span>
    <span class="crystal-checkbox-label">复选框</span>
</label>

<!-- 单选框 -->
<label class="crystal-radio">
    <input type="radio" name="group">
    <span class="crystal-radio-circle"></span>
    <span class="crystal-radio-label">单选框</span>
</label>

<!-- 开关 -->
<label class="crystal-switch">
    <input type="checkbox">
    <span class="crystal-switch-track">
        <span class="crystal-switch-thumb"></span>
    </span>
    <span class="crystal-switch-label">开关</span>
</label>

<!-- 滑块 -->
<input type="range" class="crystal-range" min="0" max="100">

列表与徽章

<!-- 列表 -->
<ul class="crystal-list">
    <li class="crystal-list-item">
        <span class="crystal-list-item-icon"><i class="fas fa-file"></i></span>
        <span class="crystal-list-item-content">
            <div class="crystal-list-item-title">标题</div>
            <div class="crystal-list-item-desc">描述</div>
        </span>
    </li>
</ul>

<!-- 徽章 -->
<span class="crystal-badge">默认</span>
<span class="crystal-badge primary">主要</span>
<span class="crystal-badge success">成功</span>
<span class="crystal-badge warning">警告</span>
<span class="crystal-badge error">错误</span>

<!-- 进度条 -->
<div class="crystal-progress">
    <div class="crystal-progress-bar" style="width: 60%;"></div>
</div>

<!-- 带动画进度条 -->
<div class="crystal-progress">
    <div class="crystal-progress-bar animated" style="width: 60%;"></div>
</div>

背景系统

// 初始化预设背景
CrystalBG.init('crystal');   // 星空水晶
CrystalBG.init('lake');      // 湖面蜡烛
CrystalBG.init('fusion');    // 星湖融合

// 切换背景
CrystalBG.switch('lake');

// 销毁
CrystalBG.destroy();

图片背景

// 基础用法
CrystalBG.setImage('path/to/image.jpg');

// 完整配置
CrystalBG.init('image', {
    src: 'path/to/image.jpg',    // 图片URL (必需)
    position: 'center',           // 背景位置
    size: 'cover',                // 背景尺寸
    fixed: true,                  // 固定背景
    blur: 0,                      // 模糊程度(px)
    brightness: 1,                // 亮度(0-2)
    opacity: 1,                   // 透明度(0-1)
    overlay: 'rgba(0,0,0,0.5)',   // 叠加层颜色
    overlayGradient: 'linear-gradient(to bottom, transparent, rgba(0,0,0,0.8))',
    parallax: true,               // 滚动视差
    parallaxIntensity: 0.05,      // 视差强度
    mouseParallax: true,          // 鼠标视差
    mouseIntensity: 0.02,         // 鼠标视差强度
    stars: true,                  // 叠加星星效果
    starsCount: 50,               // 星星数量
    vignette: true,               // 暗角效果
    blend: 'normal'               // 混合模式
});

// 或直接传入配置对象
CrystalBG.init({
    src: 'path/to/image.jpg',
    blur: 2,
    overlay: 'rgba(156, 77, 255, 0.3)',
    parallax: true
});

// 动态更新图片背景
CrystalBG.updateImage({
    src: 'new-image.jpg',
    blur: 5,
    brightness: 0.8
});

主题

内置多种主题色：

<!-- 默认紫色 -->
<link rel="stylesheet" href="crystal-ui/dist/crystal-ui.min.css">

<!-- 蓝色主题 -->
<link rel="stylesheet" href="crystal-ui/dist/themes/crystal-blue.css">

<!-- 绿色主题 -->
<link rel="stylesheet" href="crystal-ui/dist/themes/crystal-green.css">

<!-- 金色主题 -->
<link rel="stylesheet" href="crystal-ui/dist/themes/crystal-golden.css">

CSS 变量

可通过 CSS 变量自定义主题：

:root {
    --crystal-primary: #9c4dff;      /* 主色 */
    --crystal-secondary: #e0b0ff;    /* 次色 */
    --crystal-bg-dark: #0a0a20;      /* 深色背景 */
    --crystal-bg-light: #1a1a40;     /* 浅色背景 */
    --crystal-glass: rgba(0, 0, 0, 0.5);  /* 玻璃效果 */
    --crystal-border: rgba(255, 255, 255, 0.3);  /* 边框 */
    --crystal-glow: rgba(138, 43, 226, 0.7);     /* 发光 */
}

API

CrystalUI

| 方法 | 说明 | |------|------| | init() | 初始化组件库 | | toast(msg, title, type) | 显示提示 | | info(msg, title) | 信息提示 | | success(msg, title) | 成功提示 | | error(msg, title) | 错误提示 | | warning(msg, title) | 警告提示 | | confirm(msg, title, onConfirm, onCancel) | 确认框 | | showLoader(text) | 显示加载 | | hideLoader() | 隐藏加载 | | initSidebarAutoHide(el, options) | 侧边栏自动隐藏 |

CrystalBG

| 方法 | 说明 | |------|------| | init(type) | 初始化背景 | | setType(type) | 切换背景类型 | | destroy() | 销毁背景 |

移动端适配

Crystal UI 内置完整的移动端响应式支持：

自动适配

组件库会自动检测设备类型并应用相应样式：

平板设备 (768px - 1024px)
手机设备 (< 768px)
小屏手机 (< 480px)

触摸优化

触摸设备自动禁用鼠标悬停效果，改用点击反馈
增大可点击区域 (最小 44px)
支持左滑/右滑手势控制侧边栏

移动端 API

// 检测设备类型
CrystalUI.mobile.detect();
// 返回: { isMobile: boolean, isTouch: boolean }

// 切换侧边栏
CrystalUI.mobile.toggleSidebar();

// 关闭侧边栏
CrystalUI.mobile.closeSidebar();

移动端菜单按钮

在移动端会自动显示一个浮动菜单按钮，点击可切换侧边栏。

安全区域

支持 iPhone X 及以上设备的刘海屏安全区域适配。

减少动画

尊重用户的 prefers-reduced-motion 系统设置，自动减少动画效果。

浏览器支持

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+
iOS Safari 13+
Android Chrome 80+

License

MIT