rabbit-design

v1.20.0

Published

4 years ago

A lightweight UI plugin library written in TypeScript and based on JavaScript

0High
0Medium
0Low

niu-grandpa

ui jsui jsUI库 jsUI组件库 rabbit-design rabbitui rabbit-ui RabbitUI component ui-plugin javascript typescript framework

English | 简体中文

At present, the project is still in the production stage. In the future, more components will be updated and more detailed documentation and official website details page will be produced

Features

Elegant, concise, and huge and bloated people look dazzling structure Say goodbye
It does not rely on any third party framework, and is based on native JavaScript
Custom tags that use small amounts of HTML code and are semantically readable
Can be used directly in Vue, React, or other existing projects
Rich components and features to meet most site scenarios
Careful, beautiful UI

-Documentation in detail

Install

Using npm:

npm install rabbit-design --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

Browser environment example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
     <!--import the style-->
    <link rel="stylesheet" href="dist/styles/rabbit.css">
</head>
    
<body>
    <!--Alert component-->
    <r-alert type="success" message="Success Text"></r-alert>
    <!--Tooltip component-->
    <r-tooltip content="这里是提示文字">鼠标经过这段文字时，会显示一个气泡框</r-tooltip>
    <!--Collapse component-->
    <r-collapse defaultActiveKey="1">
      <r-collapse-panel key="1" title="面板标题1">
          <p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
      </r-collapse-panel>
      <r-collapse-panel key="2" title="面板标题2">
          <p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
      </r-collapse-panel>
      <r-collapse-panel key="3" title="面板标题3">
          <p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
      </r-collapse-panel>
    </r-collapse>
</body>
<!--import Rabbit.js-->
<script type="text/javascript" src="rabbit.min.js"></script>
<script>
    const Alert = new Rabbit.Alert();   
    const Tooltip = new Rabbit.Tooltip();  
    const Collapse = new Rabbit.Collapse();  
</script>
</html>

NPM environment

It is recommended to use NPM for installation, enjoy the convenience of the ecosystem and tools, and work well with Webpack. Of course, we also recommend using ES2015.

import Rabbit from 'rabbit-design';

const Alert = new Rabbit.Alert();   
const Tooltip = new Rabbit.Tooltip();  
const Collapse = new Rabbit.Collapse();

Using css via import:

import 'rabbit-design/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-design",
    "libraryDirectory": "src/components"
  }]]
}

Then import the components as needed to reduce the size:

import { Alert, Message } from 'rabbit-design';

Especially remind

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

Browser Support

Modern browsers and Internet Explorer 10+.

Contribute

If you wish to participate in contribution, welcome Pull Request or email contact [email protected], the contribution guide has not yet been produced

LICENSE

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme