RabbitUI 一个基于JavaScript的简洁 UI 组件库

技术 PRO 稿源：开源运维 2025-04-07 06:46

一个基于 JavaScript 的简洁 UI 组件库

特性

使用语义化的自定义元素，易于分辨

优雅、简洁，与庞大且臃肿令人眼花缭乱的结构 say goodbye

不依赖任何第三方框架，底层基于原生 Javascript，引入即用

能够在 Vue、JQuery或者其他现有项目中配合使用

丰富的组件和功能，满足大部分网站场景

细致、漂亮的 UI

事无巨细的文档

安装

使用 npm，你将需要使用TypeScript，并在ts文件里编写和使用代码。请确保你了解过它，并能够大致使用

npm install rabbit-simple-ui --save

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 Rabbit。

<link rel="stylesheet" href="dist/styles/rabbit.css">  <script type="text/javascript" src="rabbit.min.js"></script>

示例

通过 CDN 的方式我们可以很容易地使用 Rabbit UI 写出一个示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RabbitUI demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/styles/rabbit.css"> </head> <body> <button type="button" class="rab-btn" onclick="show()">Hello Rabbit UI</button> <r-modal title="Welcome" id="exampleModal"> <p>Welcome to RabbitUI</p> </r-modal> </body> <script src="https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/rabbit.min.js"></script> <script> // 初始化modal const modal = new Rabbit.Modal(); show = function() { modal.config('#exampleModal').visible = true; } </script> </html>

NPM 环境

使用 npm 来安装，享受工具带来的便利，更好地和 webpack 配合使用，且推荐使用 ES2015。

import Alert from 'rabbit-simple-ui/src/components/alert'; import Tooltip from 'rabbit-simple-ui/src/components/alert'; import Collapse from 'rabbit-simple-ui/src/components/alert'; new Alert(); new Tooltip(); new Collapse();

引入样式：