• Silicone Float UI

26.2.27更新日志

由于部分用户反应组件库看起来有些“AI味”，故这边决定去除大量的渐变色、阴影等内容 此外，这边还加入了“硬质拟真按钮”效果，欢迎体验 另祝，屏幕前的你事事顺心，项目顺利！

                               ———— 时钟塔易境

✨ 核心特性

• 独特视觉风格：主打软胶质感 + 3D 悬浮效果，统一的 Design Tokens（颜色、阴影、圆角、动效），兼顾美观与可读性
• 完整组件体系：覆盖表单、导航、数据展示、弹层、反馈、布局等 7 大类别，共 19 个开箱即用的组件（更新中）
• 工程化友好：全面支持 TypeScript，提供完整的类型定义，支持全量注册 / 按需引入两种使用方式
• 开发体验优化：组件内置高频实用特性（清空、校验态、加载态、快捷事件），减少冗余代码
• 完善的文档：100% 组件文档覆盖率，包含示例、API、插槽、事件全量说明，降低接入成本

📦 安装

支持 npm / yarn / pnpm 包管理器安装，推荐使用 pnpm：

# npm
npm install silicone-float-ui --save

# yarn
yarn add silicone-float-ui

# pnpm
pnpm add silicone-float-ui

🔨 快速上手

全量引入

在项目入口文件中完整引入组件库及样式：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库
import SiliconeUI from 'silicone-float-ui'
// 引入全局样式
import 'silicone-float-ui/style.css'

const app = createApp(App)
// 全局注册
app.use(SiliconeUI)
app.mount('#app')

按需引入

推荐使用按需引入减小项目体积，无需额外配置，直接导入所需组件：

<template>
  <SiliconeButton type="primary" @click="handleClick">按钮示例</SiliconeButton>
  <SiliconeInput v-model="value" placeholder="输入框示例" clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 按需导入组件
import { SiliconeButton, SiliconeInput, useSiliconeToast } from 'silicone-float-ui'
// 按需导入组件样式（如未开启自动导入）
// import 'silicone-float-ui/es/components/button/style.css'
// import 'silicone-float-ui/es/components/input/style.css'

const value = ref('')
const toast = useSiliconeToast()

const handleClick = () => {
  toast({ content: '按钮点击成功', type: 'success' })
}
</script>

📋 组件列表

| 分类 | 组件名 | 说明 | | -------- | ------------------------------------ | ---------------------- | | 基础组件 | SiliconeButton / Badge / Avatar | 按钮、徽标、头像 | | 基础组件 | SiliconeMetric / Card / Panel | 指标卡、卡片、面板容器 | | 表单组件 | SiliconeInput / Textarea | 单行输入框、多行文本域 | | 表单组件 | SiliconeDatePicker / Dropdown | 日期选择器、下拉选择器 | | 表单组件 | SiliconeToggle / Segmented | 开关、分段选择器 | | 数据展示 | SiliconeTable / Pagination | 表格、分页 | | 导航组件 | SiliconeTabs | 标签页 | | 弹层组件 | SiliconeModal / Tooltip | 对话框、文字提示 | | 反馈组件 | SiliconeToastHost + useSiliconeToast | 全局轻提示 |

🌍 浏览器兼容

| 浏览器 | 版本要求 | | -------------- | -------- | | Chrome | ≥ 87 | | Firefox | ≥ 78 | | Safari | ≥ 14 | | Edge | ≥ 88 | | 微信内置浏览器 | ≥ 8.0 |

🤝 贡献指南

欢迎提交 Issue / PR 参与贡献，贡献前请阅读：

1. 提交 Issue 请清晰描述问题 / 需求
2. 提交 PR 请确保代码通过类型检查、单元测试
3. 组件新增 / 修改需同步更新文档和示例

📄 许可证

本项目基于 MIT 许可证开源，详情请见 LICENSE 文件。

核心修改说明(26.2.25)

 第一个公开版本有啥可说的。其实这个东西还算是个半成品吧，毕竟很多东西（如复选框）还没弄完，但是作者真的没啥时间了，所以就先发布出来希望能For those who come after(为后来者扫除障碍)了。（当然，大概率是被AI爬走了哈哈哈哈哈哈，不过我并不在意）

 能看到这里，说明屏幕前的你对这个有兴趣，作者很感谢你！祝你项目顺利！

⚙️ 开发指南

写了一半，作者真的太累了，希望你能动动手指看下网站，网站里都有。