{"id":26336950,"url":"https://github.com/niu-grandpa/rabbit-ui","last_synced_at":"2025-04-06T05:15:16.708Z","repository":{"id":65479516,"uuid":"308791541","full_name":"niu-grandpa/rabbit-ui","owner":"niu-grandpa","description":"基于原生HTML的 Javascript UI 组件库","archived":false,"fork":false,"pushed_at":"2024-08-06T02:27:39.000Z","size":5721,"stargazers_count":503,"open_issues_count":3,"forks_count":11,"subscribers_count":46,"default_branch":"master","last_synced_at":"2025-03-30T04:08:18.835Z","etag":null,"topics":["javascript","javascript-library","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://niu-grandpa.github.io/rabbit-ui.github.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/niu-grandpa.png","metadata":{"files":{"readme":"README.en-US.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-31T02:55:55.000Z","updated_at":"2025-02-07T07:40:02.000Z","dependencies_parsed_at":"2025-03-16T06:15:48.543Z","dependency_job_id":null,"html_url":"https://github.com/niu-grandpa/rabbit-ui","commit_stats":null,"previous_names":["niu-grandpa/rabbitui"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niu-grandpa%2Frabbit-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niu-grandpa%2Frabbit-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niu-grandpa%2Frabbit-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niu-grandpa%2Frabbit-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/niu-grandpa","download_url":"https://codeload.github.com/niu-grandpa/rabbit-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436284,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-library","ui-components","ui-library"],"created_at":"2025-03-16T02:16:57.068Z","updated_at":"2025-04-06T05:15:16.418Z","avatar_url":"https://github.com/niu-grandpa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"http://www.rabbitui.cn\"\u003e\n        \u003cimg width=\"200\" src=\"./assets/logo.svg\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nEnglish | [简体中文](./README.md)\n\n# RabbitUI\n\n### A simple UI component library based on JavaScrip\n\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n[![](https://img.shields.io/npm/v/rabbit-simple-ui.svg?style=flat-square)](https://www.npmjs.com/package/rabbit-simple-ui)\n[![](https://data.jsdelivr.com/v1/package/npm/rabbit-simple-ui/badge)](https://www.jsdelivr.com/package/npm/rabbit-simple-ui) \n\n### Features\n\n- Use semantic custom elements for easy resolution\n\n- Elegant and simple, say goodbye to the huge and bloated dazzling structure\n\n- Does not rely on any third party framework, the underlying base is native JavaScript, import out of the box\n\n- Can be used in Vue, jQuery or other existing projects\n\n- Rich components and features to suit most site scenarios\n\n- Careful, beautiful UI\n\n- Documents that are minutiae\n\n### Install\n\n- 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\n\n```bash\nnpm install rabbit-simple-ui --save\n```\n\n- Using a script tag for global use:\n\nImport the file directly in the browser using the `script` and `link` tags, and use the global variable `Rabbit`.\n\n```html\n\u003c!--import the style--\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/styles/rabbit.css\"\u003e\n\u003c!--import RabbitUI --\u003e\n\u003cscript type=\"text/javascript\" src=\"rabbit.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nWith a CDN we can easily write an example using Rabbit UI:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eRabbitUI demo\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/styles/rabbit.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cbutton type=\"button\" class=\"rab-btn\" onclick=\"show()\"\u003eHello Rabbit UI\u003c/button\u003e\n    \u003cr-modal title=\"Welcome\" id=\"exampleModal\"\u003e\n       \u003cp\u003eWelcome to RabbitUI\u003c/p\u003e\n    \u003c/r-modal\u003e\n\u003c/body\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/rabbit-simple-ui/dist/rabbit.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    // 初始化modal\n    const modal = new Rabbit.Modal();\n    show = function() {\n        modal.config('#exampleModal').visible = true;  \n    }\n\u003c/script\u003e\n\u003c/html\u003e\n```\n\nNPM environment\n\nUse NPM to install, enjoy the convenience of the tool, work better with Webpack, and ES2015 is recommended.\n\n```js\nimport Alert from 'rabbit-simple-ui/src/components/alert';\nimport Tooltip from 'rabbit-simple-ui/src/components/alert';\nimport Collapse from 'rabbit-simple-ui/src/components/alert';\n\nnew Alert();   \nnew Tooltip();\nnew Collapse();  \n```\n\nUsing css via import:\n\n```js\nimport 'rabbit-simple-ui/dist/styles/rabbit.css';\n```\n\n## Import as needed\n\nWith 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 ':\n\n```text\nnpm install babel-plugin-import --save-dev\n```\n\n```json\n// .babelrc\n{\n  \"plugins\": [[\"import\", {\n    \"libraryName\": \"rabbit-simple-ui\",\n    \"libraryDirectory\": \"src/components\"\n  }]]\n}\n```\n\nThen import the components as needed to reduce the size:\n\n```js\nimport { Alert, Message } from 'rabbit-simple-ui';\n```\n\n### Especially remind\n\n-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';`\n\n## Browser Support\n\nModern browsers and Internet Explorer 10+.\n\n## Related links\n\n- [TypeScript](https://www.tslang.cn/)\n- [Webpack](http://webpack.github.io/)\n- [Iconfont](https://www.iconfont.cn/)\n- [ViewUI](https://www.iviewui.com/)\n- [Ant Design](https://ant.design/index-cn)\n- [Ant Design of Vue](https://2x.antdv.com/docs/vue/introduce-cn/)\n- [Element](https://element.eleme.cn/)\n- [Element-angular](https://element-angular.faas.ele.me/guide/install)\n\n## Contribute\n\nIf 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\n\n## LICENSE\n\n[MIT](https://github.com/niu-grandpa/RabbitUI/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniu-grandpa%2Frabbit-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniu-grandpa%2Frabbit-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniu-grandpa%2Frabbit-ui/lists"}