Skip to content

xfcf1/react-weui-to-mobile

Repository files navigation

WeUI 修改版

  • 修改样式为IPhone(sui mobile的样式)
  • 添加导航插件
  • 添加手机相关[Icon](http://m.sui.taobao.org/components/#icons)

    ###样式查看扫码 qrcode

    API参见

    https://github.com/xfcf1/react-weui-to-mobile/tree/master/docs

    样式参见

    http://m.sui.taobao.org/components/

    #安装

    npm i -save react-weui-to-mobile

    已把样式引入,不需要再引入 weui.css

    #自开发

    npm install
    npm start

    启动端口为8000

    npm build

    src为插件目录 example为例子目录 编译插件输出目录为./lib

    #使用

    import weui from 'react-weui-to-mobile';

    api使用方法参见原weui使用方法,这里只写明修改过的api

    ###Icon 原用法

    import { Icon } from 'react-weui-to-mobile';
    ...
    <Icon value='success'>
    ...

    添加type属性为新加的icon

    例如sui上的icon class为

    <span class="icon icon-app"></span>

    只需要取icon-app后面的 app部分

    import { Icon } from 'react-weui-to-mobile';
    ...
    <Icon type='icon' value='app'>
    ...

    ###导航

    import { Nav } from 'react-weui-to-mobile';
    
    <Nav><h1 className="title">标题</h1></Nav>
    import { Nav } from 'react-weui-to-mobile';
    
    <Nav type="button">
        <Button className="left" type="primary" plain size="small">按钮</Button>
        <Button className="right" type="primary" plain size="small">按钮</Button>
        <h1 className="title">标题</h1>
    </Nav>
    import { Nav } from 'react-weui-to-mobile';
    
    
    <Nav>
        <a className="left" href="#tab"><Icon type="icon" value="left"/>返回</a>
        <a className="right" href="#tab">刷新<Icon type="icon" value="refresh"/></a>
        <h1 className="title">标题</h1>
    </Nav>
  • About

    No description, website, or topics provided.

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published