diff --git a/README.md b/README.md index f74c0c2..42d2958 100644 --- a/README.md +++ b/README.md @@ -1,188 +1,188 @@ -# 🎨 repoUI 组件样式库 +# 🎨 repoUI Component Style Library -> 一个**纯 CSS** 的现代化 Web UI 组件样式库，无需任何 JavaScript 依赖，即插即用。 +> A **pure CSS** modern web UI component library. Zero dependencies, plug-and-play, with light/dark theme support. -**repoUI** 是一个轻量、美观、可主题化的前端组件样式库。它基于 **CSS 变量（设计令牌）** 构建，支持**浅色 / 深色主题**一键切换，内置完整的图标字体、布局系统与数十种常用 UI 组件。所有样式均为原生 CSS，无框架依赖，可直接引入任意 HTML 项目使用。 +**repoUI** is a lightweight, elegant, themeable front-end component style library. Built on **CSS variables (design tokens)**, it supports **light / dark themes** with one click, includes a complete icon font set, layout system, and dozens of common UI components. All styles are native CSS with no framework dependency — just drop it into any HTML project. --- -## ✨ 特性 +## ✨ Features -| 特性 | 说明 | -|------|------| -| 🎨 **设计令牌** | 完整 CSS 变量体系（颜色/字体/间距/圆角/阴影/层级） | -| 🌗 **深浅主题** | 通过 `data-theme="dark"` 一键切换深色模式 | -| 🔠 **图标字体** | 内置数百个常见图标，覆盖开发/协作/代码管理等场景 | -| 📦 **纯 CSS 零依赖** | 无需 JavaScript 框架，直接引入即可用 | -| ♻️ **即插即用** | 单一 CSS 文件，`` 引入即生效 | -| 🧩 **组件丰富** | 内置 20+ 常用 UI 组件 | +| Feature | Description | +|---------|-------------| +| 🎨 **Design Tokens** | Complete CSS variable system (colors/fonts/spacing/radius/shadow/z-index) | +| 🌗 **Light/Dark Themes** | Switch to dark mode with `data-theme="dark"` | +| 🔠 **Icon Fonts** | Built-in hundreds of common icons covering dev/collab/code scenarios | +| 📦 **Pure CSS, Zero Dependencies** | No JavaScript framework required | +| ♻️ **Plug-and-Play** | Single CSS file — just `` it in | +| 🧩 **Rich Components** | 20+ common UI components built in | --- -## 🚀 快速开始 +## 🚀 Quick Start -### 引入 +### Include ```html - + ``` -### 简单示例 +### Simple Example ```html - - - - + + + + - +
-

标题

-
卡片内容
+

Title

