| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer } from 'antd' |
| | | import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import zhCN from '@/locales/zh-CN/mob.js' |
| | |
| | | width="300" |
| | | className="menu-style-drawer" |
| | | closable={true} |
| | | maskClosable={false} |
| | | onClose={this.onCloseDrawer} |
| | | maskStyle={{opacity: 0.1}} |
| | | visible={this.state.visible} |
| | |
| | | label={<Icon title="圆角" type="radius-setting" />} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> |
| | | <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |
| | | {options.includes('margin') ? <Panel header="外边距" key="margin"> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="上边距" type="arrow-up"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="下边距" type="arrow-down"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="左边距" type="arrow-left"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="右边距" type="arrow-right"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> : null} |
| | | {options.includes('padding') ? <Panel header="内边距" key="padding"> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="上边距" type="arrow-up"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="下边距" type="arrow-down"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="左边距" type="arrow-left"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Col span={24}> |
| | | <Form.Item |
| | | colon={false} |
| | | label={<Icon title="右边距" type="arrow-right"/>} |
| | | labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } |
| | | > |
| | | <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> |
| | | </Form.Item> |
| | |
| | | </Panel> : null} |
| | | </Collapse> : null} |
| | | </Form> |
| | | <div style={{textAlign: 'right'}}> |
| | | <Button type="link" style={{color: '#ffffff', marginTop: '20px'}} onClick={this.onCloseDrawer}>关闭</Button> |
| | | </div> |
| | | </div> |
| | | </Drawer> |
| | | ) |