nocobase/docs/zh-CN/manual/quick-start/ui-editor-mode.md
chenos a6eebb940f
feat: update docs (#990)
* feat: improve code

* feat: update docs

* feat: update docs

* Update index.md

* Update features.md

* Update when.md

* Update contributing.md

* Update translations.md

* feat: clean up

* Add files via upload

* Update the-first-app.md

* Update plugins.md

* Update a-b-c.md

* Update blocks.md

* feat: update docs

* Add files via upload

* Update charts.md

* feat: update navs

* Update index.md

* Update index.md

* Update features.md

* Update index.md

* Update docker-compose.md

* Update create-nocobase-app.md

* Update git-clone.md

* Update contributing.md

* Update translations.md

* Update plugins.md

* Update the-first-app.md

* Add files via upload

* Update charts.md

* Update charts.md

* Update a-b-c.md

* Update collections.md

* Update menus.md

* Update menus.md

Co-authored-by: Zhou <zhou.working@gmail.com>
2022-10-31 11:52:17 +08:00

52 lines
1.8 KiB
Markdown
Executable File

# 界面配置模式
NocoBase 采用所见即所得的方式来配置界面。点击右上角的`UI Editor`按钮,即可切换配置模式和使用模式。进入配置模式之后,界面上各处将会出现橙色的配置入口。
![ui-editor.gif](./ui-editor-mode/ui-editor.gif)
通常,配置项入口会出现在元素的右上角。
## 菜单项配置
将鼠标移到菜单项上,在右上角即可以看到拖拽排序按钮、配置项按钮,可以编辑、移动、插入、删除。
![menu-config.jpg](./ui-editor-mode/menu-config.jpg)
## 区块配置
将鼠标移到一个区块上,在右上角即可以看到拖拽排序按钮、新增区块按钮、配置项按钮。
![block-config.jpg](./ui-editor-mode/block-config.jpg)
不同的区块还会有一些自己独有的配置项。比如表格区块,将鼠标移到表头上即可以在右上角看到表头的配置项;在表头最右侧还可以看到表格列的配置项。
![block-config-2.jpg](./ui-editor-mode/block-config-2.jpg)
![block-config-3.jpg](./ui-editor-mode/block-config-3.jpg)
## 操作配置
在区块中可以看到操作的配置入口,这些入口在不同的区块里会出现在不同的位置。
比如表格区块,在右上方可以看到针对表格数据的操作:
![action-config-1.jpg](./ui-editor-mode/action-config-1.jpg)
在操作列的表头里可以看到针对单行数据的操作:
![action-config-2.jpg](./ui-editor-mode/action-config-2.jpg)
在详情区块的右上角可以看到针对详情的操作:
![action-config-3.jpg](./ui-editor-mode/action-config-3.jpg)
在表单区块底部可以看到针对表单的操作:
![action-config-4.jpg](./ui-editor-mode/action-config-4.jpg)
## 标签页配置
在弹窗或抽屉里,可以添加多个标签页,用于承载不同的区块。
![tab-config.jpg](./ui-editor-mode/tab-config.jpg)