PrimoUI 开发文档

🚀 快速开始

直接引入所需的模块文件即可使用 PrimoUI：

<!-- CSS 模块 -->
<link rel="stylesheet" href="css/modules/variables.css">
<link rel="stylesheet" href="css/modules/base.css">
<link rel="stylesheet" href="css/modules/layout.css">
<link rel="stylesheet" href="css/modules/forms.css">
<link rel="stylesheet" href="css/modules/navigation.css">
<link rel="stylesheet" href="css/modules/display.css">
<link rel="stylesheet" href="css/modules/feedback.css">

<!-- JS 模块 -->
<script src="js/modules/theme.js"></script>
<script src="js/modules/tabs.js"></script>
<script src="js/modules/modal.js"></script>
<script src="js/modules/toast.js"></script>
<script src="js/modules/progress.js"></script>

目录结构

primoUI/
├── css/
│   └── modules/      # CSS 模块
│       ├── variables.css
│       ├── base.css
│       ├── layout.css
│       ├── forms.css
│       ├── navigation.css
│       ├── display.css
│       ├── feedback.css
│       └── tabs-browser.css
├── js/
│   └── modules/      # JS 模块
│       ├── theme.js
│       ├── tabs.js
│       ├── modal.js
│       ├── toast.js
│       └── progress.js
├── index.html       # 演示页
└── docs.html        # 本文档

🎭 主题系统

主题分类表格

深色系

选择器	名称	主色
:root	默认浅色
.theme-dark	深色
.theme-darker	更深色
.theme-gray	灰色

红色系

选择器	名称	主色
.theme-red	红色
.theme-red-dark	红色深色
.theme-rose	玫瑰色

橙色系

选择器	名称	主色
.theme-orange	橙色
.theme-orange-dark	橙色深色

黄色系

选择器	名称	主色
.theme-yellow	黄色
.theme-yellow-dark	黄色深色

绿色系

选择器	名称	主色
.theme-green	绿色
.theme-green-dark	绿色深色
.theme-teal	青色绿

青色系

选择器	名称	主色
.theme-cyan	青色
.theme-cyan-dark	青色深色

蓝色系

选择器	名称	主色
.theme-blue	蓝色
.theme-blue-dark	蓝色深色
.theme-indigo	靛蓝

紫色系

选择器	名称	主色
.theme-purple	紫色
.theme-purple-dark	紫色深色
.theme-violet	紫罗兰

🎨 特殊主题

选择器	名称	特色
.theme-high-contrast	高对比度	黑白对比，提升可读性
.theme-eye-care	护眼	绿色柔和，保护眼睛
.theme-sunset	日落	暖色调，温暖舒适
.theme-ocean	海洋	蓝色系，清凉舒适
.theme-forest	森林	绿色系，自然清新
.theme-rainbow	彩虹	渐变背景，缤纷多彩

API 函数

函数	参数	说明
setTheme(theme)	theme: 主题名称	设置主题
resetTheme()	-	重置为默认主题

💡 原理说明

主题系统使用 CSS 自定义属性（CSS Variables）实现。通过给 <body> 元素添加不同的类名来切换变量值，实现主题切换。主题选择后会保存到 localStorage 中，刷新页面后自动加载。

主题按色阶从深色到浅色、从红色到紫色的顺序排列，每个色系包含浅色和深色版本，方便在不同场景下使用。

🔘 按钮

CSS 选择器

button 普通按钮

.btn 按钮类

.btn-group 按钮组容器

使用示例

<div class="btn-group">
        <button>普通按钮</button>
        <button class="btn">主要按钮</button>
        </div>

📝 表单组件

CSS 选择器

input 输入框

select 下拉框

textarea 文本域

.switch 开关容器

.slider 开关滑块

.slider-input 滑块输入框

.radio-item 单选框容器

.checkbox-item 复选框容器

.form-item 表单项容器

.form-label 表单标签

.rate 评分组件

使用示例

输入框：

开关：

<div class="form-item">
        <label class="form-label">输入框：</label>
        <input type="text" placeholder="请输入">
        </div>

        <div class="form-item">
        <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
        </label>
        </div>

📦 布局

CSS 选择器

.container 容器

.row 行容器

.col 列

.card 卡片

.panel 面板

使用示例

卡片 1

卡片 2

<div class="row">
        <div class="col">
        <div class="card">卡片内容</div>
        </div>
        <div class="col">
        <div class="card">卡片内容</div>
        </div>
        </div>

📑 标签页

CSS 选择器

.tabs 标签页容器

.tab 标签

.tab.active 激活的标签

.tabs-browser 浏览器风格标签容器

.tab-browser 浏览器风格标签

.tabs-content 标签内容容器

.tab-pane 标签页内容

API 函数

函数	参数	说明
switchTab(tabId)	tabId: 内容 ID	切换标签页

使用示例

内容 1

内容 2

<div class="tabs-browser">
        <button class="tab-browser active" onclick="switchTab('tab1')">标签 1</button>
        <button class="tab-browser" onclick="switchTab('tab2')">标签 2</button>
        </div>
        <div class="tabs-content">
        <div class="tab-pane active" id="tab1">内容 1</div>
        <div class="tab-pane" id="tab2">内容 2</div>
        </div>

💬 反馈组件

CSS 选择器

.modal 模态框容器

.modal-content 模态框内容

.toast Toast 提示

.tooltip 提示容器

.tooltip-text 提示内容

.loading 加载动画

API 函数

函数	参数	说明
openModal()	-	打开模态框
closeModal()	-	关闭模态框
showToast()	-	显示 Toast
showPopconfirm()	-	显示确认框
showNotification()	-	显示系统通知

使用示例

<button onclick="openModal()">打开模态框</button>
        <button onclick="showToast()">显示 Toast</button>

        <div class="modal" id="modal">
        <div class="modal-content">
        <h3>标题</h3>
        <p>内容</p>
        <button onclick="closeModal()">关闭</button>
        </div>
        </div>

📊 数据展示

CSS 选择器

table 表格

.list 列表容器

.list-item 列表项

.avatar 头像

.tag 标签

.badge 徽章

.progress 进度条容器

.progress-bar 进度条

.tree 树形控件容器

.tree-item 树节点

.tree-children 子节点容器

.breadcrumb 面包屑容器

.breadcrumb-item 面包屑项

.pagination 分页容器

.page-item 分页项

.menu 菜单容器

.menu-item 菜单项

使用示例

U

标签徽章5

<div class="avatar">U</div>
        <span class="tag">标签</span>
        <span>徽章<span class="badge">5</span></span>

        <div class="progress">
        <div class="progress-bar" style="width: 60%;"></div>
        </div>

📚 PrimoUI 文档

🚀 快速开始

目录结构

🎭 主题系统

主题分类表格

深色系

红色系

橙色系

黄色系

绿色系

青色系

蓝色系

紫色系

🎨 特殊主题

API 函数

💡 原理说明

🔘 按钮

CSS 选择器

使用示例

📝 表单组件

CSS 选择器

使用示例

📦 布局

CSS 选择器

使用示例

📑 标签页

CSS 选择器

API 函数

使用示例

💬 反馈组件

CSS 选择器

API 函数

使用示例

📊 数据展示

CSS 选择器

使用示例

模态框演示