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