rem 是相对于 html 元素的 font-size 的一个单位。如果 html 上定义了 font-size: 20px;，则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

我们统一使用rem对页面进行整体缩放。强烈建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。

我们在 iphone6 上使用 1rem = 20px 来换算。

关于Rem可以参考 MDN上的定义

目前移动版的基础组件在 pm和parana-mobile-base工程里

工程由shepherd打包， herd启动，纯前端渲染

整体页面用flex布局，页头页底中间三部分

若designer版本高于或等于0.5.19, eevee的版本高于或等于0.3.0, 装修组件的state可以用数据缓存来实现返回记住位置

            
              oldState = this.props._initState
            
          

配合装修系统，若需要使用react-router的history对象，使用如下

            
              history = this.props.context
            
          

Header 在PM里调用方式 require("pm/header")

            
              <Header goback={ this.props.callBack } type="secondary">标题</Header>
            
          

可传参数

Button 在PM里调用方式 require("pm/button")

            
              <Button>主按钮</Button>
              <Button onClick={this.btnClick} type="secondary">次按钮</Button>
              <Button type="info">更次钮</Button>
              <br />
              <Button type="small">主小按钮</Button>
              <Button onClick={this.btnClick} type="secondary" className="btn-small">次小按钮</Button>
              <Button type="info" className="btn-small">更次小钮</Button>
              <br />
              <Button type="danger">Danger</Button>
              <Button disabled>Disabled</Button>
              <Button type="warning">Warning</Button>
              <Button htmlType="submit" type="success">Success</Button>
              <br />
              <Button type="large">大按钮</Button>
              <div className="btn-group">
                <Button type="warning">次按钮</Button>
                <Button>主按钮</Button>
              </div>
            
          

可传参数

Row、Col 在PM里调用方式 require("pm/row") require("pm/col")

            
              <Row>
                <Col span={2}>.col-2</Col>
                <Col span={2}>.col-2</Col>
                <Col span={2}>.col-2</Col>
                <Col span={2}>.col-2</Col>
                <Col span={2}>.col-2</Col>
                <Col span={2}>.col-2</Col>
              </Row>
              <Row>
                <Col span={4}>.col-4</Col>
                <Col span={8}>.col-8</Col>
              </Row>
              <Row>
                <Col span={4}>.col-4</Col>
                <Col span={4}>.col-4</Col>
                <Col span={4}>.col-4</Col>
              </Row>
              <Row>
                <Col span={6}>.col-6</Col>
                <Col span={6}>.col-6</Col>
              </Row>
              <Row>
                <Col span={4}>.col-4</Col>
                <Col span={4} offset={4}>.col-4</Col>
              </Row>
              <Row>
                <Col span={3} offset={3}>.col-3</Col>
                <Col span={3} offset={3}>.col-3</Col>
              </Row>
              <Row>
                <Col span={6} offset={2}>.col-6 </Col>
              </Row>
            
          

Col可传参数

Tabs 在PM中，调用方式 require("pm/tab")

            
              <Tab activeKey="1" onChange={this.callback} >
                <div tab="选项卡一" key="1"></div>
                <div tab="选项卡二" key="2"></div>
                <div tab="选项卡三" key="3"></div>
              </Tab>
              <Tab activeKey="2" type="card" onChange={this.callback} >
                <div tab="选项卡一" key="1"></div>
                <div tab="选项卡二" key="2"></div>
                <div tab="选项卡三" key="3"></div>
              </Tab>
            
          

可传参数

搜索包含两部分，一部分是搜索框，还有一部分是弹出层，弹出层内将出现推荐搜索词，历史搜索词

历史搜索词存于本地localStroge，右侧样例即可展示

            
              <SearchInput className="search-center-content" onClick={this.handleOnClick.bind(this)} readOnly="true"/>
              <SearchFilter isHide={this.state.searchFilterHide} onClick={this.handleOnClick.bind(this)}/>
            
          

SearchInput可传参数

SearchFilter可传参数

若使用pm的Form组件，配合pm的Input组件，可简便的完成输入校验和提交取值，以下为示例

            
              <Form onSubmit={this.handleSubmit.bind(this)} ref="exampleForm">
                <Input label="单行" placeholder="文字提示" type="text" />
                <InputDatePicker label="日期" placeholder="请选择日期"/>
                <FormGroup>
                  <Input onChange={this.onInputChange}name="name"  ref="input1" label="账号" placeholder="请输入账号" type="text" ref="username" defaultValue="buyer" pattern="^[\d_a-zA-Z\u4E00-\u9FA5]{5,25}$" required />
                  <Input label="邮箱" ref="input2" name="email" placeholder="请输入邮箱" type="text" />
                  <Input label="密码" ref="input3" name="password" placeholder="请输入密码" type="password" />
                </FormGroup>
                <Button htmlType="submit" className="btn -large">提交</Button>
              </Form>
            
          

可传参数

Input 组件可自动完成校验，不需要开发人员再次在change事件校验, 目前的版本若要使用Input组件必须在PM的Form组件下

            
              <Input onChange={this.onInputChange}name="name"  ref="input1" label="账号" placeholder="请输入账号" type="text" ref="username" defaultValue="buyer" pattern="^[\d_a-zA-Z\u4E00-\u9FA5]{5,25}$" required />
            
          

可传参数

Switch 在PM中，调用方式 require("pm/switch")

            
              <Switch checked="true" defaultChecked="false"
              onChange={ this.switchOnChange } />
            
          

可传参数

input类型的时间选择器 在PM中
调用方式：require("pm/inputDatePicker")

            
              <InputDatePicker className="date-picker" label="日期" placeholder="请选择日期" defaultValue="1993-07-19"/>
            
          

可传参数

returnTop 返回顶部组件 无需传参数,直接调用

            
              <returnTop />
            
          

在common中，调用方式：require('common/modal')

弹窗打开方式：PubSub.publish("showModal");
弹窗关闭方式：PubSub.publish("closeModal"); 如右可模拟操作。

按钮显示：
1. 仅title：    居中的“title”按钮
2. 仅detail：“detail”按钮 及 “关闭”按钮
3. 都传时： “detail”按钮 及 “title”按钮
4. 都不传时： 居中的“关闭”按钮

按钮回调：
leftClick：左边按钮点击的回调
rightClick：右边按钮点击的回调以及一个按钮时的回调
exit：当上面两个参数不传时，由必传的exit执行按钮的点击回调

            
              <Modal detail="返回首页" title="查看订单"
              hideOverlay="false"
              iconClass="icon-newpm-finger-copy success"
              leftClick={this.props.leftClick}
              rightClick={this.props.rightClick}
              exit={this.close.bind(this)}>
              { this.props.children } </Modal>
            
          

可传参数

在common中 调用方式 require("common/popup")

弹框打开方式：PubSub.publish("popup.show");
弹框关闭方式：PubSub.publish("popup.close");

            
              <Popup className="popup" headerTitle="这是头部" headerHide="false">这是弹框中的内容</Popup>
            
          

可传参数

在common中 调用方式 require("common/comment_star")

            
              <CommentStar starType="get" stars={3} max={5}/>
              <CommentStar starType="set" defaultStyle="fill" max={5}/>
            
          

可传参数