简洁UI组件库Rabbit UI

所属分类:UI,输入-布局,定制和风格

 20913  103  查看评论 (2)
分享到微信朋友圈
X
简洁UI组件库Rabbit UI ie兼容11

更新时间:2021-06-20 23:16:32

更新说明:

  1. 重写并优化Message组件的内部代码

  2. 修复Button在没有图标仅有文本的状态下,切换为loading状态并在状态结束后无法切换为原样 bug

  3. 修改兼容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文件里编写和使用代码。 请确保你了解过它,并能够大致使用

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';

相关插件-布局,定制和风格

Clean Zone响应设计后台管理HTML5模板

Clean Zone是一个响应管理模板基于Bootstrap 3它有一个整洁的设计和美丽的特性可以使用了。
  布局
 75658  764

分享一个 Bootstrap3 响应式的单页小站

Bootstrap3 响应式的单页小站
  布局
 41266  512

Helsinki高端Bootstrap HTML5响应式后台模板

Helsinki是一套前端管理模板是建立在Bootstrap框架之上充分响应可以在任何设备上使用。
  布局
 65742  767

模拟大米官网

模拟大米官网
  布局
 41225  500

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    谎言花开 1
    2021/10/9 15:22:49
    Javript ?是JavaScript吧?
        niuGrandpa10
        2021/12/14 20:35:18
        是的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复