https://github.com/mrxujiang/xu_ui

基于react的轻量级可扩展组件库
https://github.com/mrxujiang/xu_ui

components javascript library library-free react

Last synced: 24 days ago
JSON representation

基于react的轻量级可扩展组件库

• Host: GitHub
• URL: https://github.com/mrxujiang/xu_ui
• Owner: MrXujiang
• License: mit
• Created: 2020-02-09T10:20:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-25T10:05:40.000Z (9 months ago)
• Last Synced: 2024-04-14T00:32:06.432Z (7 months ago)
• Topics: components, javascript, library, library-free, react
• Language: JavaScript
• Homepage:
• Size: 6.94 MB
• Stars: 77
• Watchers: 4
• Forks: 54
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# xui——基于react的轻量级UI组件库

xui是笔者开发的基于react的轻量级组件库，目前不依赖任何第三方ui组件库，支持按需导入，可定制。官网地址website: [xui——基于react的轻量级UI组件库](https://mrxujiang.github.io/xu_ui/)

如果觉得官网地址访问太慢，可以直接移步github地址：[xui——基于react的轻量级UI组件库](https://github.com/MrXujiang/xu_ui)

目前已开发完成如下ui组件：

* Button 按钮组件

* Badge 徽标数组件

* Alert 警告提示组件

* Drawer 抽屉组件

* Progress 进度条组件

* Switch 开关组件

* Tag tag标签页组件

* Modal 轻量实用的模态窗组件

* Icon组件（基于react-icons的二次封装）

* Input 输入框组件

* Spin 加载组件

* Notification 通知提示

* Message 消息提示框组件

* Empty 空状态组件

* Skeleton 专为个人网站准备的骨架屏组件

正在开发的组件：

* Form form表单组件

* Table 列表组件

* Menu 菜单组件

* DropDown 下拉框组件

后续会开发出更多优质轻量组件，敬请关注。

# 技术实现与版本

该组件库基于一下技术版本开发：

* react: 16.8.6

* react-dom: 6.8.6

* classnames

# 文档demo演示







# 使用

## 1.安装

``` js

npm install @alex_xu/xui

```

或者用yarn安装

``` js

yarn add @alex_xu/xui

```

## 2. 使用

``` jsx

import { 

  Button,

  Skeleton,

  Empty,

  Progress,

  Tag,

  Switch,

  Drawer,

  Badge,

  Alert

} from '@alex_xu/xui'

import { useState } from 'react'

import styles from './index.css'

export default function() {

  const [visible, setVisible] = useState(false)

  let show = () => { setVisible(true)}

  let close = () => { setVisible(false)}

  return (

    


      default

      warning

      primary

      info

      pure

      circle

      primary&block

      circle&block

      {/*  */}

      

      

      

      

      

      

      

      


      Html

      react

      Css3

      react

      Node

      


      

      6666ngd

      


      

      

      

      

      

      

      

      

        
我是标题

        


        

        


        

      

    

  )

}


```

# API文档

正在搭建中，具体使用方式可参考：

* [手摸手实现一个轻量级可扩展的模态框(Modal)组件](https://juejin.im/post/5e416e78e51d45270f52b062)

* [《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件](https://juejin.im/post/5e3e7b8fe51d4526fb5dcddb)

* [《精通react/vue组件设计》之5分钟实现一个Tag(标签)组件和Empty(空状态)组件](https://juejin.im/post/5e3cc898e51d4526d87c6037)

* [《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件](https://juejin.im/post/5e35294d518825263237f3ba)

* [《精通react/vue组件设计》之快速实现一个可定制的进度条组件](https://juejin.im/post/5e366772f265da3e307710dd)

* [《精通react/vue组件设计》之基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)](https://juejin.im/post/5e302af8e51d453cc04abc56)

# 技术交流与反馈

微信（wechat）：qunqiujinkou

欢迎提出更多issue以便让组件库更健壮