DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。本文的目的就是为了让开发者预览即将发布的DevExtreme功能让开发者有机会抢先测试新功能。要开始测试请安装devextreme23.1-next NPM或使用下面的在线演示链接来探索最新功能。npm install devextreme23.1-next --save-exact注意Early Access和CTP版本仅提供用于早期测试目的尚不能用于生产使用。此版本可以与其他主要版本的DevExpress产品一起安装。在安装Early Access和CTP版本之前请备份您的项目和其他重要数据。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316UI/UX自定义增强图表 - 颜色渐变和模式开发者现在可以自定义样式并将渐变、模式和图像应用到图表中。使用registerGradient()方法声明线性和径向梯度样式使用registerPattern()方法声明图案和图像样式这些方法为声明的样式返回唯一的id。在系列/点颜色对象中为标签和连接器指定基本颜色并将生成的id应用到fillId字段。app.component.tsimport { registerGradient, registerPattern } from devextreme/common/charts; export class AppComponent { getGradientId () registerGradient(linear, { colors: [{ offset: 20%, color: #97c95c }, { offset: 90%, color: #eb3573 }] }); getPatternId () registerPattern( // Specify pattern width, height and template ); seriesColor { base: #f5564a, fillId: this.getGradientId() }; }app.component.htmldx-chart ... dxo-common-series-settings [color]seriesColor /dxo-common-series-settings /dx-chart仪表盘 - 组件内部的自定义内容开发者现在可以在DevExpress Gauge组件中添加自定义SVG内容(例如文本和图像)。要添加自定义SVG内容请使用新的centerTemplate属性。dx-circular-gauge centerTemplatecenterTemplate ... svg *dxTemplatelet gauge of centerTemplate !-- gauge is an instance of the widget. You can use it to obtain gauge size and associated values -- !-- ... -- /svg /dx-circular-gaugeBarGauge — 支持“Shift”模式来处理重叠标签如果BarGauge显示的多个值彼此接近则对应的标签可能会重叠。如果您希望避免标签重叠请使用resolvelabeloverlapped属性指定DevExpress Gauge组件如何调整标签位置或可见性。随着我们的新移位模式BarGauge标签可以在必要时移位位置。dx-bar-gauge ... resolveLabelOverlappingshift /dx-bar-gauge覆盖组件 — 本地滚动弹出和弹出窗口Popup/Popover 组件现在支持本地滚动操作当Popup/Popover高度内容大于其本身高度时本地浏览器滚动条将出现在屏幕上您不必手动将内容封装到ScrollView组件中。该特性还提高了移动设备上的可用性触摸手势对弹出/弹窗窗口内容现在正常工作。TreeView — 支持自定义展开/折叠图标现在开发者可以为TreeView组件指定自定义展开/折叠图标。使用新的collapseIcon和expandIcon属性来指定图标路径、DevExtreme图标或CSS类(如果使用外部库)。dx-tree-view ... collapseIconminus --Icon from the DevExtreme icon library expandIconhttps://path/to/the/expand_icon.svg --Icon in the SVG format /dx-tree-viewAPI增强List — 通过单击选择项目使用新的selectByClick属性指定单击列表项标题是否选择该项。ColorBox – 支持十六进制8位RGBA格式ColorBox组件接受以下格式3位和6位十六进制(“#F00”“#FF0000”)RGB ( RGB (255,0,0))RGBA ( RGBA (255, 0,0,1))颜色名称4位和8位数字(“#F00F”“#FF0000FF”)此列表中的最后一项作为我们EAP构建的一部分发布开发者可以使用此格式将值添加到ColorBox编辑器中也可以使用value属性指定初始值。dx-color-box ... value#0d62e0ff --or #FFFF [editAlphaChannel]true /dx-color-boxTypeScript支持增强Angular、React和Vue应用中的简化类型导入以前开发者必须从单独的devextreme包中导入某些类型而其他类型则必须从特定的框架包(如devextreme-angular)中导入。使用v23.1可以从特定于框架的包中导出所有必需的类型。之前import { ColumnChooserMode } from devextreme/common/grids; import DataGrid from devextreme-react/data-grid;之后import DataGrid, { DataGridTypes } from devextreme-react/data-grid; const currentMode: DataGridTypes.ColumnChooserMode;