react for weui
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
example
lib
src
test
.babelrc
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
build-docs.js
package.json
webpack.config.doc.js
webpack.config.js
webpack.config.prod.js
yarn.lock

README.md

简介

在线文档

重要

该UI组件库使用的是老版本的 0.13.3 的 React 库,由于老版与新版 React 存在很多不兼容的 API,所以该库也不兼容新版 React,如果你希望使用该库,请自行下载源码,重新调整编写,主要兼容性在于老版自动绑定了组件 this 的上下文,而新版需要手动绑定

样式及适配

  • weui的样式请自行在项目中引用,该库并没有引用
  • 组件中使用了 rem 单位,参考比例是 375屏宽下,根字体大小为 100px

index.html 的head中加入下面这段JS,以便动态计算 REM

(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var h=e.clientWidth||320;var f=e.classList;var g=h<320?320:h>450?450:h;var i=100*(g/375);c.REM=i;e.style.fontSize=i+"px";e.style.opacity=1};e.style.opacity=0;c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false);c.rem2px=function(f){return parseFloat(f)*c.REM};c.px2rem=function(f){return parseFloat(f)/c.REM}})(document,window);

示例Demo

在线Demo

安装使用

安装

yarn add mt-weui-react

全部引用

import React from 'react'
import { Button, Flex } from 'mt-weui-react'
const FlexItem = Flex.FlexItem

let App = React.createClass({
  render() {
      return (
        <Flex>
          <FlexItem><Button>hello wechat</Button></FlexItem>
          <FlexItem><Button>hello wechat</Button></FlexItem>
        </Flex>
      );
  }
})

ReactDOM.render((
    <App/>
), document.getElementById('container'));

按需引用

在非SPA应用中使用,最好使用按需要引用的方式加载需要用到的组件,以节省加载资源,按需引用有两中方式引用

直接引用

import Button from 'mt-weui-react/lib/components/button'

使用Babel插件,编译成上面的方式

安装 babel-plugin-component babel插件

npm i babel-plugin-component --save-dev

在文件 .babelrc 文件中添加配置

"plugins": [
 ["component", {"libraryName": "mt-weui-react", "libDir":"lib/components", "style": false }]
]

然后在项目中正常引入相关组件,最后会被编译成按需引入的方式

import { Button } from 'mt-weui-react'

// 经过插件转译为:
import Button from 'mt-weui-react/lib/components/button'

本地开发

yarn run start

启动本地开发,打开 http://localhost:8081 预览

打包

yarn run build
yarn run build:example

示例Demo发布到 /dist 目录下

文档

生成文档

yarn run build:docs

预览文档

yarn run docs

打开 http://localhost:8087 预览文档

TODO LIST

  • Divider

  • Group

  • Cell

  • Header

  • Badge

  • Message

  • dialog

  • toast

  • GroupTitle

  • Button

  • Checkbox

  • Flex

  • FlexItem

  • Grid

  • GridItem

  • Input

  • Msg

  • Offcanvas

  • Sticky

  • Swiper

  • SwiperItem

  • Switch

  • Tab

  • TabItem

  • Textarea

  • Tip

  • FormPreviex

  • Picker

  • Previewer

  • Circle

  • Marquee

  • PopupHeader

  • Datetime

  • Clocker

  • Countup

  • PopupPicker

  • PopupRadio

  • PopupAddress

  • XNumber

  • Range

  • Progress

  • qrcode

  • scroller

感谢

  • 本项目主要参考了 weui 官方的 weuireact-weuiVux(Vue版本的WeUI)
  • Api风格与 vux 基本一致