碼良新技能 桌面端頁面製做
最近碼良迎來了一波新功能的上線，並毫無保留地繼續進行了代碼開源-趕忙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