0.0.49 • Published 4 years ago

zswui v0.0.49

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

npm.io npm.io npm.io npm.io npm.io npm.io npm.io

从零开始构建的React UI组件库,实现了组件开发测试预览,文档撰写,打包发布到npm一系列功能,详细教程请查看 wiki

安装

npm install zswui

引入样式

import "zswui/lib/zswui.css"

打包发布

npm run lib

npm login

npm publish

引用示例

import React, { Component } from 'react';
import { Button } from "zswui";

class App extends Component {
  render(){
    return (
      <div className="main">
        <Button> Hi, Boy! </Button>
      </div>
    );
  }
}

export default App;

demo(文档待完善)

https://winyh.github.io/zswui

winyh , zswui 分别为github的 username 和仓库名

贡献代码

组件都在 components 目录下,单个组件用单个目录存放,在 components 目录下的 index.js 文件中集中对外抛出

可参考 button 组件

贡献代码规范请查看 wiki

组件开发测试

引入了 storybook 组件开发测试工具

以 button 组件为例,开发测试文件在src/stories/button/.stories.js

storybook 工具环境搭建请查看 wiki

启动storybook工具(端口随机)

npm run storybook

Todo List

  • 组件实现按需加载
  • 用 Typescript 改写
  • 中台模板 Zswui Admin
  • 基于这个库实现可视化拖拽构建中台 Vuegg | 云凤蝶

参考组件库

组件库说明
Ant Design服务于企业级产品的设计体系
RsuiteUI规范参考*
Fusion构建一套产品化设计系统和物料
Element基于 Vue 2.0 PC端网站快速成型工具
iview基于 Vue.js 的高质量UI 组件库
Vuetify偏向于扁平简洁大气风格
Bootstrap响应式,移动优先的组件库和规范
Material-ui基于 Material Design 设计系统
Semantic-ui偏向于扁平简洁大气风格
Grommet风格偏圆润
React-weui微信体系UI风格
React-grid布局参考样式

License

zswui is MIT licensed.