RabbitUI

最新推荐文章于 2024-05-21 09:34:26 发布
最新推荐文章于 2024-05-21 09:34:26 发布
阅读量227 收藏
点赞数
原文链接：https://www.jq22.com/jquery-info23872
版权

一个基于 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>

    <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。

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

DragonXing88
关注
rabbit-ui:Rabbit UI是基于Typescript编写的轻量级UI插件库
04-03
简体中文| RabbitUI 一个基于Javascript并使用Typescript编写的轻量级UI插件库 目前项目仍处于制作阶段，随后将会更新更多的组件，制作更加详细的文档介绍和官网详情页面 特性 优雅，简洁，与庞大且臃肿让人看了眼花缭乱的结构 不依赖任何第三方框架，基本上基于原生Javascript 使用少量HTML代码且语义化预期性高的自定义标签 能够在Vue，JQuery或其他现有项目中配合使用 丰富的组件和功能，满足大部分网站场景 细致，漂亮的UI 事无巨细的文档 安装 使用npm npm install rabbit-design --save 浏览器约会 在浏览器中使用脚本和链接标签直接约会文件，并使用变量变量Rabbit 。 <!--引入样式库--> < link rel =" stylesheet " href =" dist/styles/rabbit.css "
RabbitUI:Rabbit UI是基于Typescript编写的UI组件库
03-17
简体中文| RabbitUI 一个基于TypeScript构建的UI组件库 目前项目仍处于制作阶段，随后将会更新更多的组件，制作更加详细的文档介绍和官网详情页面 特性 优雅，简洁，与庞大且臃肿让人看了眼花缭乱的结构 不依赖任何第三方框架，逐步基于原生Javascript编写 使用少量HTML代码且语义化预期性高的自定义标签 能够直接在Vue，React或其他现有项目中配合使用 丰富的组件和功能，满足大部分网站场景 细致，漂亮的UI 事无巨细的文档 安装 使用npm npm install rabbit-design --save 浏览器约会 在浏览器中使用脚本和链接标签直接约会文件，并使用变量变量Rabbit 。 <!--引入样式库--> < link rel =" stylesheet " href =" dist/styles/rabbit.css " > <!--引入脚本-->
​兔子快跑/rabbit-UI和接口自动化测试平台​
seanyang_的博客
10-13 1007
Rabbit]是一个开源的自动化测试平台，基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue)，目前版本已支持UI自动化和接口自动化。平台采用关键字驱动，测试人员无需任何代码基础，即可轻松完成复杂的自动化测试工作。
探索轻盈之美：RabbitUI——您的高效前端解决方案
gitblog_00038的博客
05-21 399
探索轻盈之美：RabbitUI——您的高效前端解决方案 rabbit-ui基于 TypeScript 编写的 JavaScript 简洁 UI 库项目地址:https://gitcode.com/gh_mirrors/ra/rabbit-ui ???? 项目介绍 RabbitUI 是一款精心打造的 JavaScript UI 组件库，以简洁优雅的设计理念为核心，旨在为您的网页应用带来极致的用户体验。它...
RabbitMQ的简单(即simple)模式示例代码
小志的博客
04-22 739
1、MQ获取连接工具类代码如下： package com.rf.rabiitmq.util; import com.rabbitmq.client.Connection; import com.rabbitmq.client.ConnectionFactory; /** * @description: mq连接工具类 * @author: xiaozhi * @create: 2020-...
RabbitMQ 管理 API 的终端 UI
06-28
拉比图伊RabbitMQ 管理 API 的终端客户端安装家酿brew tap maxmindlin/rabbitui brew install rabbitui从源头构建cargo build --release && ./target/release/rabbitui在发布模式下构建并运行生成的二进制...
rabbit-simple-ui.zip
07-23
基于TypeScript编写的高质量简洁UI组件库，一切都是纯原生JS。 适用与后端人员或者没学过jQuery与前端三大框架但又不想学的人，想要...在线文档：www.rabbitui.cn; Github: https://github.com/niu-grandpa/rabbit-ui
3.RabbitMQ UI管理界面使用（用户、虚拟主机）
相互学习 共同进步
05-22 3297
当安装了RabbitMQ之后相当于安装了Mysql数据库，那么在使用mysql的时候需要创建用户，这里的用户跟Mysql的用户可以同等理解用户角色：Admin（管理员）、Monitoring （监控者）、Policymaker（决策者）、Management（管理者）、Impersonator（模拟者）、None（没有）用户角色描述超级管理员（administrator）可登陆管理控制台，可查看所有的信息，并且可以对用户，策略（policy）进行操作监控者（monitoring）
消息中间件Rabbit(三)-Simple简单模式
weixin_51725434的博客
12-22 745
Simple简单模式
RabbitMQ UI界面简单介绍
cp's blog
07-23 1333
web管理插件 RabbitMQ的插件是由Erlang语言写的，并且和服务器一同运行在同一个Erlang VM中，通过下面的命令启用web管理插件： sudo ./rabbitmq-plugins enable rabbitmq_management 启动之后，访问15672端口，可看到Web管理页面主页面： 添加用户 默认会提供一个默认用户guest，密码也是guest，线上环境需要创建一个新用户，并把guest用户删除。 首先切换到Admin标签页，可以查看或添加用户，添加用户时，可指定Tags，相当
RabbitMQ UI界面的简单介绍
cxu123321的博客
08-21 624
RabbitMQ UI界面的简单介绍 托尼吴 web管理插件 RabbitMQ的插件是由Erlang语言写的，并且和服务器一同运行在同一个Erlang VM中，通过下面的命令启用web管理插件： sudo./rabbitmq-pluginsenablerabbitmq_management 启动之后，访问15672端口，可看到Web管理页面主页面： 添加用户 默认会提供一个默认用户guest，密码也是guest，线上环境需要创建一个新用户，并把guest用户删除。 首...
RabbitMQ实战：界面管理和监控
weixin_33705053的博客
04-14 5482
本系列是「RabbitMQ实战：高效部署分布式消息队列」书籍的总结笔记。 上一篇总结了可能出现的异常场景，并对RabbitMQ提供的可用性保证进行了分析，在出现服务器宕机后，仍然可以正常服务。另外，需要尽快恢复异常的服务器，重新加入集群，推送未消费的消息，通过监控可第一时间接收到错误并进行处理。 另外，我们想主动了解消息堆积和消费的情况，以及服务器节点的压力，RabbitMQ提供了几种方式便捷...
RabbitMQ 管理界面解析框架
大猩猩的专栏
10-09 1万+
前言 RabbitMQ的安装,网上例子非常多,此处不做累赘.至于为什么装RabbitMQ的时候要装erlang,因为erlang也是一门语言,通俗讲就是开发rabbitmq人员当时为了高并发,分布,健壮性,等等一系列优点的考虑,采用erlang作为rabbitmq的底层语言来开发. erlang现如今是开源语言.函数式编程,支持多种开发环境. 当然博主也只能说成这样,没有更深层次的研究和学习...
启用UI管理rabbitmq
吴业亮的专栏
03-27 2051
版权声明：本博客欢迎转发，但请保留原作者信息! 作者：【吴业亮】云计算开发工程师 博客：http://blog.csdn.net/wylfengyujiancheng1、启用管理插件# rabbitmq-plugins enable rabbitmq_management The following plugins have been enabled: mochiweb webmach
rabbitmq的命令和Web UI管理消息服务器
每天进步一点点。。。的博客
04-18 4075
1、文件的解压 .tar.gz文件，这种文件是tar文件的压缩文件，可以使用tar命令进行解压。 单纯的.gz文件解压，这种文件不可以使用tar命令解压，需要用gunzip解压，使用命令gzip。 2、rabbitmq的rabbitmq Web UI 监控页面的端口：15672端口不能进行登录 默认安装中，我们只能用命令 rabbitmqctl 监控 RabbitMQ，比如：rab
rabbitmq开启webui界面管理
热门推荐
feinifi的博客
09-10 2万+
默认情况下，安装完成rabbitmq，启动成功，并不会开启webui的http访问服务。通过rabbitmq-plugins list查看rabbitmq插件，发现rabbitmq_management这里并没有被开启。这里介绍如何开启rabbitmq基于http的webui界面管理。 如果需要通过浏览器访问rabbitmq管理界面，需要开启rabbitmq_management插件。操作如...
Rabbitmq可视化UI界面访问不了
zmm0420的专栏
09-25 1972
今天使用docker安装了rabbitmq，但是可视化界面无法访问。 启动容器命令： docker run -d --name rabbitmq -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin -p 15672:15672 -p 5672:5672 docker.io/rabbitmq:3.8.7 经过查资料才了解是，软件的管理界面插件未开启导致的。 解决办法，执行如下命令： docker exec -it..
css3 div跳动动画_小白兔白又白，用CSS3创作的可爱小白兔，萌化了
weixin_31070201的博客
12-06 742
同样先放最终效果图：动图演示：一边听歌一边截的动图，所以图片下面有歌词闪过，大家忽视就好。整个图像其实可以分为三个部分，一是蓝黑色的背景，二是三朵若隐若现的白云，三是这只往前跳的小兔子，背景可以直接在body里设置，因此我们的HTML主题部分就只需要下面两个div：接着CSS里开始设置样式，先是整体的背景：body { margin: 0; height: 100vh; display: flex...
基于Kotlin和Java的蓝牙工具设计源码分享
10-02
该开源项目是一款基于Kotlin和Java的蓝牙工具设计，总计包含157个文件，其中90个为Kotlin源代码文件，22个为PNG图像文件，21个为XML布局文件，6个为Gradle构建脚本文件，4个为Git忽略配置文件，4个为Java源代码文件，3个为项目属性文件，1个为Markdown文档，以及1个JAR库文件。
第五章 堆积判弃电路和基线恢复器
最新发布
10-02
核电子学是一门交叉学科，它结合了电子技术与核辐射探测技术，是电子学的一个重要分支。这门学科的发展始于20世纪初，随着核物理学和粒子物理学的发展而逐渐成熟。核电子学的研究对象包括辐射探测器及其相应的电子电路或系统、核信息的电子学测量技术、配有在线电子计算机的核电子系统、电子器件在核辐射下的辐射效应以及核技术应用中的辐射探测技术和电子技术。 核电子学的发展历史可以追溯到1958年，当时在贝尔格莱德召开的第一次国际核电子学会议上，核电子学的名称被正式采用。从那时起，核电子学开始广泛应用于核物理和粒子物理实验，同时也在核医学、空间科学、移动通信和全球定位系统等领域发挥着重要作用。 核电子学的研究内容包括： 1. 辐射探测器及其信号处理技术。 2. 核信息的测量技术，包括时间间隔测量、空间分辨等。 3. 核电子系统的设计与应用，如在线电子计算机系统。 4. 电子器件和系统的抗辐射加固技术。 5. 核技术在不同领域的应用，如工业、农业、医学等。 核电子学的应用非常广泛，例如在医学领域，它可以帮助诊断和治疗疾病；在工业领域，它用于检测材料的完整性和质量；在环境监测中，它用于检测放射性物质。此外
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值