📧叮~你有一份 DevUI 12 新版本待查收~😋

DevUI是面向企業中後臺產品的開源前端解決方案，其設計價值觀基於"至簡"、"沉浸"、"靈活"三種天然與人文相結合的理念，旨在爲設計師、前端開發者提供標準的設計體系，並知足各種落地場景，是一款企業級開箱即用的產品。若是你正在開發 ToB 的工具類產品，DevUI 將是一個很不錯的選擇！

DevUI是一款基於DevUI Design設計規範的Angular組件庫，開源於2019年，已經持續維護2年時間，沉澱了61個組件，其中有很多都是業界組件庫沒有的特點組件。

前面預告了兩次，今天 DevUI 12 版本終於來了！升級了最新的 Angular 12 版本，讓咱們一塊兒來看看還有哪些新特性吧！

DevUI 12：全面支持 Angular Ivy 新引擎

新特性

1. 規範化組件間距，變動爲4的倍數以更好兼容縮放等計算後的展現效果
2. Select支持多選模式下回車選中/取消選中
3. TreeSelect支持自定義已選中項模板，支持經過設置checkRelation控制父子節點的選中關係
4. Upload支持選擇文件夾上傳，單文件上傳成功後保留文件顯示
5. Cascader支持設置appendTobody
6. Button優化設置寬度後文字過長超出顯示範圍

Bug修復

1. TreeSelect修復多選模式下設置treeNodeIdKey後沒法刪除節點的問題
2. DataTable修復拖拽中容易失焦的問題
3. dragDrop修復無主題設置場景下placeholder無顏色的問題
4. Editorx中文輸入法下光標定位等問題修復
5. Tree修復調用checkAllNodes方法沒法改變半選狀態的問題
6. TagsInput修復標籤過長沒法刪除的問題

完整Changelog：12.0.0版本Changelog

特點組件展播

Datepicker Pro 日期選擇器

組件連接：devui.design/components/…

特色介紹

Datepicker Pro組件借鑑移動端，利用鼠標滾輪操做範圍選擇，附加精準位置點擊，減小用戶的點擊次數，縮短用戶對於時間選擇的操做路徑。

功能詳情

1. 組件提供了單選/範圍類型，支持日期/周/月份/年份的模式，支持各類自定義模板擴展，充分知足業務複雜場景
2. 提供日曆面板形式，用戶可自定義嵌入各種型場景，靈活使用

更詳細的介紹能夠參考咱們以前的文章：

DevUI 11.4.0 發佈：DatePickerPro來啦

Category Search 分類搜索

組件連接：devui.design/components/…

特色介紹

Category Search組件將高頻經常使用的搜索過濾內容聚合到一個組件中，造成符合搜索過濾的操做模型，減小頁面冗餘的搜索過濾條件的呈現，進而下降用戶的理解和使用成本

功能詳情

組件提供多場景菜單模式，不一樣操做模式下，菜單的展現內容不一樣：

1. 默認提供類別信息
2. 存在類別選中項時，展現該類別的選項詳情
3. 輸入框存在搜索文本，展現符合文本的搜索分類或分類下符合條件的選項

組件提供一鍵清空，過濾器保存，類別過多的列表展現，最大程度兼容各種複雜的業務場景

更詳細的介紹能夠參考咱們以前的文章：

CategorySearch分類搜索組件初體驗

Quadrant Diagram 象限圖

組件連接：devui.design/components/…

特色介紹

象限圖常常用於規劃事件的優先級，用於分析處理數據與指望的偏離程度等。組件經過拖拽，實現對目標的位置掌控及信息呈現。

功能詳情

1. 組件經過與拖拽的聯動，座標跟隨線的定位，能夠輕鬆實現標籤的移動，便於使用者進行數據的變動，掌控事項的發展；
2. 組件內置了功能區域，提供標籤的放大，縮小及象限圖全屏的功能；
3. 靈活的樣式定製能力，用戶可根據本身的訴求靈活搭配。

手把手教你如何使用象限圖組件

Gantt 甘特圖

組件連接：devui.design/components/…

特色介紹

甘特圖經常使用於多個事務進度的跟蹤與管理，每一個項目以條狀圖的形式顯示，進度與其餘時間相關的進展的內在關係以可視化形式進行顯示。

功能詳情

1. 基本圖形形式呈現，以時間維度顯示每一個條目之間內在聯繫，支持bar、bar-parent、milestone三種不一樣形式條狀展現；
2. 多種交互支持：條目拖拽、進度更新、時間範圍更新、快捷跳轉、視圖變化、全屏等；
3. 與table搭配：可與datatable搭配使用，進行更豐富維度信息呈現與管理。

致謝

感謝對DevUI組件庫給予幫助的開發者們，祝你們使用愉快~

預告

DevUI Admin 2.0 版本也將在本月17號重磅發佈，提供了一項神奇的黑科技，讓咱們拭目以待吧！

也歡迎你們參與到DevUI生態的建設中來，目前 DevUI 開源生態主要有如下產品：

• NG DevUI：基於DevUI Design設計規範的Angular組件庫
• DevUI Icons：與DevUI組件庫配套使用的字體圖標庫
• NG DevUI Admin：開箱即用的企業級中後臺管理系統
• DevUI Helper：一款VSCode插件，DevUI代碼助手，給你帶來絲滑的代碼補全體驗。
• Vue DevUI：vue3版本DevUI組件庫，支持PC/Mobile（目前還在孵化中，歡迎參與建設~）