項目開發(fā)中經(jīng)常聽到客戶、產(chǎn)品、技術(shù)提出各種各樣的問題或需求。

現(xiàn)在，UED 5.x CSS 變量方案全新推出，解決歷史問題，幫助大家更穩(wěn)定、更靈活的處理相關(guān)需求，快來進一步了解吧！

為什么升級 UED 5.x 

解決歷史樣式不穩(wěn)定問題

UED 項目存在 2.x 、 3.x 、4.x 多個歷史版本，都存在一個重要問題 ——不穩(wěn)定

5.x 針對以下痛點做了優(yōu)化：

樣式覆蓋優(yōu)先級混亂

歷史問題：

升級組件庫后樣式錯亂、難排查，每次升級組件庫版本都得同步升級 UED 包，版本需對應(yīng)，十分麻煩

處理方案：

新版針對主題實現(xiàn)方案重構(gòu)，去除大量模板覆蓋，解決優(yōu)先級、類名混亂的問題，版本關(guān)系不強耦合

樣式設(shè)計還原不完善

歷史問題：

歷史主題還原采用樣式覆蓋方案，代碼結(jié)構(gòu)不穩(wěn)定；當組件庫新增特性、優(yōu)化樣式時，可能導(dǎo)致主題樣式錯亂

處理方案：

新版采用設(shè)置 CSS 變量方案，基于組件庫本身樣式結(jié)構(gòu)，樣式穩(wěn)定，更加完善合理

樣式變量混亂

歷史問題：

• 歷史版本變量設(shè)計不系統(tǒng)，使用混亂，無法直接開放給開發(fā)者讀取、使用
  

• 變量不開放，項目內(nèi)樣式覆蓋無法適配所有主題，切換主題存在樣式?jīng)_突
  

處理方案：

新版 CSS 變量基于組件庫 LESS 變量轉(zhuǎn)換，變量規(guī)范、系統(tǒng)、使用可追溯

部分組件屬性失效

歷史問題：

歷史版本設(shè)計還原不充分，未考慮組件屬性優(yōu)先級，導(dǎo)致屬性失效，影響功能使用

例如：輸入框 border 屬性，歷史版本下屬性無效，無法控制輸入框邊框顯隱，新版則正常生效

處理方案：

新版針對設(shè)計缺失做了樣式補充，保證組件功能屬性正確的前提下進行還原，靈活實現(xiàn)設(shè)計

更靈活動態(tài)的樣式支持

開放大量樣式變量

基于 HUED 設(shè)計規(guī)范，組件庫內(nèi)開放出大量樣式變量，提高自定義樣式可拓展性，同時為項目定制化樣式提供更多更完善的變量控制

支持修改字體變量

組件庫對字體樣式做了統(tǒng)一規(guī)范，組件字體均可通過字體變量配置修改，無需多重樣式覆蓋，一步生效

支持樣式跟隨主題

新版支持引入組件庫變量，切換主題，自定義樣式變量可隨著主題更改而變化，實現(xiàn)樣式適配主題

自定義組件樣式示例：

支持項目擴展主題

新版支持項目初始化時主題變量配置，可對內(nèi)置主題進行擴展。修改主題主色、風(fēng)格的需求可輕松實現(xiàn)！

便捷自定義新主題

產(chǎn)品有單獨的設(shè)計團隊，并且想擁有一套更符合項目場景的主題，新版支持便捷實現(xiàn)！

根據(jù)設(shè)計團隊產(chǎn)出的規(guī)范化設(shè)計稿，開發(fā)者可參考主題變量文檔，基于完善的變量配置即可快速擴展一個全新主題

如何升級

支持環(huán)境

• 現(xiàn)代瀏覽器和 IE11 及以上（需要 polyfills）
  

• HZERO版本 >= 1.8.x

新版使用 CSS 變量方案，對 IE 的支持需要相應(yīng)  Polyfill 配置，如需支持 IE 建議使用 UED 4.0.x 版本

版本要求

• choerodon-ui: 1.5.8-css.0 (CSS 變量版本)
  

• hzero-front-ui(UED): >= 5.1.0
  

• hzero-ui: >= 1.0.86

升級指南：https://open.hand-china.com/document-center/doc/component/3913/17890?doc_id=340133&doc_code=197775

常見問題：https://open.hand-china.com/document-center/doc/component/3913/17890?doc_id=340147&doc_code=197789

注意事項

升級新版后，使用到組件庫 LESS 變量的地方需要特別注意：

顏色變量：由于組件庫的 LESS 變量指向了 CSS 變量，所以不能再對其執(zhí)行 LESS 方法，可用現(xiàn)有的其他變量替代，如有需求，可提工單或者提交 PR 新增變量

數(shù)值變量：對數(shù)值類變量引用并且計算，需要使用 CSS calc 方法進行包裹

后續(xù)計劃

提供完善的文檔和教學(xué)視頻，并組織新特性的專題賦能，敬請期待！

運維支持

如若在使用過程中有任何技術(shù)上的問題

請前往開放平臺（https://open.hand-china.com/），選擇前端組件庫/C7N-UI 分類提反饋聯(lián)系我們!