+
Card content
- -成功 -警告 -错误 + +Success +Warning +Error - +
-
概览
-
代码
-
历史
+
Overview
+
Code
+
History
``` -### 深色主题 +### Dark Theme ```html - + ``` --- -## 🧩 组件清单 +## 🧩 Component List -### 布局与导航 -- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — 页面布局 -- `.repo-row` / `.repo-col` — 栅格系统 -- `.repo-container` / `.repo-container--fluid` — 容器 -- `.repo-tabs` — 标签页 -- `.repo-breadcrumb` — 面包屑导航 +### Layout & Navigation +- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — Page layout +- `.repo-row` / `.repo-col` — Grid system +- `.repo-container` / `.repo-container--fluid` — Container +- `.repo-tabs` — Tabs +- `.repo-breadcrumb` — Breadcrumb navigation -### 基础组件 -- `.repo-btn`（+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`）— 按钮 -- `.repo-input` / `.repo-textarea` / `.repo-input-group` — 输入框 -- `.repo-select` — 选择器（下拉） -- `.repo-checkbox` / `.repo-radio` — 复选框 / 单选框 +### Basic Components +- `.repo-btn` (+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`) — Buttons +- `.repo-input` / `.repo-textarea` / `.repo-input-group` — Input fields +- `.repo-select` — Select dropdown +- `.repo-checkbox` / `.repo-radio` — Checkbox / Radio -### 数据展示 -- `.repo-tag`（+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`）— 标签 -- `.repo-badge`（+ `--primary` `--success` `--danger` `--warning` `--dot`）— 徽章 -- `.repo-avatar`（+ `--xs` `--sm` `--md` `--lg` `--xl`）— 头像 -- `.repo-card` — 卡片 -- `.repo-table`（+ `--border`）— 表格 -- `.repo-pagination` — 分页 -- `.repo-file-tree` — 文件树 -- `.repo-diff` — 代码差异对比 +### Data Display +- `.repo-tag` (+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`) — Tags +- `.repo-badge` (+ `--primary` `--success` `--danger` `--warning` `--dot`) — Badges +- `.repo-avatar` (+ `--xs` `--sm` `--md` `--lg` `--xl`) — Avatars +- `.repo-card` — Card +- `.repo-table` (+ `--border`) — Table +- `.repo-pagination` — Pagination +- `.repo-file-tree` — File tree +- `.repo-diff` — Code diff -### 反馈与浮层 -- `.repo-tooltip`（+ `--top` `--bottom` `--left` `--right`）— 提示框 -- `.repo-modal`（+ `--open`）— 模态框 -- `.repo-drawer`（+ `--left`）— 抽屉 -- `.repo-message`（+ `--success` `--error` `--warning` `--info`）— 消息通知 -- `.repo-dropdown`（+ `--open`）— 下拉菜单 +### Feedback & Overlay +- `.repo-tooltip` (+ `--top` `--bottom` `--left` `--right`) — Tooltip +- `.repo-modal` (+ `--open`) — Modal +- `.repo-drawer` (+ `--left`) — Drawer +- `.repo-message` (+ `--success` `--error` `--warning` `--info`) — Message notification +- `.repo-dropdown` (+ `--open`) — Dropdown menu -### 加载与状态 -- `.repo-spinner`（+ `--sm` `--lg`）— 加载动画 -- `.repo-skeleton`（+ `--text` `--circle` `--button`）— 骨架屏 -- `.repo-progress` — 进度条 +### Loading & Status +- `.repo-spinner` (+ `--sm` `--lg`) — Loading spinner +- `.repo-skeleton` (+ `--text` `--circle` `--button`) — Skeleton screen +- `.repo-progress` — Progress bar -### 代码相关 -- `.repo-code-block` — 代码块（含复制按钮、语言标识） -- `.repo-inline-code` — 行内代码 +### Code +- `.repo-code-block` — Code block (with copy button, language label) +- `.repo-inline-code` — Inline code --- -## 🎨 设计令牌（CSS 变量） +## 🎨 Design Tokens (CSS Variables) -repoUI 的所有样式均由 CSS 变量驱动，你可以非常方便地定制主题： +All repoUI styles are driven by CSS variables, making them easy to customize: ```css :root { - --repo-color-primary: #3b82f6; /* 主色 */ - --repo-color-danger: #ef4444; /* 危险色 */ - --repo-color-success: #10b981; /* 成功色 */ - --repo-color-warning: #f59e0b; /* 警告色 */ + --repo-color-primary: #3b82f6; /* Primary color */ + --repo-color-danger: #ef4444; /* Danger color */ + --repo-color-success: #10b981; /* Success color */ + --repo-color-warning: #f59e0b; /* Warning color */ --repo-font-family: -apple-system, "Segoe UI", sans-serif; - --repo-radius-md: 6px; /* 圆角 */ - --repo-spacing-4: 16px; /* 间距 */ - /* ...更多变量见 repoUI.css */ + --repo-radius-md: 6px; /* Radius */ + --repo-spacing-4: 16px; /* Spacing */ + /* ...more variables in repoUI.css */ } ``` -变量分组： -- **颜色**：`--repo-color-*`（primary/danger/success/warning/text/bg/border/link/icon） -- **字体**：`--repo-font-*`（family/size/line-height） -- **间距**：`--repo-spacing-*`（1~12） -- **圆角**：`--repo-radius-*`（sm/md/lg/xl/full） -- **阴影**：`--repo-shadow-*`（xs~xl） -- **层级**：`--repo-z-*`（dropdown/sticky/fixed/modal/popover/tooltip） -- **布局**：`--repo-header-height` / `--repo-sidebar-width` +Token groups: +- **Colors**: `--repo-color-*` (primary/danger/success/warning/text/bg/border/link/icon) +- **Fonts**: `--repo-font-*` (family/size/line-height) +- **Spacing**: `--repo-spacing-*` (1~12) +- **Radius**: `--repo-radius-*` (sm/md/lg/xl/full) +- **Shadows**: `--repo-shadow-*` (xs~xl) +- **Z-index**: `--repo-z-*` (dropdown/sticky/fixed/modal/popover/tooltip) +- **Layout**: `--repo-header-height` / `--repo-sidebar-width` --- -## 🔠 图标使用 +## 🔠 Using Icons -repoUI 内置图标字体，使用方式： +repoUI includes a built-in icon font: ```html - + - + - + ``` -> 图标类名格式：`icon-*` +> Icon class format: `icon-*` --- -## 📁 项目结构 +## 📁 Project Structure ``` -repoUI组件样式库/ -├── repoUI.css # 完整样式库（单文件，约 60KB） -├── fonts/ # 图标字体文件 +repoUI/ +├── repoUI.css # Complete style library (single file, ~60KB) +├── fonts/ # Icon font files │ ├── repo-icons.eot │ ├── repo-icons.ttf │ └── repo-icons.woff -└── README.md # 本文档 +└── README.md # This document ``` --- -## 📄 许可证 +## 📄 License -本项目采用 **MIT License** 开源协议，详见 [LICENSE](LICENSE)。你可以自由使用、修改和分发，但请保留版权声明。 +This project is licensed under the **MIT License**. See [LICENSE](LICENSE) for details. You are free to use, modify, and distribute it, as long as you retain the copyright notice. --- -## 🙏 致谢 +## 🙏 Thanks -感谢使用 repoUI 组件样式库！如果你觉得好用，欢迎 star ⭐ 或在项目中分享它。 +Thanks for using repoUI Component Style Library! If you find it useful, feel free to give it a ⭐ or share it in your projects.