sunui-design

v0.0.39

Published

10 months ago

0High
0Medium
0Low

sunzhi

Sun UI Design

一個具有精美動畫效果和可自定義組件的現代 React UI 組件庫。使用 React、TailwindCSS 和 TypeScript 構建，完美適配任何 React 項目。

特點

🎨 現代化且精美的 UI 組件
📱 完全響應式設計
🌈 基於 TailwindCSS 構建
🎯 TypeScript 支持
⚡ 輕量且高性能
🔧 易於自定義
📦 支持 Tree-shaking 導出
🎁 提供獨立包或整體打包
🔌 適用於任何 React 項目（Next.js、Create React App、Vite 等）

組件

Sun UI Design 提供了一系列現代化且可自定義的組件。每個組件都可以作為獨立包使用。

可用組件

Card - 簡潔優雅的卡片組件
FileUpload - 支持拖放的現代文件上傳組件
FilterGrid - 用於顯示分類內容的網格組件
FloatingButton - 可展開選項的浮動按鈕組件
GradientBackground - 動畫漸變背景組件
SidePanel - 側邊面板組件
SocialButton - 社交媒體按鈕組件

安裝

整體包安裝

npm install @sunui-design/all
# 或
yarn add @sunui-design/all
# 或
pnpm add @sunui-design/all

獨立包安裝

# 核心樣式和工具
npm install @sunui-design/core

# 獨立組件
npm install @sunui-design/card
npm install @sunui-design/file-upload
npm install @sunui-design/filter
npm install @sunui-design/floating
npm install @sunui-design/gradient
npm install @sunui-design/side-panel
npm install @sunui-design/social

開發設置

開發環境設置

克隆項目：

git clone https://github.com/yourusername/sun-ui-design.git
cd sun-ui-design

安裝依賴：

npm install
# 或
npx lerna bootstrap

構建所有包：

npm run build:packages

啟動開發服務器：

npm run dev

啟動 Storybook：

npm run storybook

開發工作流程

創建新包：

cd packages
mkdir your-package-name
cd your-package-name
npm init

開發包：

npm run dev

構建包：

npm run build

打包：

npm run pack

發布包：

npm run publish

常用命令

npm run dev - 啟動開發服務器
npm run build - 構建項目
npm run build:packages - 構建所有包
npm run storybook - 啟動 Storybook
npm run build-storybook - 構建 Storybook
npm run pack:all - 打包所有包
npm run publish - 發布包
npm run clean - 清理構建文件
npm run lint - 運行代碼檢查

故障排除

如果遇到模塊未找到錯誤：

清理並重新安裝依賴：

npm run clean
npm install

重新構建包：

npm run build:packages

如果問題持續，檢查包版本：

npm ls @sunui-design/core
npm ls @sunui-design/social

基本用法

import '@sunui-design/core/styles/base.css';
import {
  Card,
  FileUpload,
  FilterGrid,
  FloatingButton,
  GradientBackground,
  SidePanel,
  SocialButton
} from '@sunui-design/all';

export default function App() {
  return (
    <div>
      <GradientBackground>
        <Card>
          <FilterGrid>
            {/* 您的內容 */}
          </FilterGrid>
        </Card>
        <FloatingButton />
        <SocialButton href="https://github.com" />
      </GradientBackground>
    </div>
  );
}

文檔

每個組件都附帶全面的文檔，包括示例和屬性說明。要查看文檔，請查看各個包的 README 或運行 Storybook 以查看實時示例：

npm run storybook
# 或
yarn storybook
# 或
pnpm storybook

貢獻

歡迎提交 Issue 和 Pull Request！提交 PR 前請閱讀我們的貢獻指南。

授權

MIT 授權

特此免費授予任何獲得本軟件副本和相關文檔文件（下稱"軟件"）的人不受限制地處理本軟件的權利，包括不受限制地使用、複製、修改、合併、發布、分發、再授權和/或出售本軟件副本，以及再授權被配發了本軟件的人如上的權利，須在下列條件下：

本軟件是"按原樣"提供的，不做任何明示或暗示的保證，包括但不限於對適銷性、特定用途適用性和非侵權性的保證。在任何情況下，作者或版權持有人都不對任何索賠、損害或其他責任負責，無論這些追責來自合同、侵權或其它行為中，還是產生於、源於或有關於本軟件以及本軟件的使用或其它處置。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme