码良新技能 桌面端页面制做
最近码良迎来了一波新功能的上线，并毫无保留地继续进行了代码开源-赶忙star关注 。新上线的功能有桌面端页面制做、”楼层模式“、”正宗“布局组件（容器组件）的开发能力、组件封装、word 文档解析、psd 解析等平台功能和能力。html
资源可贵赶忙先关注，而后后续学习。git
本文将围绕一些具体例子来介绍码良桌面端页面制做功能。github
选择画布
画布是码良新引入的一个概念，指的是场景区内用于组件摆放的一个区域，画布的高度可拓展，可是宽度是不能伸缩的。渲染器的页面适配主要是对不一样宽度画布生成的页面在不一样宽度设备上的适配，所以，咱们主要关注画布宽度。ide
引入画布概念之后，码良内置了 4 个画布，其中三个为移动端画布，剩下一个为桌面端画布。参见下图。布局
因为制做的是桌面端页面，首先咱们点击选择最宽的那个画布指示条，切换到桌面画布。学习
这时，会询问是否须要切换到”楼层模式“spa
那么什么是楼层模式呢.net
楼层模式
咱们看个简单的例子code
能够看到，在属性面板能够为某个组件设置布局模式。布局模式决定了其直接子组件的位置排布方式，当设置为”楼层模式“时，子组件如楼层般依次向下扩展，当设置为”自由模式“时，子组件上下堆叠，位置可自由挪动。htm
实践下来，”楼层模式“更适合桌面端页面的制做。因此当切换画布到桌面画布时，若是根组件（root）的布局模式不是”楼层模式“，则会询问是否须要切换到楼层模式，也就是上节出现的状况。
高度自动
设置了”楼层模式“的组件，因其子组件依次向下排布，咱们能够将该组件的高度禁用（样式面板-高-禁用，值实际被设置为 auto），这样组件就能够根据子组件的累加高度自动得到高度。
横向布局
“楼层模式”方便了组件沿页面纵向的布局，那么须要组件横向排布时如何作呢？多栏布局组件登场。
页面结构
桌面端页面的内容组织方式一般为顶栏、内容区、页脚，也可能会有一个或多个侧边栏。
结合楼层模式和多栏布局组件，咱们能够轻松实现以上各类页面结构。以上图中左下角的页面结构为例，使用码良来实现它。
能够看到，咱们经过使用”空容器“组件和”多栏布局组件“，结合上文提到的”楼层模式“纵向布局和”多栏组件“提供的横向布局能力，再辅以”高度自动“技巧，成功实现了一个含侧边栏、顶栏、主内容区、页脚的页面布局。
填充内容
制做了页面骨架之后，根据实际须要向页面各个部分添加内容。
因为目前专门为桌面画布开发的组件还比较少，在制做桌面端页面时，须要灵活组合基础组件（如图片、文本、富文本等）来实现一些复杂的效果和功能。
如今，码良团队正在加紧开发桌面组件，随着这些封装程度更高、使用更简便的组件面世，桌面页面制做将大大提速。
也但愿读者能参与到这一过程当中，积极向码良组件商城贡献组件，点点 star 也行。
设备适配
不一样桌面端设备的宽度存在差别，在制做桌面端页面时须要考虑页面在不一样设备上的实际显示效果。不一样于移动端页面能经过简单的缩放视口来实现设备适配，码良对于桌面端页面没有采起任何主动适配策略。那么针对具体页面，若是实现合适的显示效果呢？
考虑到大部分桌面端页面的内容区宽度相对固定，好比 1140px、960px，那么在制做这些内容的时候无需特殊处理，直接使用绝对单位 px （默认单位）便可。另外，内容区通常是居中的，考虑到这种需求的广范性，码良特地提供了一个”居中“属性，为组件开启此属性便可实现自动动态居中效果。
对于依赖设备宽度的组件展现效果，好比通栏导航栏，不能再使用组件样式默认的绝对单位，应该将大小和位置样式的单位切换为”%“，并手动输入数值。
除了平台层面提供的绝对单位和相对单位适配方案，组件自身也能够经过”媒体查询“等技术作成响应式的，在不一样宽度设备上展现出不一样的形态。
demo 展现
最终，”你得先这样，而后再这样，而后再这样，最后再这样“，一个美美的 demo 页面就制做好了。
期待
pc端的能力支持后。咱们也在尝试使用码良作数据大屏，咱们发现码良平台在作数据大屏上有独特的优点。能够在后期咱们的相关组件更加丰富后再出文章说明。如下是码良作大屏的一些尝试，页面能很好的进行适配，也能很好的接入一些第三方图表组件。
支持咱们
开源项目须要的是持续地坚持，而咱们坚持的动力固然也来自于大家的支持 来都来了，加个关注再走吧
项目代码：https://github.com/ymm-tech/gods-pen
项目代码(国内镜像)：https://gitee.com/ymm-tech/gods-pen