Liquid Sky UI

一个美观的Vue 3 UI组件库，包含液态效果和现代设计风格的组件集合。

安装

npm install liquid-sky
# 或
yarn add liquid-sky
# 或
pnpm add liquid-sky

使用方法

全局注册所有组件

import { createApp } from 'vue'
import App from './App.vue'
import LiquidSky from 'liquid-sky'
import 'liquid-sky/style' // 导入CSS样式

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

按需引入组件

<script setup>
import { MorphingButtons, ProgressiveBlur } from 'liquid-sky'
import 'liquid-sky/style' // 导入CSS样式
</script>

<template>
  <MorphingButtons :buttons="['按钮1', '按钮2', '按钮3']" />
  <ProgressiveBlur :image-url="imageUrl" />
</template>

组件列表

• AspectRatioToggle - 宽高比切换组件
• BalanceSlider - 平衡滑块
• BlurRevealNew - 模糊显示效果
• BorderBeamNew - 边框光束效果
• ColorPicker - 颜色选择器
• CreateButton - 创建按钮
• MorphingButtons - 变形按钮组
• ProgressiveBlur - 渐进模糊效果
• 以及更多...

开发

# 开发模式
npm run dev

# 构建应用
npm run build

# 构建npm包
npm run build:lib