# Phoenix-ui

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

Github | Examples

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

## 安装

    $ npm install phoenix-ui --save

## 使用

### CommonJS & ES6

    // CommonJS
    var Button = require('phoenix-ui/lib/Button')
    // ES6
    import {Button} from 'phoenix-ui'
    ...
    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>
        );
    }

## 其他

和 phoenix-styles (组件样式库)配合使用最佳。

### phoenix-styles

默认提供阿波罗默认样式phoenix-styles.min.css,如果需要IOS样式同时引入skin-ios.min.css即可。

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

    // ES6
    import 'phoenix-styles/less/phoenix-styles.less';
    import 'phoenix-styles/less/skin-ios.less';

### phoenix系列插件(完善中...)

- ph-picker: 基于Phoenix-ui的移动端的`选择(时间、城市等)`组件
- ph-filter: 基于Phoenix-ui的移动端的`下拉筛选`组件
- ph-cascade-selector: 基于Phoenix-ui的移动端的`级联选择`组件
- ph-image-list: 基于Phoenix-ui的移动端的`图片列表展示、增删、全屏查看`组件
- ph-image-upload: 基于Phoenix-ui的移动端的`图片上传`组件
- ph-upload: 基于Phoenix-ui的移动端的`文件上传`组件
- ph-selector: 基于Phoenix-ui的移动端的`搜索筛选`组件
- ph-swipe: 基于Phoenix-ui的移动端的`大图滚动`组件
- ph-scroll: 基于Phoenix-ui的移动端的`滚动刷新`组件

### 推荐PC端React UI组件库 - eagle-ui

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

Document: http://future-team.github.io/eagle-ui/doc/index.html

### 推荐Icon库 - gfs-icons

Github: https://github.com/future-team/gfs-icons

Document: https://future-team.github.io/gfs-icons/index.html

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

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