xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
929 stars 242 forks source link

容器元素 #12

Open xinglie opened 4 years ago

xinglie commented 4 years ago

容器元素支持其它元素放在它内部,方便组织更复杂的界面关系 容器元素支持自身嵌套,可以无限级嵌套下去。容器元素目前开发了Table,H-Flexbox,V-Flexbox,如需要,可定制各种不同效果的容器元素。

向容器内添加其它元素

首先向编辑区添加H-Flex等容器元素。如图 image

拖动添加

拖动顶部其它元素到编辑区,当鼠标处于容器格子内时,相应的格子会有可放置指示,如下图 image 松开鼠标后,拖动的元素即放到当前格子内

点击添加

首先点击容器的格子,使格子处于激活状态,如下图 image 此时点击顶部元素时,相应的元素添加到当前激活的格子内

当格子内有其它元素填满,无法使用鼠标点击激活格子时,可以先鼠标点击选中格子内的元素,然后再按快捷键F即可激活当前格子

关于容器

容器元素比较特殊,因为需要承载其它元素,所以没办法像其它元素那样可以点击选中后直接拖动改变位置。 此时可以使用左上角的icon来拖动容器元素,此icon代表了整个容器元素。

关于格子

容器的每一个格子是一个小的编辑区,所以它的大部分操作同大的编辑区,比如右键菜单等,拉框选择等。

因为格子支持拉框选择元素,所以拉框选择与移动冲突,故容器元素不能在格子内按下鼠标进行移动操作,因为该动作被分配给了拉框选择。