简洁UI组件库Rabbit UI

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

 6423  40  查看评论 (1)
分享到微信朋友圈
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';

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

jQuery bootstrap响应式网站模板

非常实用的jQuery bootstrap响应式网站模板,代码少,无多余功能全是实用的模块,可定制性强。
  布局
 15812  261

jQuery bootstrap响应式公司用网站模板

简洁大气的bootstrap响应式网站模板
  布局
 34811  443

bootstrap整站模板

bootstrap+jQuery整站模板,响应式,适配移动端
  布局
 44017  666

Notebook

bootstrap 页面模板
  布局
 36864  479

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

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