phoenix-ui

<div style="position:relative; margin: -15px -20px 15px;padding: 50px 24px 60px 24px;box-sizing: border-box;background-color: #333;overflow: hidden;text-align:center; color:#fff;"> <a style="color:#fff;position: absolute;right:25px;top:15px;" href="http://future-team.github.io/phoenix-ui/doc_v1/index.html">Version 1.7.4 文档</a> <h1>Phoenix-ui</h1> <p style="margin-top:15px">Version 2.0.0</p> <p style="margin-top:15px">基于React框架实现的移动端UI组件库</p> <p style="margin-top:15px"> <a style="color:#fff" href="https://github.com/future-team/phoenix-ui">Github</a> | <a style="color:#fff" href="http://future-team.github.io/phoenix-ui/examples/index.html">Examples</a> </p> </div> <p class="lead">phoenix-ui是基于React框架实现的移动端UI组件库。</p> <h2>安装</h2> <pre class="prettyprint lang-javascript"> $ npm install phoenix-ui --save </pre> <h2 style="color:red">特别注意</h2> <h3>针对dpr的屏幕兼容</h3> <p>在html文件的head元素中引入gfs-viewport.js文件，兼容不同手机不同dpr带来的适配问题。</p> <pre class="prettyprint lang-javascript"> <script src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script> </pre> <p>或直接放置代码：</p> <pre class="prettyprint lang-javascript"> <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> </pre> <h2>使用</h2> <h3>CommonJS & ES6</h3> <p>从2.0版本开始，建议都使用以下方式引入，可减少冗余代码的打包。</p> <pre class="prettyprint lang-javascript"> // 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> ); } </pre> <h3>Browser globals</h3> <pre class="prettyprint lang-javascript"> <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> ); } </pre> <h2>兼容性</h2> <ul> <li>Android 4.4.2+</li> <li>IOS 8+ </li> <li>Chrome</li> </ul> <h2>Version 2.0.0 重大修改</h2> <ol> <li>去掉TableView和FormGroup，新增List，有需要form元素的可自行在外层加上。</li> <li>去掉LoadingList组件，新增PullUp，简化API，修复滑动触发的BUG。</li> <li>去掉Whisper组件，修改Popover的使用方式和位置计算，优化位置显示。</li> <li>Input拆分成Input、Checkbox、Radio。Input新增phIcon、clear、visible等属性；不再需要外部onChange的使用方式，通过getValueCallback获取当前Input的值。</li> <li>新增SearchBar组件。</li> <li>新增Image组件，可定义图片在区域内的大小、位置和是否懒加载。</li> <li>Label组件使用方式改变，为统一规范用iconfont来替代。</li> <li>ph-filter合并到phoenix-ui中，可以通过`import PhFilter from 'phoenix-ui/lib/ph-filter'`引入使用，新增和修改部分API。</li> <li>多组件丰富API，具体参考文档。</li> <li>所有的回调函数更名，如clickCallback（事件+Callback）的命名标准（除了表单元素仍然使用的是react标准的onChange）。</li> <li>样式规范化。</li> </ol> <p>更详细的内容可参考wiki: <a href="https://wiki.sankuai.com/pages/viewpage.action?pageId=1024069009">Phoenix2.0升级说明</a></p> <p>之后每次更新会记录在该wiki中，根据版本详细记录每次更新：<a href="https://wiki.sankuai.com/pages/viewpage.action?pageId=1041158070">Phoenix2升级记录</a></p> <h2>旧项目升级步骤</h2> <p>详细内容查看wiki: <a href="https://wiki.sankuai.com/pages/viewpage.action?pageId=1002769742">旧项目升级phoenix2步骤</a></p> <h2>组件拓展</h2> <h3>组件继承</h3> <pre class="prettyprint lang-javascript"> 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> ) } } </pre> <h3>高阶组件</h3> <pre class="prettyprint lang-javascript"> 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 </pre> <h2>样式</h2> <h3>关于换肤</h3> <p>phoenix-ui默认和<a href="https://github.com/future-team/phoenix-styles">phoenix-styles</a> (组件样式库)配合使用。</p> <p>如果要换成ios主题的皮肤，在打包之后的css文件后再引入ios-skin.min.css：</p> <pre class="prettyprint lang-javascript"> ... <link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/ios-skin.min.css" /> </pre> <h3>关于布局</h3> <p>强烈建议使用rem布局，gfs-viewport会根据当前的dpr进行基础文字(html font-size)大小的切换，使用rem会根据该基础字体布局。<br/> 一般设计给出的是750宽的基于iphone6的UED，在当前尺寸基础下<strong>除以100</strong>，就是得到的rem值。<br/> 如：88px -> .88rem </p> <p>具体布局说明查看：<a href="https://wiki.sankuai.com/pages/viewpage.action?pageId=1047588200">phoenix2布局说明</a></p> <h3>其他</h3> <p>样式提供了对应的dom结构，还有能够全局应用的类：<a href="http://future-team.github.io/phoenix-styles/example/index.html">具体查看说明</a>。</p> <h2>推荐</h2> <h3>移动端基于Vue的UI组件库 - swan-ui</h3> <p>Github: <a href="https://github.com/future-team/swan-ui">https://github.com/future-team/swan-ui</a></p> <h3>PC端基于React的UI组件库 - eagle-ui</h3> <p>Github: <a href="https://github.com/future-team/eagle-ui">https://github.com/future-team/eagle-ui</a></p> <div style="margin:25px -20px -15px;padding:50px 24px 60px 24px;box-sizing:border-box;background-color:rgb(238,238,238);text-align:center;"> <p class="lead">使用中遇到问题请提交issue: <a href="https://github.com/future-team/phoenix-ui/issues">Phoenix-ui Issues</a></p> <p class="lead">For 点评的小伙伴, 可大象 @chenaibing 或 @min.xiao</p> </div>