開發(fā)框架DevExtreme全新發(fā)布v18.2.6-附下載

evExtreme Complete Subscription是性能最優(yōu)的 HTML5,CSS 和 JavaScript 移動、Web開發(fā)框架，可以直接在Visual Studio集成開發(fā)環(huán)境，構(gòu)建iOS，Android，Tizen和Windows Phone 8應(yīng)用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，并且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發(fā)環(huán)境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平臺，是Visual Studio開發(fā)人員開發(fā)跨平臺移動產(chǎn)品的首選工具。

具體更新內(nèi)容如下：

此列表包含了v18.2.6中解決的問題：

DevExtreme Html Editor

T702531 - dxHTMLEditor - Popups have incorrect size in IE11
T701588 - dxHTMLEditor does not apply content settings in IE11

DevExtreme Tools

T715323 - DevExtreme MVC - ConvertToDevExtremeCommandPackage throws the "Empty path name is not legal" error at the project startup

DevExtreme Data Grid

T707313 - DataGrid - A validation error message is hidden behind a fixed column
T707084 - DataGrid - The "Cannot read property 'split' of undefined" error occurs if one negative condition is specified in another condition
T709033 - DataGrid - The grid's layout is broken after adding columns and group summaries dynamically
T709106 - DataGrid - The last column has incorrect width when all columns have "auto" width and columnAutoWidth enabled after upgrade from 17.2 to 18.2
T711198 - DataGrid - The repaintChangesOnly option renders each 6's row twice if rowRenderingMode is virtual
T710380 - DataGrid - Two clicks are registered to activate save/cancel buttons if a column with the calculateCellValue field is used
T708122 - DataGrid - Unselect all is not working with a custom data source
T709020 - DataGrid doesn't display a record if it was added using the ArrayStore.push method
T708711 - DataGrid expands group rows infinitely if grouping.autoExpandAll is false and the focused row feature is used
T708353 - dxDataGrid - Tab key navigation does not work correctly when the showWhenGrouped option is set for a grouped column
T708525 - dxDataGrid does not apply grouping when options are changed at runtime

DevExtreme Data Visualization

T709427 - dxChart - Value axis zooming is broken if a data source is asynchronous
T711457 - TreeMap - Performance is slow when updating labels of a large number of items

DevExtreme Demos

T710022 - Scheduler - The appointmentTooltipTemplate function has three parameters in the Adaptive Appointments demo

DevExtreme Scheduler

T705883 - Scheduler - Resource grouping cells are misaligned
T644386 - Scheduler - The control layout is incorrect in the Edge browser if the crossScrollingEnabled option is used
T697037 - Scheduler - The recurrence exception rule has an incorrect value if the Central Time (UTC -06.00) time zone is used
T709736 - Scheduler - TimelineMonth view cells have double borders

DevExtreme UI Widgets

T636219 - A button displays an ellipsis instead of an icon if the Font Awesome icon v.5 is used
T694197 - Autocomplete - Grouped items cannot be shown
T710547 - DateBox - The caret position should not change when adjusting a date with up/down arrows if useMaskBehavior is enabled
T706292 - DateBox doesn't display an error frame if isValid and validationError are defined on the first load
T685238 - DropDownBox does not change/adjust the popup height in accordance with content
T673292 - dxList - Touch events do not work in IE and Edge with the Surface Pro 4 device
T540032 - dxTabPanel aligns its tabs incorrectly under certain conditions when the panel resides in a detail row template of dxDataGrid
T692239 - iOS does not show a date picker popup for the dxDateBox field
T710656 - It is difficult to add a custom item to SelectBox
T702864 - NumberBox - Format doesn't work if the "fa" culture is used
T705263 - RangeSlider does not show a validation message
T708199 - SelectBox edit mode - The entered value is lost if the initial value is empty
T691665 - TagBox - Selection does not work with grouped DataSource
T683047 - TagBox - The customQueryParams option is ignored when ODataStore is used
T706179 - Touch Events don't work on desktop touch monitors in Chrome

DevExtreme Core

T711875 - ResponsiveBox doesn't render HTML markup defined in the Item component

點擊查看更多下載最新版試用！！！

者:王很水的博客

出處:https://wanghenshui.github.io/2021/03/11/arrow.html

月28日，廣受開發(fā)者歡迎的前端開源項目Ant Design發(fā)布4.0正式版本。這是兩年多以來的首次發(fā)布的里程碑版本。

大家可以在GitHub上關(guān)注Ant Design項目。

需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并進入維護狀態(tài)。我們?nèi)匀粫?v3 版本進行半年的維護工作。維護截止日期為 2020 年 5 月。

設(shè)計規(guī)范升級

我們將基礎(chǔ)圓角由 4px 調(diào)整為 2px。中后臺產(chǎn)品以效率為第一優(yōu)先級，圓角樣式作為 UI 上的重要細節(jié)，更小的圓角從視覺上減少界面細節(jié)，提升了信息閱讀效率。此外，我們對陰影進行了調(diào)整，使其更符合真實陰影，也同時將信息層級更好體現(xiàn)。

暗色主題

我們基于 v3 版本的色彩系統(tǒng)進行了升級，v4 提供了暗色主題。你可以在頁面中點擊切換主題功能查看暗色主題效果：

無邊框組件

在業(yè)務(wù)中，我們發(fā)現(xiàn)有些場景會存在輕量級的選擇組件。因而我們提供了一種新的無邊框樣式，讓開發(fā)者可以更簡單的嵌入這些組件而不用額外覆蓋樣式。

兼容性調(diào)整

