看板可视设计模式

本文档仅提供2.0API版本的相关功能说明,对于1.0API版本的功能,请参考旧版文档。
在看板管理页面,选中一条记录后,点击【设计】按钮,将打开看板设计页面。 对于*.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>面板布局元素,包括标题元素、内容元素

编辑(企业版)

  • 图表联动
    编辑图表元素的图表联动功能
  • 元素设置
    编辑看板表单
  • 复制/粘贴
    复制/粘贴元素的样式、图表主题、图表选项、图表联动等设置

更多(企业版)

  • 撤销操作
    撤销上一次执行的操作
  • 恢复操作
    恢复上一次撤销的操作
 
京ICP备18055183号-1
© 2018-2024 datagear.tech 北京溪歌科技有限公司
登录