简洁UI组件库Rabbit UI

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

特性

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

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

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

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

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

细致、漂亮的 UI

事无巨细的文档

安装

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

npminstallrabbit-simple-ui–save

浏览器引入

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

<!–引入样式库–><linkrel="stylesheet"href="dist/styles/rabbit.css"><!–引入脚本–><scripttype="text/javascript"src="rabbit.min.js"></script>

示例

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

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>RabbitUIdemo</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/styles/rabbit.css"></head><body><buttontype="button"class="rab-btn"onclick="show">HelloRabbitUI</button><r-modaltitle="Welcome"id="exampleModal"><p>WelcometoRabbitUI</p></r-modal></body><scriptsrc="https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/rabbit.min.js"></script><script>//初始化modalconstmodal=newRabbit.Modal();show=function(){modal.config('#exampleModal').visable=true;}</script></html>

NPM 环境

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

importAlertfrom'rabbit-simple-ui/src/components/alert';importTooltipfrom'rabbit-simple-ui/src/components/alert';importCollapsefrom'rabbit-simple-ui/src/components/alert';newAlert();newTooltip();newCollapse();

引入样式：

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

按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

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

然后这样按需引入组件，就可以减小体积了：

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

特别提醒

按需引用仍然需要导入样式，即在 main.js 或根组件执行import 'rabbit-simple-ui/dist/styles/rabbit.css';

产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；

日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；

本文来自用户发布投稿，不代表产品猿立场；若对此文有疑问或内容有严重错误，可联系平台客服反馈；