组件布局

编辑
文档创建者:夏娃 (超级管理员 )     浏览次数:2772次     编辑次数:16次     最近更新:doreen0813 于 2017-10-11     

目录:

1、描述编辑

组件布局是指对各个组件显示在即时分析页面上的位置调整,包括网格布局自由布局

2、网格布局编辑

网格布局是指把平面按规则划分成多个单元格,每个组件占据一定数量的单元格,当屏幕大小发生变化时,随着屏幕实际宽高划分单元格,组件相对整个屏幕的比例不变。且组件的长宽比例是恒定的,如下图,我们拖曳三个组件至即时分析页面中,为其绑定数据:
222
从图中可以看出,当拖动图中组件调整大小时,网格布局会自动获取调整范围(单元格的倍数)。组件与组件之间的间隔是固定的,因此组件与组件不能叠加。组件始终吸顶,即只要组件顶部空隙宽度足够放下该组件,该组件一定会吸顶填入。
当浏览器分辨率调整时,网格布局中组件的相对位置和长宽比例不会变化,大小会根据浏览器的分辨率成等比例变化。在小分辨率下做好的模版拿到大屏播放的时候,网格布局能够自动放大填充大屏。如下图:
大分辨率下:
222
小分辨率下:
222
注:网格布局中文字大小并不会随浏览器的分辨率变化而变化,字体大小始终是设定的大小,组件大小随浏览器变化。故当文本组件中字体大小设置较大,而浏览器调整到较小时,文本组件会出现滚动条,如下图。请根据自身需要设置文本组件字体大小。
我们为上图拖入文本组件,在浏览器分辨率较小时预览,出现滚动条:
222

3、自由布局编辑

自由布局就是指组件位置由人工随意摆放的布局方式,组件想摆放在哪就摆放在哪,比如说我们将布局方式切换为自由布局,然后修改各个组件的大小,如下图,可以看到组件之间可以无缝叠加且拖拽随意,没有限制。
222

自由布局模版的组件宽度在第二次打开的时候会随浏览器分辨率按比例变化,但是高度不变,也不会吸顶放置。如下图,在小分辨率下,自由布局的模版宽度进行了自适应,高度保持原先不变:
222
自由布局的组件之间可随意重叠,两个组件的背景均设置为透明,即可做出如下图所示的叠加效果,
222

注:自由布局模式在模版编辑的时候不要做大范围的大小屏切换,详见FineBI使用注意事项

附件列表


主题: 新建仪表板
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(微信ID:frbiaoge)

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: