Rabbit-simple-ui NPM

RabbitUI

A simple UI component library based on JavaScrip

Features

Use semantic custom elements for easy resolution
Elegant and simple, say goodbye to the huge and bloated dazzling structure
Does not rely on any third party framework, the underlying base is native JavaScript, import out of the box
Can be used in Vue, jQuery or other existing projects
Rich components and features to suit most site scenarios
Careful, beautiful UI
Documents that are minutiae

Install

With NPM, you'll need to use 'TypeScript' and write and use code in TS files. Make sure you understand it and can use it in general

npm install rabbit-simple-ui --save

Using a script tag for global use:

Import the file directly in the browser using the script and link tags, and use the global variable Rabbit.

<!--import the style-->
<link rel="stylesheet" href="dist/styles/rabbit.css">
<!--import RabbitUI -->
<script type="text/javascript" src="rabbit.min.js"></script>

Usage

With a CDN we can easily write an example using 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').visible = true;  
    }
</script>
</html>

NPM environment

Use NPM to install, enjoy the convenience of the tool, work better with Webpack, and ES2015 is recommended.

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();

Using css via import:

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

Import as needed

With the help of babel-plugin-import, you can load components on demand and reduce file size. First install and configure it in file '.babelrc ':

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "rabbit-simple-ui",
    "libraryDirectory": "src/components"
  }]]
}

Then import the components as needed to reduce the size:

import { Alert, Message } from 'rabbit-simple-ui';

Especially remind

-According to the need to still need to import the reference style that the main js or the root component import 'rabbit-simple-ui/dist/styles/rabbit.css';