黄色网站入口国产美女,精品国产欧美另类一区,国产一区二区美女自慰,日日摸夜夜添无码国产

選擇你喜歡的標(biāo)簽
我們會(huì)為你匹配適合你的網(wǎng)址導(dǎo)航

    確認(rèn) 跳過

    跳過將刪除所有初始化信息

    您的位置：0XUCN > 資訊 > 技術(shù)
    新聞分類

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

    技術(shù) PRO 稿源：開源運(yùn)維 2025-04-07 06:46

    一個(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();  

    引入樣式：

    import 'rabbit-simple-ui/dist/styles/rabbit.css';

    按需引用

    借助插件 babel-plugin-import可以實(shí)現(xiàn)按需加載組件，減少文件體積。首先安裝，并在文件 .babelrc 中配置：

    npm install babel-plugin-import --save-dev 

    // .babelrc {   "plugins": [["import", {     "libraryName": "rabbit-simple-ui",     "libraryDirectory": "src/components"   }]] }

    然后這樣按需引入組件，就可以減小體積了：

    import { Alert, Message } from 'rabbit-simple-ui';

    特別提醒

    按需引用仍然需要導(dǎo)入樣式，即在 main.js 或根組件執(zhí)行 import 'rabbit-simple-ui/dist/styles/rabbit.css';

    瀏覽器支持

    現(xiàn)代瀏覽器和Internet Explorer 10+。

    0XU.CN

    [超站]友情鏈接：

    四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
    關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級服務(wù)市場：https://www.ijiandao.com/

    *文章為作者獨(dú)立觀點(diǎn)，不代表 0XUCN 立場
    本文由 流淚番茄發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意，并請附上出處(0XUCN)及本頁鏈接。
    圖庫
    公眾號 關(guān)注網(wǎng)絡(luò)尖刀微信公眾號
    隨時(shí)掌握互聯(lián)網(wǎng)精彩
    贊助鏈接