{"id":17140071,"url":"https://github.com/mrxujiang/xu_ui","last_synced_at":"2025-05-07T15:43:33.963Z","repository":{"id":57096322,"uuid":"239284069","full_name":"MrXujiang/xu_ui","owner":"MrXujiang","description":"基于react的轻量级可扩展组件库","archived":false,"fork":false,"pushed_at":"2024-02-25T10:05:40.000Z","size":7274,"stargazers_count":77,"open_issues_count":0,"forks_count":54,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T00:32:06.432Z","etag":null,"topics":["components","javascript","library","library-free","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MrXujiang.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-09T10:20:09.000Z","updated_at":"2023-11-17T14:48:51.000Z","dependencies_parsed_at":"2024-03-04T21:17:40.078Z","dependency_job_id":null,"html_url":"https://github.com/MrXujiang/xu_ui","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.375,"last_synced_commit":"a253b142c9721345e1f79b3e82daae100a70393b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Fxu_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Fxu_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Fxu_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrXujiang%2Fxu_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrXujiang","download_url":"https://codeload.github.com/MrXujiang/xu_ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240778259,"owners_count":19855984,"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":["components","javascript","library","library-free","react"],"created_at":"2024-10-14T20:13:49.110Z","updated_at":"2025-02-26T02:21:38.674Z","avatar_url":"https://github.com/MrXujiang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xui——基于react的轻量级UI组件库\nxui是笔者开发的基于react的轻量级组件库，目前不依赖任何第三方ui组件库，支持按需导入，可定制。官网地址website: [xui——基于react的轻量级UI组件库](https://mrxujiang.github.io/xu_ui/)\n\n如果觉得官网地址访问太慢，可以直接移步github地址：[xui——基于react的轻量级UI组件库](https://github.com/MrXujiang/xu_ui)\n\n目前已开发完成如下ui组件：\n* Button 按钮组件\n* Badge 徽标数组件\n* Alert 警告提示组件\n* Drawer 抽屉组件\n* Progress 进度条组件\n* Switch 开关组件\n* Tag tag标签页组件\n* Modal 轻量实用的模态窗组件\n* Icon组件（基于react-icons的二次封装）\n* Input 输入框组件\n* Spin 加载组件\n* Notification 通知提示\n* Message 消息提示框组件\n* Empty 空状态组件\n* Skeleton 专为个人网站准备的骨架屏组件\n\n正在开发的组件：\n* Form form表单组件\n* Table 列表组件\n* Menu 菜单组件\n* DropDown 下拉框组件\n\n后续会开发出更多优质轻量组件，敬请关注。\n\n# 技术实现与版本\n该组件库基于一下技术版本开发：\n* react: 16.8.6\n* react-dom: 6.8.6\n* classnames\n\n# 文档demo演示\n\u003cimg src=\"01.png\" /\u003e\n\u003cimg src=\"02.png\" /\u003e\n\u003cimg src=\"03.png\" /\u003e\n\n# 使用\n\n## 1.安装\n``` js\nnpm install @alex_xu/xui\n```\n或者用yarn安装\n``` js\nyarn add @alex_xu/xui\n```\n## 2. 使用\n``` jsx\nimport { \n  Button,\n  Skeleton,\n  Empty,\n  Progress,\n  Tag,\n  Switch,\n  Drawer,\n  Badge,\n  Alert\n} from '@alex_xu/xui'\nimport { useState } from 'react'\nimport styles from './index.css'\n\nexport default function() {\n  const [visible, setVisible] = useState(false)\n  let show = () =\u003e { setVisible(true)}\n  let close = () =\u003e { setVisible(false)}\n  return (\n    \u003cdiv className={styles.normal}\u003e\n      \u003cButton className={styles.btn}\u003edefault\u003c/Button\u003e\n      \u003cButton className={styles.btn} type=\"warning\"\u003ewarning\u003c/Button\u003e\n      \u003cButton className={styles.btn} type=\"primary\"\u003eprimary\u003c/Button\u003e\n      \u003cButton className={styles.btn} type=\"info\"\u003einfo\u003c/Button\u003e\n      \u003cButton className={styles.btn} type=\"pure\"\u003epure\u003c/Button\u003e\n      \u003cButton className={styles.btn} type=\"primary\" shape=\"circle\"\u003ecircle\u003c/Button\u003e\n      \u003cButton className={styles.mb16} type=\"primary\" block\u003eprimary\u0026block\u003c/Button\u003e\n      \u003cButton type=\"warning\" shape=\"circle\" block onClick={show}\u003ecircle\u0026block\u003c/Button\u003e\n      {/* \u003cSkeleton /\u003e */}\n      \u003cProgress\n        percent={10}\n      /\u003e\n      \u003cProgress\n        percent={50}\n        themeColor=\"#009933\"\n      /\u003e\n      \u003cProgress\n        percent={50}\n        width={240}\n      /\u003e\n      \u003cProgress\n        percent={30}\n        width={240}\n        textColor=\"#fff\"\n      /\u003e\n      \u003cProgress\n        percent={50}\n        width={200}\n        themeColor=\"#FF6666\"\n        hiddenText\n      /\u003e\n      \u003cProgress\n        percent={10}\n        themeColor=\"#6699FF\"\n        statusScope={[[18, 'red'], [40, 'orange']]}\n      /\u003e\n      \u003cProgress\n        percent={20}\n        themeColor=\"#6699FF\"\n        statusScope={[[18, 'red'], [40, 'orange']]}\n      /\u003e\n      \u003cdiv className={styles.mb16}\u003e\u003c/div\u003e\n      \u003cTag\u003eHtml\u003c/Tag\u003e\n      \u003cTag closable\u003ereact\u003c/Tag\u003e\n      \u003cTag color=\"#FF99CC\"\u003eCss3\u003c/Tag\u003e\n      \u003cTag color=\"#06c\" closable\u003ereact\u003c/Tag\u003e\n      \u003cTag color=\"rgb(135, 208, 104)\"\u003eNode\u003c/Tag\u003e\n      \u003cdiv className={styles.mb16}\u003e\u003c/div\u003e\n      \u003cSwitch onText=\"on\" offText=\"off\" size=\"small\" /\u003e\n      \u003cBadge text=\"ddd\" status=\"warning\"\u003e6666ngd\u003c/Badge\u003e\n      \u003cdiv className={styles.mb16}\u003e\u003c/div\u003e\n      \u003cAlert message=\"success tip\" /\u003e\n      \u003cAlert message=\"success tip\" type=\"success\" /\u003e\n      \u003cAlert message=\"success tip\" type=\"error\" /\u003e\n      \u003cAlert message=\"success tip\" type=\"info\" /\u003e\n      \u003cAlert message=\"success tip\" type=\"info\" closable /\u003e\n      \u003cAlert message=\"success tip\" description=\"skfjdsalajdfjadkfjaldfhjaskdn你好,欢迎光临\" closable type=\"success\" /\u003e\n      \u003cEmpty /\u003e\n      \u003cDrawer visible={visible} onClose={close} destroyOnClose\u003e\n        \u003ch3\u003e我是标题\u003c/h3\u003e\n        \u003cbr/\u003e\n        \u003cinput type=\"text\"/\u003e\n        \u003cbr /\u003e\n        \u003ctextarea /\u003e\n      \u003c/Drawer\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\n# API文档\n正在搭建中，具体使用方式可参考：\n* [手摸手实现一个轻量级可扩展的模态框(Modal)组件](https://juejin.im/post/5e416e78e51d45270f52b062)\n* [《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件](https://juejin.im/post/5e3e7b8fe51d4526fb5dcddb)\n* [《精通react/vue组件设计》之5分钟实现一个Tag(标签)组件和Empty(空状态)组件](https://juejin.im/post/5e3cc898e51d4526d87c6037)\n* [《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件](https://juejin.im/post/5e35294d518825263237f3ba)\n* [《精通react/vue组件设计》之快速实现一个可定制的进度条组件](https://juejin.im/post/5e366772f265da3e307710dd)\n* [《精通react/vue组件设计》之基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)](https://juejin.im/post/5e302af8e51d453cc04abc56)\n\n# 技术交流与反馈\n微信（wechat）：qunqiujinkou\n\n欢迎提出更多issue以便让组件库更健壮\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxujiang%2Fxu_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrxujiang%2Fxu_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrxujiang%2Fxu_ui/lists"}