更新时间：2021-06-20 23:16:32
更新说明：
重写并优化Message组件的内部代码
修复Button在没有图标仅有文本的状态下，切换为loading状态并在状态结束后无法切换为原样 bug
修改兼容IE的版本号为10+
更新时间：2021-05-30 23:15:31
更新说明：此次更新升级版本至 1.7.0，新增组件 Circle 进度环
更新时间：2021-05-27 01:35:43
RabbitUI
一个基于 JavaScript 的简洁 UI 组件库
特性
使用语义化的自定义元素，易于分辨
优雅、简洁，与庞大且臃肿令人眼花缭乱的结构 say goodbye
不依赖任何第三方框架，底层基于原生 Javascript，引入即用
能够在 Vue、JQuery或者其他现有项目中配合使用
丰富的组件和功能，满足大部分网站场景
细致、漂亮的 UI
事无巨细的文档
安装
使用 npm，你将需要使用TypeScript，并在ts文件里编写和使用代码。 请确保你了解过它，并能够大致使用
1 | npm install rabbit-simple-ui --save |
浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 Rabbit。
1 2 3 4 | <!--引入样式库--><link rel="stylesheet" href="dist/styles/rabbit.css"><!--引入脚本--><script type="text/javascript" src="rabbit.min.js"></script> |
示例
通过 CDN 的方式我们可以很容易地使用 Rabbit UI 写出一个示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>RabbitUI demo</title></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> // 初始化modal const modal = new Rabbit.Modal(); show = function() { modal.config('#exampleModal').visable = true; }</script></html> |
NPM 环境
使用 npm 来安装，享受工具带来的便利，更好地和 webpack 配合使用，且推荐使用 ES2015。
1 2 3 4 5 6 | 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(); |
引入样式：
1 | import 'rabbit-simple-ui/dist/styles/rabbit.css'; |
按需引用
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
1 2 3 4 5 6 7 8 | npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import", { "libraryName": "rabbit-simple-ui", "libraryDirectory": "src/components" }]]} |
然后这样按需引入组件，就可以减小体积了：
1 | import { Alert, Message } from 'rabbit-simple-ui'; |
特别提醒
按需引用仍然需要导入样式，即在 main.js 或根组件执行 import 'rabbit-simple-ui/dist/styles/rabbit.css';
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： layui tag标签栏
- 下一个特效： 原生js生成迷宫自动寻路