English | 简体中文
-
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
- 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>
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';
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';
-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';
Modern browsers and Internet Explorer 10+.
If you wish to participate in contribution, welcome Pull Request or email contact 2864103063@qq.com, the contribution guide has not yet been produced