Version 1.7.4 文档

# Phoenix-ui

Version 2.0.0

基于React框架实现的移动端UI组件库

Github | Examples

phoenix-ui是基于React框架实现的移动端UI组件库。

## 安装

    $ npm install phoenix-ui --save

## 特别注意

### 针对dpr的屏幕兼容

在html文件的head元素中引入gfs-viewport.js文件，兼容不同手机不同dpr带来的适配问题。

    <script src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script>

或直接放置代码：

    <script>
        (function(baseFontSize,fontscale){var _baseFontSize=baseFontSize||100;var _fontscale=fontscale||1;var win=window;var doc=win.document;var ua=navigator.userAgent;var matches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);var UCversion=ua.match(/U3\/((\d+|\.){5,})/i);var isUCHd=UCversion&&parseInt(UCversion[1].split(".").join(""),10)>=80;var isIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);var dpr=win.devicePixelRatio||1;if(!isIos&&!(matches&&matches[1]>534)&&!isUCHd){dpr=1}var scale=1/dpr;var metaEl=doc.querySelector('meta[name="viewport"]');if(!metaEl){metaEl=doc.createElement("meta");metaEl.setAttribute("name","viewport");doc.head.appendChild(metaEl)}metaEl.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale);doc.documentElement.style.fontSize=_baseFontSize/2*dpr*_fontscale+"px"})();
    </script>

## 使用

### CommonJS & ES6

从2.0版本开始，建议都使用以下方式引入，可减少冗余代码的打包。

    // CommonJS
    var Button = require('phoenix-ui/lib/button')
    // ES6
    import Button from 'phoenix-ui/lib/button'
    ...
    render: function() {
        return (
            <div>
                <Button phStyle="info" phSize="lg" active>按钮</Button>
            </div>
        );
    }

### Browser globals

    <script src="http://future-team.github.io/phoenix-ui/dist/phoenix-ui.min.js"></script>
    ...
    render: function() {
        return (
            <div>
                <Phoenix.Button phStyle="info" phSize="lg" active>按钮</Phoenix.Button>
            </div>
        );
    }

## 兼容性

- Android 4.4.2+
- IOS 8+
- Chrome

## Version 2.0.0 重大修改

1. 去掉TableView和FormGroup，新增List，有需要form元素的可自行在外层加上。
2. 去掉LoadingList组件，新增PullUp，简化API，修复滑动触发的BUG。
3. 去掉Whisper组件，修改Popover的使用方式和位置计算，优化位置显示。
4. Input拆分成Input、Checkbox、Radio。Input新增phIcon、clear、visible等属性；不再需要外部onChange的使用方式，通过getValueCallback获取当前Input的值。
5. 新增SearchBar组件。
6. 新增Image组件，可定义图片在区域内的大小、位置和是否懒加载。
7. Label组件使用方式改变，为统一规范用iconfont来替代。
8. ph-filter合并到phoenix-ui中，可以通过`import PhFilter from 'phoenix-ui/lib/ph-filter'`引入使用，新增和修改部分API。
9. 多组件丰富API，具体参考文档。
10. 所有的回调函数更名，如clickCallback（事件+Callback）的命名标准（除了表单元素仍然使用的是react标准的onChange）。
11. 样式规范化。

更详细的内容可参考wiki: Phoenix2.0升级说明

之后每次更新会记录在该wiki中，根据版本详细记录每次更新：Phoenix2升级记录

## 旧项目升级步骤

详细内容查看wiki: 旧项目升级phoenix2步骤

## 组件拓展

### 组件继承

        import Button from 'phoenix-ui/lib/button'

        export default class MyButton extends Button{
            ...
            // 方法覆盖
            renderIcon(){
                return null
            }

            render(){
                return (
                    <div className='my-button'>
                        ...
                        // 方法调用
                        {this.renderButton()}
                    </div>
                )
            }
        }

### 高阶组件

        import {Component} from 'react'
        import Button from 'phoenix-ui/lib/button'

        function enhance(WrappedComponent){
            return class extends Component{
                ...

                render(){
                    return <WrappedComponent {...this.props} />
                }
            }
        }

        const MyButton = enhance(Button)

        export default MyButton

## 样式

### 关于换肤

phoenix-ui默认和phoenix-styles (组件样式库)配合使用。

如果要换成ios主题的皮肤，在打包之后的css文件后再引入ios-skin.min.css：

    ...
    <link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/ios-skin.min.css" />

### 关于布局

强烈建议使用rem布局，gfs-viewport会根据当前的dpr进行基础文字(html font-size)大小的切换，使用rem会根据该基础字体布局。
一般设计给出的是750宽的基于iphone6的UED，在当前尺寸基础下除以100，就是得到的rem值。
如：88px -> .88rem

具体布局说明查看：phoenix2布局说明

### 其他

样式提供了对应的dom结构，还有能够全局应用的类：具体查看说明。

## 推荐

### 移动端基于Vue的UI组件库 - swan-ui

Github: https://github.com/future-team/swan-ui

### PC端基于React的UI组件库 - eagle-ui

Github: https://github.com/future-team/eagle-ui

使用中遇到问题请提交issue: Phoenix-ui Issues

For 点评的小伙伴, 可大象 @chenaibing 或 @min.xiao