rabbit-design
Version:
A lightweight UI plugin library written in TypeScript and based on JavaScript
160 lines (116 loc) • 4.95 kB
Markdown
<p align="center">
<a href="https://github.com/niu-grandpa/RabbitUI">
<img width="200" src="./assets/logo.svg">
</a>
</p>
English | [简体中文](./README.md)
<h1>
RabbitUI
<h3>A lightweight UI plug-in library written in TypeScript and based on JavaScript</h3>
</h1>
> 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:
```text
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`.
```html
<!--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
```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.
```js
import Rabbit from 'rabbit-design';
const Alert = new Rabbit.Alert();
const Tooltip = new Rabbit.Tooltip();
const Collapse = new Rabbit.Collapse();
```
Using css via import:
```js
import 'rabbit-design/dist/styles/rabbit.css';
```
## Import as needed
With the help of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), you can load components on demand and reduce file size. First install and configure it in file '.babelrc ':
```js
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:
```js
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+.
## Related links
- [TypeScript](https://www.tslang.cn/)
- [Webpack](http://webpack.github.io/)
- [Iconfont](https://www.iconfont.cn/)
- [ViewUI](https://www.iviewui.com/)
- [Ant Design](https://ant.design/index-cn)
- [Ant Design of Vue](https://2x.antdv.com/docs/vue/introduce-cn/)
- [Element](https://element.eleme.cn/)
- [Element-angular](https://element-angular.faas.ele.me/guide/install)
## Contribute
If you wish to participate in contribution, welcome [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls) or email contact 2864103063@qq.com, the contribution guide has not yet been produced
## LICENSE
[MIT](https://github.com/niu-grandpa/RabbitUI/blob/master/LICENSE)