Oat UI——一款超轻量级的无类 CSS 框架、语义化 HTML + CSS + JS UI 组件库

文章目录

[一、Oat UI 是什么？](#一、Oat UI 是什么？)
二、快速上手指南
- [方法一：CDN 引入（推荐，最快）](#方法一：CDN 引入（推荐，最快）)
- [方法二：npm 安装](#方法二：npm 安装)
三、详细代码示例
- [1. 按钮组件](#1. 按钮组件)
- [2. 表单组件](#2. 表单组件)
- [3. 卡片组件](#3. 卡片组件)
- [4. 警告框（Alert）](#4. 警告框（Alert）)
- [5. 表格组件](#5. 表格组件)
- [6. 标签页（Tabs）](#6. 标签页（Tabs）)
- [7. 对话框（Dialog）](#7. 对话框（Dialog）)
- [8. Toast 通知](#8. Toast 通知)
- [9. 进度条和加载指示器](#9. 进度条和加载指示器)
- [10. 网格布局](#10. 网格布局)
四、适合哪些场景？
五、如何定制主题？
写在最后

最近在 GitHub 上发现了一个开源项目 Oat UI。

这是一个超级轻量级的前端 UI 库，目前已经在 GitHub 上收获了 4.5k+ Star。它的理念很简单：你只需要写原生的 HTML，页面就能自动美化，不需要什么复杂的工程化配置。

一、Oat UI 是什么？

Oat UI 是一个无类 CSS 框架，超轻量级的语义化 HTML + CSS + JS UI 组件库。

什么意思呢？传统的 UI 库（如 Bootstrap、Element UI）通常需要你在 HTML 标签上添加各种类名，比如 class="btn btn-primary"。

而 Oat UI 完全不需要。它通过 CSS 的标签选择器，直接对原生 HTML 元素进行美化。

你写的 <button>、<table>、<form>，只要引入了 Oat UI，就会自动拥有统一、美观的样式。

不需要任何第三方库，纯原生实现，直接引入 CDN 文件，也不需要其它的构建工具。

来看下示例效果

这是一个没有任何 class 的表单示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oat UI 演示</title>
</head>
<style>
    body {
        width: 800px;
        margin: 0 auto;
    }
</style>
<body>
    <h1>用户注册</h1>
    <p>这是一个没有任何 class 的表单示例。</p>
    <form>
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        
        <div>
            <label for="email">邮箱</label>
            <input type="email" id="email" placeholder="请输入邮箱">
        </div>
        
        <div>
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        
        <div>
            <label for="role">角色</label>
            <select id="role">
                <option>开发者</option>
                <option>设计师</option>
                <option>产品经理</option>
            </select>
        </div>
        
        <button type="submit">立即注册</button>
    </form>
    <hr>
    <h2>数据报表</h2>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>前端工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>后端架构师</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

上面代码的效果是这样：

界面看起来可以说是非常的古老。

那 Oat UI 怎么使用呢？你只需要在 HTML 的 <head> 标签中引入它的 CSS 和 JS 文件：

javascript 复制代码

<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>

这样就可以了，其它的不用改，再看看效果图：

可以说是非常的方便。

Oat UI 的作者 Kailash Nadh 创建这个项目的初衷，就是因为受够了 JavaScript 生态系统中过度设计的臃肿和依赖地狱。

这整个 ui 库只有 6KB 的 CSS + 2.2KB 的 JS（压缩后），轻得像一片燕麦，这也是它名字的由来。

Oat UI 虽然轻量，但组件种类非常齐全：

类别	组件
布局	Grid 网格、Card 卡片、Sidebar 侧边栏
表单	Button 按钮、Switch 开关、Form 表单元素
导航	Tabs 标签页、Breadcrumb 面包屑、Pagination 分页
反馈	Alert 警告框、Toast 通知、Progress 进度条、Spinner 加载
数据展示	Table 表格、Badge 徽章、Avatar 头像
交互	Accordion 折叠面板、Dropdown 下拉菜单、Tooltip 提示、Dialog 对话框

二、快速上手指南

方法一：CDN 引入（推荐，最快）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oat UI 示例</title>
    
    <!-- 引入 Oat UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
</head>
<body>
    <!-- 在这里写你的页面内容 -->
    
    <!-- 引入 Oat UI JS -->
    <script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>
</body>
</html>

方法二：npm 安装

bash 复制代码

npm install @knadh/oat

javascript 复制代码

// 方式一：导入全部
import '@knadh/oat/oat.min.css';
import '@knadh/oat/oat.min.js';

// 方式二：按需导入（如果你使用构建工具）
import '@knadh/oat/css/oat.min.css';
import '@knadh/oat/js/oat.min.js';

三、详细代码示例

1. 按钮组件

html 复制代码

<!-- 基础按钮 -->
<button>默认按钮</button>
<button data-variant="secondary">次要按钮</button>
<button data-variant="danger">危险操作</button>

<!-- 样式变体 -->
<button class="outline">轮廓按钮</button>
<button data-variant="danger" class="outline">危险轮廓</button>
<button class="ghost">幽灵按钮</button>
<button disabled>禁用状态</button>

<!-- 尺寸 -->
<button class="small">小按钮</button>
<button>中按钮</button>
<button class="large">大按钮</button>

<!-- 按钮组 -->
<menu class="buttons">
    <li><button class="outline">左</button></li>
    <li><button class="outline">中</button></li>
    <li><button class="outline">右</button></li>
</menu>

2. 表单组件

html 复制代码

<form>
    <!-- 文本输入 -->
    <label data-field>
        用户名
        <input type="text" placeholder="请输入用户名" />
    </label>

    <!-- 邮箱输入 -->
    <label data-field>
        邮箱
        <input type="email" placeholder="you@example.com" />
    </label>

    <!-- 密码输入 -->
    <label data-field>
        密码
        <input type="password" placeholder="请输入密码" aria-describedby="pwd-hint" />
        <small id="pwd-hint">密码至少8位</small>
    </label>

    <!-- 下拉选择 -->
    <div data-field>
        <label>角色</label>
        <select>
            <option value="">请选择</option>
            <option value="admin">管理员</option>
            <option value="user">普通用户</option>
        </select>
    </div>

    <!-- 多行文本 -->
    <label data-field>
        简介
        <textarea placeholder="请输入简介..."></textarea>
    </label>

    <!-- 单选 -->
    <fieldset class="hstack">
        <legend>性别</legend>
        <label><input type="radio" name="gender"> 男</label>
        <label><input type="radio" name="gender"> 女</label>
    </fieldset>

    <!-- 多选 -->
    <label data-field>
        <input type="checkbox" /> 同意用户协议
    </label>

    <!-- 开关 -->
    <label>
        <input type="checkbox" role="switch" /> 接收推送通知
    </label>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
</form>

3. 卡片组件

html 复制代码

<article class="card">
    <header>
        <h3>文章标题</h3>
        <p>这是一段描述文字</p>
    </header>
    <p>卡片的主要内容区域，可以包含任意 HTML 元素。</p>
    <footer class="hstack">
        <button class="outline">取消</button>
        <button>确定</button>
    </footer>
</article>

4. 警告框（Alert）

html 复制代码

<div role="alert" data-variant="success">
    <strong>✅ 成功！</strong> 您的操作已成功完成。
</div>

<div role="alert" data-variant="warning">
    <strong>⚠️ 警告！</strong> 请在继续之前检查所有信息。
</div>

<div role="alert" data-variant="error">
    <strong>❌ 错误！</strong> 发生了未知错误，请重试。
</div>

<div role="alert">
    <strong>💡 提示</strong> 这是一条普通的消息通知。
</div>

5. 表格组件

html 复制代码

<div class="table">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
                <th>角色</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>zhangsan@example.com</td>
                <td>管理员</td>
                <td><span class="badge success">活跃</span></td>
            </tr>
            <tr>
                <td>李四</td>
                <td>lisi@example.com</td>
                <td>编辑</td>
                <td><span class="badge">活跃</span></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>wangwu@example.com</td>
                <td>访客</td>
                <td><span class="badge secondary">待审核</span></td>
            </tr>
        </tbody>
    </table>
</div>

6. 标签页（Tabs）

html 复制代码

<ot-tabs>
    <div role="tablist">
        <button role="tab" aria-selected="true">账户</button>
        <button role="tab">安全</button>
        <button role="tab">通知</button>
    </div>
    
    <div role="tabpanel">
        <h3>账户设置</h3>
        <p>在这里管理您的账户信息...</p>
    </div>
    
    <div role="tabpanel" hidden>
        <h3>安全设置</h3>
        <p>修改密码和安全设置...</p>
    </div>
    
    <div role="tabpanel" hidden>
        <h3>通知设置</h3>
        <p>配置您的通知偏好...</p>
    </div>
</ot-tabs>

7. 对话框（Dialog）

html 复制代码

<!-- 打开对话框的按钮 -->
<button commandfor="my-dialog" command="show-modal">打开对话框</button>

<!-- 对话框 -->
<dialog id="my-dialog" closedby="any">
    <form method="dialog">
        <header>
            <h3>编辑资料</h3>
            <p>修改您的个人信息</p>
        </header>
        <div class="vstack">
            <label>姓名 <input name="name" required></label>
            <label>邮箱 <input name="email" type="email"></label>
        </div>
        <footer>
            <button type="button" commandfor="my-dialog" command="close" class="outline">取消</button>
            <button type="submit" value="save">保存</button>
        </footer>
    </form>
</dialog>

<script>
    // 处理对话框返回值
    const dialog = document.querySelector("#my-dialog");
    dialog.addEventListener('close', (e) => {
        if (dialog.returnValue === 'save') {
            console.log('用户点击了保存');
        }
    });
</script>

8. Toast 通知

html 复制代码

<button onclick="showSuccess()">显示成功通知</button>
<button onclick="showError()">显示错误通知</button>

<script>
    // 成功通知
    function showSuccess() {
        ot.toast('操作已完成', '成功', { variant: 'success' });
    }
    
    // 错误通知
    function showError() {
        ot.toast('发生了错误', '失败', { variant: 'danger', placement: 'top-center' });
    }
    
    // 自定义通知配置
    ot.toast('新消息', '通知中心', { 
        variant: 'warning',           // success | danger | warning
        placement: 'bottom-right',     // top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
        duration: 5000                 // 显示时间（毫秒），0 为永久
    });
</script>

9. 进度条和加载指示器

html 复制代码

<!-- 进度条 -->
<progress value="60" max="100"></progress>
<progress value="30" max="100"></progress>
<progress value="90" max="100"></progress>

<!-- 加载指示器 -->
<div class="hstack" style="gap: 2rem;">
    <div aria-busy="true" data-spinner="small"></div>
    <div aria-busy="true"></div>
    <div aria-busy="true" data-spinner="large"></div>
</div>

<!-- 带遮罩的加载状态 -->
<article class="card" aria-busy="true" data-spinner="large overlay">
    <header>
        <h3>卡片标题</h3>
        <p>卡片描述</p>
    </header>
    <p>内容区域会被遮罩</p>
</article>

10. 网格布局

html 复制代码

<div class="container">
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>
    
    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
    
    <div class="row">
        <div class="col-3">col-3</div>
        <div class="col-6">col-6</div>
        <div class="col-3">col-3</div>
    </div>
    
    <!-- 带偏移的布局 -->
    <div class="row">
        <div class="col-4 offset-2">col-4 offset-2</div>
        <div class="col-4">col-4</div>
    </div>
</div>

四、适合哪些场景？

虽然 Oat UI 很好用，但它不是万能的。如果你要开发复杂的交互应用，还是得请出 Vue/React。

但以下场景，Oat UI 绝对是首选：

内部工具后台：给公司写个简单的数据查询页，没必要搭脚手架，一个 HTML 文件搞定。
产品原型/MVP：当你有个点子，想花 1 小时弄个 Demo 给老板或客户看时，不要在 CSS 上浪费时间。
学习与教学：刚入门后端开发，不想学前端框架，只想让页面"能看"的时候。

五、如何定制主题？

如果你想调整 Oat UI 的样式，只需要覆盖 CSS 变量即可：

css 复制代码

:root {
    --primary: #3498db;           /* 主色调 */
    --background: #ffffff;         /* 背景色 */
    --text: #2c3e50;              /* 文字颜色 */
}

暗色主题会根据系统偏好自动切换，你也可以手动控制。

写在最后

在如今前端工程化日益复杂的今天，Oat UI 让我们回到了 Web 开发的初心：HTML 才是网页的骨架。

当你只是想快速做一个产品的时候，这种轻量方案，往往比复杂的框架更加高效。

GitHub地址：

https://github.com/knadh/oat