uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-drawer-demo-basic","tags":[],"filepath":"site/components/drawer/demo/basic.md","directory":"components/drawer/demo","filename":"basic","meta":{"title":"基本使用","description":"\n可以同时展开多个面板，这个例子默认展开了第一个。\n","order":"0","filepath":"site/components/drawer/demo/basic.md","filename":"basic","directory":"components/drawer/demo","id":"components-drawer-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcoreButton = require('uxcore-button');\n\nvar _uxcoreButton2 = _interopRequireDefault(_uxcoreButton);\n\nvar _uxcoreForm = require('uxcore-form');\n\nvar _uxcoreForm2 = _interopRequireDefault(_uxcoreForm);\n\nvar _uxcoreDrawer = require('uxcore-drawer');\n\nvar _uxcoreDrawer2 = _interopRequireDefault(_uxcoreDrawer);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Constants = _uxcoreForm2.default.Constants,\n Input = _uxcoreForm2.default.InputFormField,\n Date = _uxcoreForm2.default.DateFormField,\n TextArea = _uxcoreForm2.default.TextAreaFormField,\n Validators = _uxcoreForm2.default.Validators;\n\n\nvar text = '\\n A dog is a type of domesticated animal.\\n Known for its loyalty and faithfulness,\\n it can be found as a welcome guest in many households across the world.\\n';\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n basicVisible: false,\n menuVisible: false,\n visible: false,\n mode: Constants.MODE.EDIT,\n zoneVisible: false\n };\n _this.handleChangeMode = _this.handleChangeMode.bind(_this);\n _this.handleOk = _this.handleOk.bind(_this);\n _this.showDrawer = _this.showDrawer.bind(_this);\n _this.closeDrawer = _this.closeDrawer.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChangeMode',\n value: function handleChangeMode() {\n var mode = this.state.mode;\n\n this.setState({\n mode: mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n this.closeDrawer();\n }\n }, {\n key: 'showDrawer',\n value: function showDrawer(state) {\n this.setState(_defineProperty({}, state, true));\n }\n }, {\n key: 'closeDrawer',\n value: function closeDrawer(state) {\n this.setState(_defineProperty({}, state, false));\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var _state = this.state,\n visible = _state.visible,\n mode = _state.mode,\n basicVisible = _state.basicVisible,\n menuVisible = _state.menuVisible,\n zoneVisible = _state.zoneVisible;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { className: 'basic-demo' },\n React.createElement(\n 'h2',\n null,\n '\\u5DE6\\u4FA7\\u5BFC\\u822A\\uFF0C\\u65E0\\u64CD\\u4F5C\\u6309\\u94AE\\uFF0C\\u70B9\\u51FB\\u906E\\u7F69\\u5C42\\u53EF\\u4EE5\\u5173\\u95ED'\n ),\n React.createElement(\n _uxcoreButton2.default,\n { onClick: this.showDrawer.bind(this, 'menuVisible') },\n ' \\u57FA\\u672C\\u4FE1\\u606F '\n )\n ),\n React.createElement(\n 'div',\n { className: 'basic-demo' },\n React.createElement(\n 'h2',\n null,\n '\\u5C55\\u793A\\u57FA\\u672C\\u4FE1\\u606F\\uFF0C\\u65E0\\u64CD\\u4F5C\\u6309\\u94AE\\uFF0C\\u70B9\\u51FB\\u906E\\u7F69\\u5C42\\u53EF\\u4EE5\\u5173\\u95ED'\n ),\n React.createElement(\n 'p',\n null,\n '\\u906E\\u7F69\\u5C42\\u5206\\u4E3A small(400px) normal(780px)\\uFF0Clarge(1160px)\\u4E09\\u79CDsize,\\u4E5F\\u53EF\\u81EA\\u5B9A\\u4E49width'\n ),\n React.createElement(\n _uxcoreButton2.default,\n { onClick: this.showDrawer.bind(this, 'basicVisible') },\n ' \\u57FA\\u672C\\u4FE1\\u606F '\n )\n ),\n React.createElement(\n 'div',\n { className: 'basic-demo' },\n React.createElement(\n 'h2',\n null,\n '\\u53EF\\u4EE5\\u653E\\u5165\\u64CD\\u4F5C\\uFF0C\\u5982\\u8868\\u5355\\u7684\\u586B\\u5199'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5982\\u679C\\u662F\\u5305\\u542B\\u64CD\\u4F5C\\u884C\\u4E3A\\uFF0C\\u53EF\\u50CFUxcore.dialog\\u4E00\\u6837\\u81EA\\u5B9A\\u4E49footer\\uFF0C\\u4E14\\u6307\\u5B9A\\u5F39\\u7A97\\u7684maskClosable\\u4E3Afalse\\uFF0C\\u9632\\u6B62\\u8BEF\\u64CD\\u4F5C'\n ),\n React.createElement(\n _uxcoreButton2.default,\n { onClick: this.showDrawer.bind(this, 'visible') },\n '\\u64CD\\u4F5C'\n )\n ),\n React.createElement(\n _uxcoreDrawer2.default,\n {\n visible: menuVisible,\n title: '\\u83DC\\u5355\\u5BFC\\u822A',\n size: 'small',\n placement: 'left',\n showFooter: false,\n closable: false,\n onCancel: this.closeDrawer.bind(this, 'menuVisible')\n },\n React.createElement(\n 'ul',\n { className: 'demo-menu' },\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E00'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E8C'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E09'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u56DB'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u4E94'\n ),\n React.createElement(\n 'li',\n null,\n '\\u83DC\\u5355\\u516D'\n )\n )\n ),\n React.createElement(\n _uxcoreDrawer2.default,\n {\n visible: basicVisible,\n title: '\\u57FA\\u672C\\u4FE1\\u606F\\u5C55\\u793A',\n width: 600,\n placement: 'right',\n showFooter: false,\n closable: false,\n onCancel: this.closeDrawer.bind(this, 'basicVisible')\n },\n React.createElement(\n 'p',\n null,\n 'text text text texttext'\n ),\n React.createElement(\n 'p',\n null,\n 'text text text texttext'\n ),\n React.createElement(\n 'p',\n null,\n 'text text text texttext'\n ),\n React.createElement(\n 'p',\n null,\n 'text text text texttext'\n ),\n React.createElement(\n _uxcoreButton2.default,\n {\n onClick: this.showDrawer.bind(this, 'zoneVisible'),\n style: { marginTop: '20px' },\n key: 'show'\n },\n '\\u4E8C\\u7EA7\\u62BD\\u5C49'\n ),\n React.createElement(\n _uxcoreDrawer2.default,\n {\n visible: zoneVisible,\n title: '\\u4E8C\\u7EA7\\u7EC4\\u4EF6',\n size: 'normal',\n placement: 'right',\n onOk: this.handleOk,\n closable: false,\n showFooter: false,\n onCancel: this.closeDrawer.bind(this, 'zoneVisible')\n },\n React.createElement(\n 'div',\n null,\n '\\u8FD9\\u662F\\u7B2C\\u4E8C\\u5C42\\u7684\\u62BD\\u5C49\\u7EC4\\u4EF6'\n )\n )\n ),\n React.createElement(\n _uxcoreDrawer2.default,\n {\n visible: visible,\n title: '\\u62BD\\u5C49\\u7EC4\\u4EF6',\n size: 'small',\n placement: 'right',\n onOk: this.handleOk,\n maskClosable: false,\n onCancel: this.closeDrawer.bind(this, 'visible'),\n footer: [React.createElement(\n 'p',\n { className: 'showNum' },\n '\\u5DF2\\u9009\\uFF1A33333'\n ), React.createElement(\n _uxcoreButton2.default,\n { type: 'secondary', onClick: this.handleChangeMode, key: 'changeMode' },\n '\\u8F6C\\u6362\\u6A21\\u5F0F'\n ), React.createElement(\n _uxcoreButton2.default,\n { onClick: this.handleOk.bind(this, 'visible'), key: 'submit' },\n '\\u63D0\\u4EA4'\n )]\n },\n React.createElement(\n 'div',\n { className: 'demo-mode', style: { height: '1000px' } },\n React.createElement(\n _uxcoreForm2.default,\n {\n ref: function ref(c) {\n _this2.form = c;\n },\n className: 'demo-basic-form',\n jsxvalues: {\n theme: 'Form 展示',\n location: 'Uxcore 站点',\n date: ['2015-10-15', '2015-11-15'],\n content: '这是一个 Form 的模式转换页面。'\n },\n jsxmode: mode\n },\n React.createElement(Input, { jsxname: 'theme', jsxlabel: '\\u4E3B\\u9898', required: true, jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u4E3B\\u9898' }),\n React.createElement(Input, {\n jsxname: 'location',\n jsxlabel: '\\u5730\\u70B9',\n required: true,\n jsxplaceholder: '\\u8BF7\\u8F93\\u5165\\u5730\\u70B9',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n }),\n React.createElement(Date, { jsxname: 'date', jsxlabel: '\\u65F6\\u95F4', jsxtype: 'cascade', autoMatchWidth: true }),\n React.createElement(TextArea, {\n jsxname: 'content',\n jsxlabel: '\\u5185\\u5BB9',\n required: true,\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '不能为空' }]\n })\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-drawer-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import Button from 'uxcore-button';\nimport Form from 'uxcore-form';\nimport Drawer from 'uxcore-drawer';\n\nconst {\n Constants,\n InputFormField: Input,\n DateFormField: Date,\n TextAreaFormField: TextArea,\n Validators,\n} = Form;\n\nconst text = `\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n`;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n basicVisible: false,\n menuVisible: false,\n visible: false,\n mode: Constants.MODE.EDIT,\n zoneVisible: false,\n };\n this.handleChangeMode = this.handleChangeMode.bind(this);\n this.handleOk = this.handleOk.bind(this);\n this.showDrawer = this.showDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n }\n\n handleChangeMode() {\n const { mode } = this.state;\n this.setState({\n mode: mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,\n });\n }\n\n handleOk() {\n this.closeDrawer();\n }\n\n showDrawer(state) {\n this.setState({\n [state]: true,\n });\n }\n\n closeDrawer(state) {\n this.setState({\n [state]: false,\n });\n }\n\n render() {\n const {\n visible, mode, basicVisible, menuVisible, zoneVisible,\n } = this.state;\n return (\n <div>\n <div className=\"basic-demo\">\n <h2>左侧导航，无操作按钮，点击遮罩层可以关闭</h2>\n <Button onClick={this.showDrawer.bind(this, 'menuVisible')}> 基本信息 </Button>\n </div>\n <div className=\"basic-demo\">\n <h2>展示基本信息，无操作按钮，点击遮罩层可以关闭</h2>\n <p>遮罩层分为 small(400px) normal(780px)，large(1160px)三种size,也可自定义width</p>\n <Button onClick={this.showDrawer.bind(this, 'basicVisible')}> 基本信息 </Button>\n </div>\n <div className=\"basic-demo\">\n <h2>可以放入操作，如表单的填写</h2>\n <p>如果是包含操作行为，可像Uxcore.dialog一样自定义footer，且指定弹窗的maskClosable为false，防止误操作</p>\n <Button onClick={this.showDrawer.bind(this, 'visible')}>操作</Button>\n </div>\n <Drawer\n visible={menuVisible}\n title=\"菜单导航\"\n size=\"small\"\n placement=\"left\"\n showFooter={false}\n closable={false}\n onCancel={this.closeDrawer.bind(this, 'menuVisible')}\n >\n <ul className=\"demo-menu\">\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n <li>菜单一</li>\n <li>菜单二</li>\n <li>菜单三</li>\n <li>菜单四</li>\n <li>菜单五</li>\n <li>菜单六</li>\n </ul>\n </Drawer>\n\n <Drawer\n visible={basicVisible}\n title=\"基本信息展示\"\n width={600}\n placement=\"right\"\n showFooter={false}\n closable={false}\n onCancel={this.closeDrawer.bind(this, 'basicVisible')}\n >\n <p>text text text texttext</p>\n <p>text text text texttext</p>\n <p>text text text texttext</p>\n <p>text text text texttext</p>\n <Button\n onClick={this.showDrawer.bind(this, 'zoneVisible')}\n style={{ marginTop: '20px' }}\n key=\"show\"\n >\n 二级抽屉\n </Button>\n <Drawer\n visible={zoneVisible}\n title=\"二级组件\"\n size=\"normal\"\n placement=\"right\"\n onOk={this.handleOk}\n closable={false}\n showFooter={false}\n onCancel={this.closeDrawer.bind(this, 'zoneVisible')}\n >\n <div>这是第二层的抽屉组件</div>\n </Drawer>\n </Drawer>\n <Drawer\n visible={visible}\n title=\"抽屉组件\"\n size=\"small\"\n placement=\"right\"\n onOk={this.handleOk}\n maskClosable={false}\n onCancel={this.closeDrawer.bind(this, 'visible')}\n footer={[\n <p className=\"showNum\">已选：33333</p>,\n <Button type=\"secondary\" onClick={this.handleChangeMode} key=\"changeMode\">转换模式</Button>,\n <Button onClick={this.handleOk.bind(this, 'visible')} key=\"submit\">提交</Button>,\n ]}\n >\n <div className=\"demo-mode\" style={{ height: '1000px' }}>\n <Form\n ref={(c) => { this.form = c; }}\n className=\"demo-basic-form\"\n jsxvalues={{\n theme: 'Form 展示',\n location: 'Uxcore 站点',\n date: ['2015-10-15', '2015-11-15'],\n content: '这是一个 Form 的模式转换页面。',\n }}\n jsxmode={mode}\n >\n <Input jsxname=\"theme\" jsxlabel=\"主题\" required jsxplaceholder=\"请输入主题\" />\n <Input\n jsxname=\"location\"\n jsxlabel=\"地点\"\n required\n jsxplaceholder=\"请输入地点\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n <Date jsxname=\"date\" jsxlabel=\"时间\" jsxtype=\"cascade\" autoMatchWidth />\n <TextArea\n jsxname=\"content\"\n jsxlabel=\"内容\"\n required\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '不能为空' },\n ]}\n />\n </Form>\n </div>\n\n </Drawer>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-drawer-demo-basic'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

可以同时展开多个面板，这个例子默认展开了第一个。

import Button from 'uxcore-button';
import Form from 'uxcore-form';
import Drawer from 'uxcore-drawer';

const {
  Constants,
  InputFormField: Input,
  DateFormField: Date,
  TextAreaFormField: TextArea,
  Validators,
} = Form;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      basicVisible: false,
      menuVisible: false,
      visible: false,
      mode: Constants.MODE.EDIT,
      zoneVisible: false,
    };
    this.handleChangeMode = this.handleChangeMode.bind(this);
    this.handleOk = this.handleOk.bind(this);
    this.showDrawer = this.showDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);
  }

  handleChangeMode() {
    const { mode } = this.state;
    this.setState({
      mode: mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
    });
  }

  handleOk() {
    this.closeDrawer();
  }

  showDrawer(state) {
    this.setState({
      [state]: true,
    });
  }

  closeDrawer(state) {
    this.setState({
      [state]: false,
    });
  }

  render() {
    const {
      visible, mode, basicVisible, menuVisible, zoneVisible,
    } = this.state;
    return (
      <div>
        <div className="basic-demo">
          <h2>左侧导航，无操作按钮，点击遮罩层可以关闭</h2>
          <Button onClick={this.showDrawer.bind(this, 'menuVisible')}> 基本信息 </Button>
        </div>
        <div className="basic-demo">
          <h2>展示基本信息，无操作按钮，点击遮罩层可以关闭</h2>
          <p>遮罩层分为 small(400px) normal(780px)，large(1160px)三种size,也可自定义width</p>
          <Button onClick={this.showDrawer.bind(this, 'basicVisible')}> 基本信息 </Button>
        </div>
        <div className="basic-demo">
          <h2>可以放入操作，如表单的填写</h2>
          <p>如果是包含操作行为，可像Uxcore.dialog一样自定义footer，且指定弹窗的maskClosable为false，防止误操作</p>
          <Button onClick={this.showDrawer.bind(this, 'visible')}>操作</Button>
        </div>
        <Drawer
          visible={menuVisible}
          title="菜单导航"
          size="small"
          placement="left"
          showFooter={false}
          closable={false}
          onCancel={this.closeDrawer.bind(this, 'menuVisible')}
        >
          <ul className="demo-menu">
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
          </ul>
        </Drawer>

        <Drawer
          visible={basicVisible}
          title="基本信息展示"
          width={600}
          placement="right"
          showFooter={false}
          closable={false}
          onCancel={this.closeDrawer.bind(this, 'basicVisible')}
        >
          <p>text text text texttext</p>
          <p>text text text texttext</p>
          <p>text text text texttext</p>
          <p>text text text texttext</p>
          <Button
            onClick={this.showDrawer.bind(this, 'zoneVisible')}
            style={{ marginTop: '20px' }}
            key="show"
          >
            二级抽屉
          </Button>
          <Drawer
            visible={zoneVisible}
            title="二级组件"
            size="normal"
            placement="right"
            onOk={this.handleOk}
            closable={false}
            showFooter={false}
            onCancel={this.closeDrawer.bind(this, 'zoneVisible')}
          >
            <div>这是第二层的抽屉组件</div>
          </Drawer>
        </Drawer>
        <Drawer
          visible={visible}
          title="抽屉组件"
          size="small"
          placement="right"
          onOk={this.handleOk}
          maskClosable={false}
          onCancel={this.closeDrawer.bind(this, 'visible')}
          footer={[
            <p className="showNum">已选：33333</p>,
            <Button type="secondary" onClick={this.handleChangeMode} key="changeMode">转换模式</Button>,
            <Button onClick={this.handleOk.bind(this, 'visible')} key="submit">提交</Button>,
          ]}
        >
          <div className="demo-mode" style={{ height: '1000px' }}>
            <Form
              ref={(c) => { this.form = c; }}
              className="demo-basic-form"
              jsxvalues={{
                theme: 'Form 展示',
                location: 'Uxcore 站点',
                date: ['2015-10-15', '2015-11-15'],
                content: '这是一个 Form 的模式转换页面。',
              }}
              jsxmode={mode}
            >
              <Input jsxname="theme" jsxlabel="主题" required jsxplaceholder="请输入主题" />
              <Input
                jsxname="location"
                jsxlabel="地点"
                required
                jsxplaceholder="请输入地点"
                jsxrules={[
                  { validator: Validators.isNotEmpty, errMsg: '不能为空' },
                ]}
              />
              <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
              <TextArea
                jsxname="content"
                jsxlabel="内容"
                required
                jsxrules={[
                  { validator: Validators.isNotEmpty, errMsg: '不能为空' },
                ]}
              />
            </Form>
          </div>

        </Drawer>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-drawer-demo-basic'));

当需要一个面板来做页面外操作，比如切换导航、应用中心等。当需要一个面板来控制父窗体的内容，承载的信息量介于弹窗与新页面之间，比如新建、导入等。当需要一个面板来预览内容，承载的信息量介于弹窗与新页面之间

Props

参数	说明	类型	默认值
title	Title of the drawer	String/React.Element	无
visible	current drawer's visible status	Boolean	false
placement	current drawer's direction	left/right	right
size	current drawer's size	small(400px)/normal(780px),large(1160px)	noraml
onOk	the callback when ok clicked	function	无
onCancel	the callback when dialog closed	function	无
width	drawer width	String or Number
footer	footer of the drawer	React.Element
showFooter	show footer of the drawer	Boolean	true
closable	whether show close button and click mask to close	Boolean	true
maskClosable	whether click mask to close, this prop will be ignored if set closable prop to false	Boolean	true
locale	国际化(包括 `zh-cn`, `en-us`, 和 `pl-pl`)	String	`zh-cn`
className	additional className for drawer	string
wrapClassName	additional className for drawer wrap	string	`vertical-center-dailog` for vertical align the drawer
style	Root style for drawer element.Such as width, height	Object	{}
zIndex		Number
bodyStyle	body style for drawer body element.Such as height	Number	{}

Usage

1、基本信息预览，点击遮罩层可以关闭

closeDrawer(state) {
    this.setState({
      [state]: false,
    });
  },

 <Drawer
  visible={menuVisible}
  title="菜单导航"
  size="small"
  placement="left"
  showFooter={false}
  closable={false}
  onCancel={this.closeDrawer.bind(this, 'menuVisible')}
    >
    <ul className="demo-menu">
        <li>菜单一</li>
        <li>菜单二</li>
        <li>菜单三</li>
        <li>菜单四</li>
        <li>菜单五</li>
        <li>菜单六</li>
      </ul>
  </Drawer>

2、包含相应的操作，如果是包含操作行为，可像Uxcore.dialog一样自定义footer，且指定弹窗的maskClosable为false，防止误操作

 <Drawer
      visible={visible}
      title="抽屉组件"
      size="normal"
      placement="right"
      onOk={this.handleOk}
      maskClosable={false}
      onCancel={this.closeDrawer.bind(this, 'visible')}
      footer={}
    >
    <div className="demo-mode">
        <Form
          ref={(c) => { this.form = c; }}
          className="demo-basic-form"
          jsxvalues={{
             theme: 'Form 展示',
             location: 'Uxcore 站点',
             date: ['2015-10-15', '2015-11-15'],
             content: '这是一个 Form 的模式转换页面。',
          }}
          jsxmode={mode}
        >
       <Input jsxname="theme" jsxlabel="主题" required jsxplaceholder="请输入主题" />
       <Input
          jsxname="location"
          jsxlabel="地点"
          required
          jsxplaceholder="请输入地点"
          jsxrules={[
                { validator: Validators.isNotEmpty, errMsg: '不能为空' },
             ]}
        />
          <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth />
           <TextArea
            jsxname="content"
            jsxlabel="内容"
            required
            jsxrules={[
               { validator: Validators.isNotEmpty, errMsg: '不能为空' },
              ]}
            />
      </Form>
       </div>
 </Drawer>

3、二级抽屉

<Drawer
  visible={basicVisible}
  title="基本信息展示"
  width={600}
  placement="right"
  showFooter={false}
  closable={false}
  onCancel={this.closeDrawer.bind(this, 'basicVisible')}
>
<p>text text text texttext</p>
<p>text text text texttext</p>
<p>text text text texttext</p>
<p>text text text texttext</p>
<Button
  onClick={this.showDrawer.bind(this, 'zoneVisible')}
  style={{ marginTop: '20px' }}
  key="show"
>
二级抽屉
</Button>
  <Drawer
    visible={zoneVisible}
    title="二级组件"
    size="normal"
    placement="right"
    onOk={this.handleOk}
    closable={false}
    showFooter={false}
    onCancel={this.closeDrawer.bind(this, 'zoneVisible')}
  >
  <div>这是第二层的抽屉组件</div>
  </Drawer>
</Drawer>