RabbitUI 一個(gè)基于JavaScript的簡潔 UI 組件庫

技術(shù) 2025-04-07 06:46

聲明：該文章來自（開源運(yùn)維）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁加速服務(wù)。

一個(gè)基于 JavaScript 的簡潔 UI 組件庫

特性

使用語義化的自定義元素，易于分辨

優(yōu)雅、簡潔，與龐大且臃腫令人眼花繚亂的結(jié)構(gòu) say goodbye

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

能夠在 Vue、JQuery或者其他現(xiàn)有項(xiàng)目中配合使用

豐富的組件和功能，滿足大部分網(wǎng)站場景

細(xì)致、漂亮的 UI

事無巨細(xì)的文檔

安裝

使用 npm，你將需要使用TypeScript，并在ts文件里編寫和使用代碼。請確保你了解過它，并能夠大致使用

npm install rabbit-simple-ui --save

瀏覽器引入

在瀏覽器中使用 script 和 link 標(biāo)簽直接引入文件，并使用全局變量 Rabbit。

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

示例

通過 CDN 的方式我們可以很容易地使用 Rabbit UI 寫出一個(gè)示例：

<!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 環(huán)境

使用 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();

引入樣式：