docs: rewrite README in English
This commit is contained in:
@@ -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
|
||||||
|
|
||||||
| 特性 | 说明 |
|
| Feature | Description |
|
||||||
|------|------|
|
|---------|-------------|
|
||||||
| 🎨 **设计令牌** | 完整 CSS 变量体系（颜色/字体/间距/圆角/阴影/层级） |
|
| 🎨 **Design Tokens** | Complete CSS variable system (colors/fonts/spacing/radius/shadow/z-index) |
|
||||||
| 🌗 **深浅主题** | 通过 `data-theme="dark"` 一键切换深色模式 |
|
| 🌗 **Light/Dark Themes** | Switch to dark mode with `data-theme="dark"` |
|
||||||
| 🔠 **图标字体** | 内置数百个常见图标，覆盖开发/协作/代码管理等场景 |
|
| 🔠 **Icon Fonts** | Built-in hundreds of common icons covering dev/collab/code scenarios |
|
||||||
| 📦 **纯 CSS 零依赖** | 无需 JavaScript 框架，直接引入即可用 |
|
| 📦 **Pure CSS, Zero Dependencies** | No JavaScript framework required |
|
||||||
| ♻️ **即插即用** | 单一 CSS 文件，`<link>` 引入即生效 |
|
| ♻️ **Plug-and-Play** | Single CSS file — just `<link>` it in |
|
||||||
| 🧩 **组件丰富** | 内置 20+ 常用 UI 组件 |
|
| 🧩 **Rich Components** | 20+ common UI components built in |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🚀 快速开始
|
## 🚀 Quick Start
|
||||||
|
|
||||||
### 引入
|
### Include
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 在 head 中引入 -->
|
<!-- Add to <head> -->
|
||||||
<link rel="stylesheet" href="repoUI.css">
|
<link rel="stylesheet" href="repoUI.css">
|
||||||
```
|
```
|
||||||
|
|
||||||
### 简单示例
|
### Simple Example
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 按钮 -->
|
<!-- Buttons -->
|
||||||
<button class="repo-btn repo-btn--primary">主按钮</button>
|
<button class="repo-btn repo-btn--primary">Primary</button>
|
||||||
<button class="repo-btn repo-btn--secondary">次按钮</button>
|
<button class="repo-btn repo-btn--secondary">Secondary</button>
|
||||||
<button class="repo-btn repo-btn--danger">危险按钮</button>
|
<button class="repo-btn repo-btn--danger">Danger</button>
|
||||||
|
|
||||||
<!-- 卡片 -->
|
<!-- Card -->
|
||||||
<div class="repo-card">
|
<div class="repo-card">
|
||||||
<div class="repo-card__header"><h3 class="repo-card__title">标题</h3></div>
|
<div class="repo-card__header"><h3 class="repo-card__title">Title</h3></div>
|
||||||
<div class="repo-card__body">卡片内容</div>
|
<div class="repo-card__body">Card content</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 标签 -->
|
<!-- Tags -->
|
||||||
<span class="repo-tag repo-tag--success">成功</span>
|
<span class="repo-tag repo-tag--success">Success</span>
|
||||||
<span class="repo-tag repo-tag--warning">警告</span>
|
<span class="repo-tag repo-tag--warning">Warning</span>
|
||||||
<span class="repo-tag repo-tag--danger">错误</span>
|
<span class="repo-tag repo-tag--danger">Error</span>
|
||||||
|
|
||||||
<!-- 标签页 -->
|
<!-- Tabs -->
|
||||||
<div class="repo-tabs">
|
<div class="repo-tabs">
|
||||||
<div class="repo-tabs__item repo-tabs__item--active">概览</div>
|
<div class="repo-tabs__item repo-tabs__item--active">Overview</div>
|
||||||
<div class="repo-tabs__item">代码</div>
|
<div class="repo-tabs__item">Code</div>
|
||||||
<div class="repo-tabs__item">历史</div>
|
<div class="repo-tabs__item">History</div>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 深色主题
|
### Dark Theme
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 在根元素上设置 data-theme 即可切换为深色 -->
|
<!-- Set data-theme on the root element to switch to dark mode -->
|
||||||
<html data-theme="dark">
|
<html data-theme="dark">
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🧩 组件清单
|
## 🧩 Component List
|
||||||
|
|
||||||
### 布局与导航
|
### Layout & Navigation
|
||||||
- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — 页面布局
|
- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — Page layout
|
||||||
- `.repo-row` / `.repo-col` — 栅格系统
|
- `.repo-row` / `.repo-col` — Grid system
|
||||||
- `.repo-container` / `.repo-container--fluid` — 容器
|
- `.repo-container` / `.repo-container--fluid` — Container
|
||||||
- `.repo-tabs` — 标签页
|
- `.repo-tabs` — Tabs
|
||||||
- `.repo-breadcrumb` — 面包屑导航
|
- `.repo-breadcrumb` — Breadcrumb navigation
|
||||||
|
|
||||||
### 基础组件
|
### Basic Components
|
||||||
- `.repo-btn`（+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`）— 按钮
|
- `.repo-btn` (+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`) — Buttons
|
||||||
- `.repo-input` / `.repo-textarea` / `.repo-input-group` — 输入框
|
- `.repo-input` / `.repo-textarea` / `.repo-input-group` — Input fields
|
||||||
- `.repo-select` — 选择器（下拉）
|
- `.repo-select` — Select dropdown
|
||||||
- `.repo-checkbox` / `.repo-radio` — 复选框 / 单选框
|
- `.repo-checkbox` / `.repo-radio` — Checkbox / Radio
|
||||||
|
|
||||||
### 数据展示
|
### Data Display
|
||||||
- `.repo-tag`（+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`）— 标签
|
- `.repo-tag` (+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`) — Tags
|
||||||
- `.repo-badge`（+ `--primary` `--success` `--danger` `--warning` `--dot`）— 徽章
|
- `.repo-badge` (+ `--primary` `--success` `--danger` `--warning` `--dot`) — Badges
|
||||||
- `.repo-avatar`（+ `--xs` `--sm` `--md` `--lg` `--xl`）— 头像
|
- `.repo-avatar` (+ `--xs` `--sm` `--md` `--lg` `--xl`) — Avatars
|
||||||
- `.repo-card` — 卡片
|
- `.repo-card` — Card
|
||||||
- `.repo-table`（+ `--border`）— 表格
|
- `.repo-table` (+ `--border`) — Table
|
||||||
- `.repo-pagination` — 分页
|
- `.repo-pagination` — Pagination
|
||||||
- `.repo-file-tree` — 文件树
|
- `.repo-file-tree` — File tree
|
||||||
- `.repo-diff` — 代码差异对比
|
- `.repo-diff` — Code diff
|
||||||
|
|
||||||
### 反馈与浮层
|
### Feedback & Overlay
|
||||||
- `.repo-tooltip`（+ `--top` `--bottom` `--left` `--right`）— 提示框
|
- `.repo-tooltip` (+ `--top` `--bottom` `--left` `--right`) — Tooltip
|
||||||
- `.repo-modal`（+ `--open`）— 模态框
|
- `.repo-modal` (+ `--open`) — Modal
|
||||||
- `.repo-drawer`（+ `--left`）— 抽屉
|
- `.repo-drawer` (+ `--left`) — Drawer
|
||||||
- `.repo-message`（+ `--success` `--error` `--warning` `--info`）— 消息通知
|
- `.repo-message` (+ `--success` `--error` `--warning` `--info`) — Message notification
|
||||||
- `.repo-dropdown`（+ `--open`）— 下拉菜单
|
- `.repo-dropdown` (+ `--open`) — Dropdown menu
|
||||||
|
|
||||||
### 加载与状态
|
### Loading & Status
|
||||||
- `.repo-spinner`（+ `--sm` `--lg`）— 加载动画
|
- `.repo-spinner` (+ `--sm` `--lg`) — Loading spinner
|
||||||
- `.repo-skeleton`（+ `--text` `--circle` `--button`）— 骨架屏
|
- `.repo-skeleton` (+ `--text` `--circle` `--button`) — Skeleton screen
|
||||||
- `.repo-progress` — 进度条
|
- `.repo-progress` — Progress bar
|
||||||
|
|
||||||
### 代码相关
|
### Code
|
||||||
- `.repo-code-block` — 代码块（含复制按钮、语言标识）
|
- `.repo-code-block` — Code block (with copy button, language label)
|
||||||
- `.repo-inline-code` — 行内代码
|
- `.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
|
```css
|
||||||
:root {
|
:root {
|
||||||
--repo-color-primary: #3b82f6; /* 主色 */
|
--repo-color-primary: #3b82f6; /* Primary color */
|
||||||
--repo-color-danger: #ef4444; /* 危险色 */
|
--repo-color-danger: #ef4444; /* Danger color */
|
||||||
--repo-color-success: #10b981; /* 成功色 */
|
--repo-color-success: #10b981; /* Success color */
|
||||||
--repo-color-warning: #f59e0b; /* 警告色 */
|
--repo-color-warning: #f59e0b; /* Warning color */
|
||||||
--repo-font-family: -apple-system, "Segoe UI", sans-serif;
|
--repo-font-family: -apple-system, "Segoe UI", sans-serif;
|
||||||
--repo-radius-md: 6px; /* 圆角 */
|
--repo-radius-md: 6px; /* Radius */
|
||||||
--repo-spacing-4: 16px; /* 间距 */
|
--repo-spacing-4: 16px; /* Spacing */
|
||||||
/* ...更多变量见 repoUI.css */
|
/* ...more variables in repoUI.css */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
变量分组：
|
Token groups:
|
||||||
- **颜色**：`--repo-color-*`（primary/danger/success/warning/text/bg/border/link/icon）
|
- **Colors**: `--repo-color-*` (primary/danger/success/warning/text/bg/border/link/icon)
|
||||||
- **字体**：`--repo-font-*`（family/size/line-height）
|
- **Fonts**: `--repo-font-*` (family/size/line-height)
|
||||||
- **间距**：`--repo-spacing-*`（1~12）
|
- **Spacing**: `--repo-spacing-*` (1~12)
|
||||||
- **圆角**：`--repo-radius-*`（sm/md/lg/xl/full）
|
- **Radius**: `--repo-radius-*` (sm/md/lg/xl/full)
|
||||||
- **阴影**：`--repo-shadow-*`（xs~xl）
|
- **Shadows**: `--repo-shadow-*` (xs~xl)
|
||||||
- **层级**：`--repo-z-*`（dropdown/sticky/fixed/modal/popover/tooltip）
|
- **Z-index**: `--repo-z-*` (dropdown/sticky/fixed/modal/popover/tooltip)
|
||||||
- **布局**：`--repo-header-height` / `--repo-sidebar-width`
|
- **Layout**: `--repo-header-height` / `--repo-sidebar-width`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🔠 图标使用
|
## 🔠 Using Icons
|
||||||
|
|
||||||
repoUI 内置图标字体，使用方式：
|
repoUI includes a built-in icon font:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 基础操作图标 -->
|
<!-- Basic operation icons -->
|
||||||
<span class="icon-download"></span>
|
<span class="icon-download"></span>
|
||||||
<span class="icon-copy"></span>
|
<span class="icon-copy"></span>
|
||||||
<span class="icon-edit"></span>
|
<span class="icon-edit"></span>
|
||||||
<span class="icon-delete"></span>
|
<span class="icon-delete"></span>
|
||||||
|
|
||||||
<!-- 状态图标 -->
|
<!-- Status icons -->
|
||||||
<span class="icon-success"></span>
|
<span class="icon-success"></span>
|
||||||
<span class="icon-error"></span>
|
<span class="icon-error"></span>
|
||||||
<span class="icon-warning"></span>
|
<span class="icon-warning"></span>
|
||||||
<span class="icon-running"></span>
|
<span class="icon-running"></span>
|
||||||
|
|
||||||
<!-- GitHub 等常用图标（兼容映射） -->
|
<!-- GitHub & common icons (compatibility mapping) -->
|
||||||
<span class="icon-github"></span>
|
<span class="icon-github"></span>
|
||||||
<span class="icon-branch"></span>
|
<span class="icon-branch"></span>
|
||||||
<span class="icon-pull-request"></span>
|
<span class="icon-pull-request"></span>
|
||||||
<span class="icon-issue"></span>
|
<span class="icon-issue"></span>
|
||||||
```
|
```
|
||||||
|
|
||||||
> 图标类名格式：`icon-*`
|
> Icon class format: `icon-*`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📁 项目结构
|
## 📁 Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
repoUI组件样式库/
|
repoUI/
|
||||||
├── repoUI.css # 完整样式库（单文件，约 60KB）
|
├── repoUI.css # Complete style library (single file, ~60KB)
|
||||||
├── fonts/ # 图标字体文件
|
├── fonts/ # Icon font files
|
||||||
│ ├── repo-icons.eot
|
│ ├── repo-icons.eot
|
||||||
│ ├── repo-icons.ttf
|
│ ├── repo-icons.ttf
|
||||||
│ └── repo-icons.woff
|
│ └── 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.
|
||||||
|
|||||||
Reference in New Issue
Block a user