我们接下来来介绍我们的编辑器，以及简要的使用方法。

按区域从左到右依次是 功能区、画布区域、属性区。我们接下来来依次介绍。

一、功能区

功能区包含了三个tab，分别是组件、大纲和代码。

1. 组件tab

组件tab中包含了目前编辑器支持的所有组件，组件分为三类，容器类、基础类、和商品类，由这三种组件，可以组合出许多复杂的交互以及展示效果。比如图片容器作为背景，内嵌一个多状态组件，就可以做出类似于tab切换的效果。

2. 大纲tab

组件可以互相嵌套、然后位置也可以覆盖和重叠，因此有时候比如我们想要选中某个被覆盖的组件，那如果在画布中就比较难选择，而在大纲视图中，就可以通过选择组件树种的组件，轻松选中要设置和修改的组件。