看板可视设计模式
在看板管理页面,选中一条记录后,点击【设计】按钮,将打开看板设计页面。
对于
*.html看板模板文件,点击【可视模式】按钮,看板将打开展示页面并处于可视设计模式,
可以点击页面中的元素选中后,执行菜单项中的操作。
看板可视设计模式仅可以使用部分简单基础的看板功能,适用于不熟悉前端开发的设计人员。
快捷执行
当执行了某个插入/编辑操作后,此按钮将自动激活,点击后将可以直接执行上一次操作。
选择
-
下一个元素
选中当前元素的下一个同级元素 -
前一个元素
选中当前元素的上一个同级元素 -
子元素
选中当前元素的第一个子级元素 -
父元素
选中当前元素的父级元素 -
取消选择
取消选中当前元素
插入
-
绑定/替换图表
在当前选中的<div>元素上绑定/替换图表 -
外部后置插入
在当前选中元素后面插入元素 -
外部前置插入
在当前选中元素前面插入元素 -
内部后置插入
在当前选中元素内部的末尾插入元素 -
内部前置插入
在当前选中元素内部开头插入元素 -
插入图表
在指定位置插入<div>图表元素 -
插入网格布局
在指定位置插入以CSS的grid特性实现的<div>网格容器元素及多个网格条目子元素 -
插入弹性布局
在指定位置插入以CSS的flex特性实现的<div>弹性容器元素及多个弹性条目子元素 -
插入响应式弹性布局
在指定位置插入以CSS的flex特性实现的、可自适应手机/平板/桌面/大屏端的<div>响应式弹性布局元素 -
插入块元素
在指定位置插入<div>块元素 -
插入标题元素
在指定位置插入<h1>-<h6>标题元素 -
插入文本元素
在指定位置插入<label>文本标签元素 -
插入图片
在指定位置插入<img>图片元素 -
插入超链接
在指定位置插入<a>超链接元素 -
插入视频
在指定位置插入<video>视频元素 -
插入内嵌框体
在指定位置插入<iframe>外部网页内嵌框体元素
编辑
-
全局样式
编辑全局颜色、尺寸/位置/布局、字体样式(<body>元素上的style属性),应用于整个看板 -
全局图表主题
编辑全局图表主题(<body>元素上的dg-chart-theme属性),应用于整个看板内的图表 -
全局图表选项
编辑全局图表选项(<body>元素上的dg-chart-options属性),应用于整个看板内的图表 -
样式
编辑选中元素的颜色、尺寸/位置/布局、字体样式(元素上的style属性),应用于元素本身或其子元素 -
响应式弹性布局
编辑选中的响应式布局元素 -
图表主题
编辑选中<div>图表元素的图表主题(dg-chart-theme属性) -
图表配置
编辑选中<div>图表元素的图表配置(dg-chart-config-values属性) -
图表选项
编辑选中<div>图表元素的图表选项(dg-chart-options属性) -
文本内容
编辑选中元素的文本内容 -
元素设置
编辑选中文本/图片/超链接/视频/内嵌框体元素设置 -
元素ID
编辑元素的id属性
删除
-
删除元素
删除选中元素 -
解绑图表
将选中元素由图表元素复原为普通元素
更多
-
看板尺寸
调整看板预览尺寸,以调试看板在不同尺寸屏幕的自适应效果,此操作不会设置看板实际展示尺寸 -
元素边线
显示/隐藏看板内所有元素边线,便于区分和查找元素 -
刷新
重新加载看板页面,此操作会保留已编辑内容,当点击了页面内超链接跳转后,可以通过此刷新操作恢复原页面
企业版自
1.4.0版本起,看板可视编辑模式新增了如下功能。
插入(企业版)
-
看板表单
插入<form>看板表单元素 -
面板布局
插入以CSS的grid特性实现的<div>面板布局元素,包括标题元素、内容元素
编辑(企业版)
-
图表联动
编辑图表元素的图表联动功能 -
元素设置
编辑看板表单 -
复制/粘贴
复制/粘贴元素的样式、图表主题、图表选项、图表联动等设置
更多(企业版)
-
撤销操作
撤销上一次执行的操作 -
恢复操作
恢复上一次撤销的操作