---
order: 1
zh-CN:
	title: 基础用法
	submit: 上架
	draft: 保存草稿
	preview: 预览
	grouped: 组件分组显示
	combined: 组件合并显示
	notImplemented: 仅作为演示，功能未开发
en-US:
	title: Basic usage
	submit: Submit
	draft: Draft
	preview: Preview
	grouped: Group
	combined: Combine
	notImplemented: Not Implmented
---

```jsx
import { Design, Button, Layout, Notify } from 'zent';

// ⚠️注意：这个示例里面代码的引入和实际使用时有一些区别。

// Please replace 'design/...' with 'zent/lib/design/...' in your own code
import configConf from 'design/components/config';
import ConfigEditor from 'design/components/config/ConfigEditor';
import whitespaceConf from 'design/components/whitespace';
import lineConf from 'design/components/line';

// 我们仅仅提供了少数几个 Design 组件作为示例，更多业务组件需要根据你的业务需求自己实现。
// If you use these two default design components, you have to 
// manually include the styles in your own code:
// import 'zent/css/design-config.css';
// import 'zent/css/design-whitespace.css';
// import 'zent/css/design-line.css';

const { Row, Col } = Layout;

const components = [
  Object.assign({}, configConf, {
    // 是否可以拖拽
    dragable: false,

    // 是否出现在底部的添加组件区域
    appendable: false,

    // 是否可以编辑，UMP里面有些地方config是不能编辑的
    // editable: true,

    configurable: false,

    highlightWhenSelect: false
  }),

  whitespaceConf,
  lineConf
];
const groupedComponents = [
  Object.assign({}, configConf, {
    // 是否可以拖拽
    dragable: false,

    // 是否出现在底部的添加组件区域
    appendable: false,

    // 是否可以编辑，UMP里面有些地方config是不能编辑的
    // editable: true,

    configurable: false,

    highlightWhenSelect: false
  }),

  Design.group('Group 1'),

  whitespaceConf,

  Design.group('Group 2'),
  
  lineConf
];

class Simple extends Component {
  state = {
    grouped: false,
    value: [
      {
        type: configConf.type,
        ...ConfigEditor.getInitialValue()
      }
    ]
  };

  onChange = newValue => {
    this.setState({
      value: newValue
    });
  };

  switchMode = () => {
    const { grouped } = this.state;

    this.setState({
      grouped: !grouped
    });
  };

  render() {
		const { grouped } = this.state;

    return (
      <div>
        <Design
          ref={this.saveDesign}
          cache
          cacheId="zent-design-test"
          confirmUnsavedLeave={false}
          components={grouped ? groupedComponents : components}
          value={this.state.value}
          onChange={this.onChange}
          scrollTopOffset={-270}
          globalConfig={window._global}
        />
        <Row className="design-example-actions">
          <Col span={2} offset={1}>
            <Button type="primary" onClick={this.submit}>
              {i18n.submit}
            </Button>
          </Col>
          <Col span={2} offset={1}>
            <Button onClick={this.notImplemented}>
              {i18n.draft}
            </Button>
          </Col>
          <Col span={2} offset={1}>
            <Button onClick={this.notImplemented}>
              {i18n.preview}
            </Button>
          </Col>
          <Col span={3} offset={1}>
            <Button onClick={this.switchMode}>
              {grouped ? '{i18n.combined}' : '{i18n.grouped}'}
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
  
  notImplemented() {
    Notify.error('{i18n.notImplemented}');
  }

  saveDesign = instance => {
    this.design = instance && instance.getDecoratedComponentInstance();
  };

  triggerDesignValidation() {
    return this.design.validate();
  }

  submit = () => {
    this.triggerDesignValidation()
      .then(() => {
        const data = Design.stripUUID(this.state.value);
        console.log(data);
        // submit this.state.value to server
        this.design.markAsSaved();
        Notify.success('提交成功');
      })
      .catch(validations => {
        console.log(validations);
      });
  };
}

ReactDOM.render(
  <Simple />
  , mountNode
);
```

<style>
.design-example-actions {
  margin-top: 20px;
}
</style>