简洁UI组件库Rabbit UI

28232022-08-02 15:42:38去下载

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

简洁UI组件库Rabbit 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').visable = 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();

引入样式：

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

按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .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';

特别提醒

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

TAG标签：UI组件 Rabbit UI

本文网址：https://www.zztuku.com/index.php/detail-12873.html
转载请声明来自：站长图库 - 简洁UI组件库Rabbit UI
使用声明：
1、本站所有素材，仅限学习交流，请勿用于商业用途。
2、本站资源大多无解压密码，如遇需要解压密码，无特殊说明，均为：zztuku.com
3、下载积分可通过日常签到、绑定邮箱等途径免费获得！
4、本站提供的源码、模板、软件工具等其他资源，均不包含技术服务，请大家谅解！由于资源大多存储在云盘，如出现链接失效请评论反馈。
5、如果素材损害你的权益，请联系我们给予处理。

简洁UI组件库Rabbit UI

特性

安装

评论（0）条

猜你喜欢