1. 新建组件

点击左侧组件库图标,从组件库中选择一个组件,按住鼠标左键不动,将组件拖动至设计界面;或者直接鼠标放在该组件上点击,即可新建一个组件。

基本操作 - 图1

2. 复制组件

选中目标组件,点击选中框右上角的复制小图标即可复制。

基本操作 - 图2

或者点击右边面板的大纲树,然后鼠标选中目标组件,按住Option键,同时拖动鼠标不放,即可实现复制

基本操作 - 图3

3. 删除组件

选中目标组件,点击选中框右上角的删除小图标,即可实现删除。

基本操作 - 图4

或者选中目标组件,然后按delete键,即可实现删除。

基本操作 - 图5

或者切换到大纲树模式,然后按delete键,也可实现删除。

基本操作 - 图6

4. 移动组件

选中目标组件,然后按住鼠标左键不动,拖动组件到适当位置再松开鼠标,即可实现移动操作。

基本操作 - 图7

或者也可以操作大纲树,切换到大纲树模式,然后选中目标组件,拖动到适当位置即可实现移动操作。

基本操作 - 图8

5. 隐藏组件

切换到大纲树模式,鼠标移动到组件上,然后点击组件右侧的隐藏小图标,即可实现隐藏显示功能。

注:该隐藏操作只限于编辑器界面,不会影响到展示页面的显示。

基本操作 - 图9

6. 模式切换

编辑器分为“PC端”和“移动端”两种场景,支持“简体中文”和“English”的切换。切换方式点击上面面板上的相对应按钮即可。

基本操作 - 图10

基本操作 - 图11

7. 撤销重做

在设计器顶部面板右上角,点击撤销小图标基本操作 - 图12,对应的快捷键为Cmd+Z,可以实现撤销一步操作。
点击重做小图标基本操作 - 图13,对应的快捷键为Cmd+Shift+Z,可以实现恢复上一步操作。

基本操作 - 图14

8. 预览保存

在设计器顶部面板右上角,点击预览小图标基本操作 - 图15,对应的快捷键为Command+P,可以实现对当前内容进行预览的操作。预览页面不允许提交数据,只能展示布局样式。
点击保存小图标基本操作 - 图16,对应的快捷键为Command+S,可以将当前内容存储到服务器。

基本操作 - 图17

设计器支持的快捷键

Cmd(⌘) - Windows Ctrl
Option(⌥)
Shift(⇧)

命令 键绑定 何时
保存 S -
预览 P -
撤销 Z -
预览 Z -
删除组件 Backspace 组件获取焦点
复制组件 C 组件获取焦点
粘贴组件 V 组件获取焦点
剪切组件 X 组件获取焦点
向外层移动组件 组件获取焦点
向内层移动组件 组件获取焦点
同级向上移动组件 组件获取焦点
同级向下移动组件 组件获取焦点
向上选择组件 组件获取焦点
向下选择组件 组件获取焦点
向左选择组件 组件获取焦点
向右选择组件 组件获取焦点
取消选择组件 Escape 组件失去焦点

😋如果上述帮助文档未能解决您的问题,请联系 幸福的棉花糖