Ant Design 3.0 為了兼容舊版 IE 做出了非常多的努力。然而根據(jù)業(yè)界統(tǒng)計，IE9/10 瀏覽器無論是在全球還是在國內(nèi)份額都在隨著 Windows 系統(tǒng)更新而在不斷縮減。我們在 4.0 版本，停止對 IE 9/10 的支持工作（但仍然會支持 IE 11）。因而過去一些低性能的組件，也會隨著新的 css 特性而獲得性能提升。

與此同時，我們也將 v4 依賴的 React 最低版本要求升級到了 React 16.9。這意味著，v4 版本將會提供更多的 hooks 以簡化你的代碼。

此外，我們也將在 v3 版本警告的一些廢棄 API 進行了移除。我們強烈建議你將當前項目升級到 v3 的最后一個版本，并根據(jù) warning 信息將廢棄 API 進行更新。

更小的尺寸

在 antd@3.9.0 中，我們引入了 svg 圖標。使用了字符串命名的圖標 API 無法做到按需加載，因而全量引入了 svg 圖標文件，這大大增加了打包產(chǎn)物的尺寸。在 4.0 中，我們調(diào)整了圖標的使用 API 從而支持 tree shaking，減少 antd 默認包體積約 150 KB(Gzipped)。

舊版 Icon 使用方式將被廢棄，4.0 中會采用按需引入的方式。此外，我們也對相關(guān)依賴進行了精簡，從而降低打包尺寸（Gzipped）：

組件重做

Form 重做

Form 作為高頻使用的組件，其 API 略顯冗余。用戶需要通過 Form.create 的 HOC 方式獲得表單實例，而通過 form.getFieldDecorator 來對組件進行數(shù)據(jù)綁定。此外，每次數(shù)據(jù)變更便會進行整個表單的重新渲染，這使得在大數(shù)據(jù)表單中性能堪憂。在 v4 版本中，F(xiàn)orm 將自帶表單實例，你可以直接通過 Form.Item 的 name 屬性進行數(shù)據(jù)綁定，從而簡化你的代碼。

我們發(fā)現(xiàn)大多數(shù)場景下，開發(fā)者其實只關(guān)注表單提交成功的值。因而我們提供了 onFinish ，其只會在表單驗證通過后觸發(fā)，而 validateFields 不在需要。

此外，F(xiàn)orm 提供了 hooks 方法 Form.useForm 允許你對表單示例進行控制。

Table 重做

由于我們提升了兼容性的最低要求，我們改成使用 sticky 樣式進行固定列的實現(xiàn)，因而大大減少了表單擁有固定列時的性能消耗。而對于不支持 sticky 的 IE 11，我們采取降級處理。

同時，我們提供了新的 summary API 用于實現(xiàn)總結(jié)行的效果：

對于 sorter 提供了多列排序的功能：

此外，我們調(diào)整了底層邏輯，現(xiàn)在 fixedColumn、expandable、scroll 可以混合使用。提供了 body API 用于自定義表格內(nèi)容實現(xiàn)，你可以由此實現(xiàn)諸如虛擬滾動的效果。

全新 DatePicker、 TimePicker 與 Calendar

我們對日期組件進行了整體重寫，因而將其與 moment 進行解耦。你可以通過我們提供的 generate 方法生成自定義日期庫的 Picker 組件。為了保持兼容，默認的 Picker 組件仍然使用 moment 作為日期庫。

此外，我們提供了全套的時間、日期、周、月、年選擇器以及對應(yīng)的范圍選擇器。你可以通過 picker 屬性進行設(shè)置，不再需要通過 mode 的受控方法來實現(xiàn)特地的選擇器。

在范圍選擇器上，我們也對交互進行了優(yōu)化。你現(xiàn)在可以單獨的選擇開始或結(jié)束時間，并且完美優(yōu)化了手動輸入日期的體驗。

Notification/Modal 提供 Hooks

在過去版本，你或許會遇到 Modal.xxx 和 Notification.xxx 調(diào)用方法無法獲得 Context 的問題。這是由于我們對于這些語法糖會額外通過 ReactDOM.render 創(chuàng)建一個 React 實例，這也導(dǎo)致了 context 丟失的問題。在新版中，我們提供了 hooks 方法，讓你可以將節(jié)點注入到需要獲得 context 的地方。

虛擬滾動

v4 中，我們將 Tree、TreeSelect、Select 進行了改造，其默認使用虛擬滾動技術(shù)進行性能優(yōu)化以承載大數(shù)據(jù)量的選項渲染。

Living demo：點擊“了解更多”

此外，也對鍵盤交互以及無障礙進行了優(yōu)化。

更多新功能/特性/優(yōu)化部分

ConfigProvider 提供 direction 配置以支持 rtl 語言國際化。
Form 與 ConfigProvider 支持 size 設(shè)置包含組件尺寸。
Typography 增加 suffix 屬性。
Progress 增加 steps 子組件。
TextArea 支持 onResize。
Grid 使用 flex 布局。
......

如何升級

為了盡可能簡化升級，我們保持了最大兼容。但是仍然有一部分 breaking change 需要注意。你可以首先嘗試使用我們提供的 codemod 工具進行遷移，對部分無法遷移的內(nèi)容進行手工遷移。升級請參考官方文檔。

以上

Ant Design 4.0 的誕生離不開社區(qū)志愿者的貢獻與支持，感謝 @saeedrahimi 實現(xiàn)了 rtl 的國際化功能，@shaodahong 對于兼容包的貢獻，以及每個參與幫助開發(fā)的人。是你們?yōu)殚_源的貢獻讓 Ant Design 變得更加美好！

在線咨詢

上一篇：這些是你想要的H5鍵盤兼容方案
下一篇：舊版 Microsoft Edge 瀏覽器徹底涼了，微軟將其永久移除

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商