https://github.com/niu-grandpa/rabbit-ui
基于原生HTML的 Javascript UI 组件库
https://github.com/niu-grandpa/rabbit-ui
javascript javascript-library ui-components ui-library
Last synced: about 1 year ago
JSON representation
基于原生HTML的 Javascript UI 组件库
- Host: GitHub
- URL: https://github.com/niu-grandpa/rabbit-ui
- Owner: niu-grandpa
- License: mit
- Created: 2020-10-31T02:55:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T02:27:39.000Z (almost 2 years ago)
- Last Synced: 2025-03-30T04:08:18.835Z (about 1 year ago)
- Topics: javascript, javascript-library, ui-components, ui-library
- Language: TypeScript
- Homepage: https://niu-grandpa.github.io/rabbit-ui.github.io/
- Size: 5.46 MB
- Stars: 503
- Watchers: 46
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.en-US.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
English | [简体中文](./README.md)
# RabbitUI
### A simple UI component library based on JavaScrip
[](code_of_conduct.md)
[](https://www.npmjs.com/package/rabbit-simple-ui)
[](https://www.jsdelivr.com/package/npm/rabbit-simple-ui)
### 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
```bash
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`.
```html
```
## Usage
With a CDN we can easily write an example using Rabbit UI:
```html
RabbitUI demo
Hello Rabbit UI
Welcome to RabbitUI
// 初始化modal
const modal = new Rabbit.Modal();
show = function() {
modal.config('#exampleModal').visible = true;
}
```
NPM environment
Use NPM to install, enjoy the convenience of the tool, work better with Webpack, and ES2015 is recommended.
```js
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:
```js
import 'rabbit-simple-ui/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 ':
```text
npm install babel-plugin-import --save-dev
```
```json
// .babelrc
{
"plugins": [["import", {
"libraryName": "rabbit-simple-ui",
"libraryDirectory": "src/components"
}]]
}
```
Then import the components as needed to reduce the size:
```js
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';`
## 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)