mirror of
https://github.com/nocobase/nocobase
synced 2024-11-16 10:56:17 +00:00
a6eebb940f
* 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>
52 lines
1.8 KiB
Markdown
Executable File
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)
|