Sunlight UI

主题

Sunlight-creator2026-02-02
767
3m

生态系统 ​

Sunlight UI 提供了丰富的生态系统，包括组件库、示例代码和设计资源，帮助个人爱好者快速构建现代化的应用项目。

组件库 ​

Sunlight UI 组件库基于 Vue3、TypeScript 和 Element-Plus 封装，提供了一系列高质量、易用的组件，满足个人项目的各种需求。

组件分类 ​

  • 基础输入组件：输入框、选择器、文本域、级联选择器等
  • 选择组件：复选框、单选框、日期选择器等
  • 容器组件：对话框、抽屉、卡片等
  • 数据展示组件：表格、图片、进度条等
  • 图表组件：柱状图、折线图、雷达图等
  • 高级组件：表单、三级联动等

组件特性 ​

  • ✅ 基于最新的 Vue3 Composition API
  • ✅ 完整的 TypeScript 类型定义
  • ✅ 丰富的配置选项
  • ✅ 良好的用户体验
  • ✅ 高度可定制的样式
  • ✅ 完善的文档和示例

示例代码 ​

Sunlight UI 提供了丰富的示例代码，涵盖了各种组件的使用场景和最佳实践，帮助个人爱好者快速上手和理解组件的使用方法。

示例分类 ​

  • 基础用法：组件的基本使用方法和配置
  • 自定义样式：如何自定义组件的样式和外观
  • 事件处理：组件的事件监听和处理方法
  • 高级功能：组件的高级特性和使用技巧

示例特点 ​

  • 📝 详细的代码注释
  • 🎨 美观的演示效果
  • 📖 清晰的使用说明
  • 🔧 可直接复制使用的代码片段

设计资源 ​

Sunlight UI 提供了完整的设计资源，包括颜色面板、组件设计规范等，帮助个人爱好者保持设计的一致性。

设计规范 ​

  • 颜色系统：统一的颜色面板和使用规范
  • 组件设计：详细的组件设计指南和规范
  • 布局系统：灵活的布局方案和最佳实践
  • 图标系统：统一的图标库和使用方法

设计工具 ​

  • 🎨 颜色选择器
  • 📐 组件设计工具
  • 🖼️ 图标库
  • 📱 响应式设计工具

快速开始 ​

安装 ​

bash
# 使用 npm
npm install sunlight-ui

# 使用 yarn
yarn add sunlight-ui

# 使用 pnpm
pnpm add sunlight-ui

引入 ​

js
// 全局引入
import { createApp } from 'vue'
import SunlightUI from 'sunlight-ui'
import 'sunlight-ui/dist/style.css'

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

// 按需引入
import { SunlightInput, SunlightSelect } from 'sunlight-ui'
import 'sunlight-ui/dist/style.css'

const app = createApp(App)
app.component('SunlightInput', SunlightInput)
app.component('SunlightSelect', SunlightSelect)
app.mount('#app')

开始使用 ​

vue
<template>
  <div>
    <h2>Sunlight UI 示例</h2>
    <SunlightInput 
      v-model="inputValue" 
      :item="{
        placeholder: '请输入内容...',
        clearable: true,
        prefixIcon: 'User'
      }" 
    />
    <SunlightSelect 
      v-model="selectValue" 
      :item="{
        placeholder: '请选择...',
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' }
        ]
      }" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SunlightInput, SunlightSelect } from 'sunlight-ui'

const inputValue = ref('')
const selectValue = ref('')
</script>

贡献指南 ​

Sunlight UI 欢迎个人爱好者的贡献，包括但不限于：

  • 🐛 提交 bug 报告
  • 💡 提出新功能建议
  • 📝 改进文档
  • 🔧 修复代码问题
  • 🎨 优化 UI 设计

许可证 ​

Sunlight UI 使用 MIT 许可证，详见 LICENSE 文件。