界面控件DevExtreme v23.1抢先体验，增强的UI/UX自定义功能！

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

本文的目的就是为了让开发者预览即将发布的DevExtreme功能，让开发者有机会抢先测试新功能。要开始测试，请安装devextreme@23.1-next NPM或使用下面的在线演示链接来探索最新功能。

npm install devextreme@23.1-next --save-exact

注意：Early Access和CTP版本仅提供用于早期测试目的，尚不能用于生产使用。此版本可以与其他主要版本的DevExpress产品一起安装。在安装Early Access和CTP版本之前，请备份您的项目和其他重要数据。

DevExtreme v22.2正式版下载(Q技术交流：674691612）

UI/UX自定义增强

图表 - 颜色渐变和模式

开发者现在可以自定义样式，并将渐变、模式和图像应用到图表中。

使用registerGradient()方法声明线性和径向梯度样式，使用registerPattern()方法声明图案和图像样式，这些方法为声明的样式返回唯一的id。在系列/点颜色对象中，为标签和连接器指定基本颜色，并将生成的id应用到fillId字段。

app.component.ts

import { 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.html

<dx-chart ... >
<dxo-common-series-settings [color]="seriesColor">
</dxo-common-series-settings>
</dx-chart>

仪表盘 - 组件内部的自定义内容

开发者现在可以在DevExpress Gauge组件中添加自定义SVG内容(例如文本和图像)。

要添加自定义SVG内容，请使用新的centerTemplate属性。

<dx-circular-gauge centerTemplate="centerTemplate" ... >
<svg *dxTemplate="let gauge of 'centerTemplate'">
<!-- 'gauge' is an instance of the widget. You can use it to obtain gauge size and associated values -->
<!-- ... -->
</svg>
</dx-circular-gauge>

BarGauge — 支持“Shift”模式来处理重叠标签

如果BarGauge显示的多个值彼此接近，则对应的标签可能会重叠。如果您希望避免标签重叠，请使用resolvelabeloverlapped属性指定DevExpress Gauge组件如何调整标签位置或可见性。

随着我们的新移位模式，BarGauge标签可以在必要时移位位置。

<dx-bar-gauge ...
resolveLabelOverlapping="shift"
>
</dx-bar-gauge>

覆盖组件 — 本地滚动

弹出和弹出窗口（Popup/Popover ）组件现在支持本地滚动操作，当Popup/Popover高度内容大于其本身高度时，本地浏览器滚动条将出现在屏幕上，您不必手动将内容封装到ScrollView组件中。该特性还提高了移动设备上的可用性，触摸手势对弹出/弹窗窗口内容现在正常工作。

TreeView — 支持自定义展开/折叠图标

现在开发者可以为TreeView组件指定自定义展开/折叠图标。

使用新的collapseIcon和expandIcon属性来指定图标路径、DevExtreme图标或CSS类(如果使用外部库)。

<dx-tree-view ...
collapseIcon="minus" "--Icon from the DevExtreme icon library"
expandIcon="https://path/to/the/expand_icon.svg" "--Icon in the SVG format"
>
</dx-tree-view>

API增强

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-box>

TypeScript支持增强

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;

界面控件DevExtreme v23.1抢先体验，增强的UI/UX自定义功能！相关推荐

解决使用高分辨率笔记本分辨率放大100%以上运行程序界面控件不跟随方大方式qt+gtk+ui
一.前言解决使用高分辨率笔记本分辨率放大100%以上运行程序界面控件不跟随方大方式.使用100%时,qt界面太小,瞅着累眼睛,方大了界面,程序编译出来控件都跟着方大,布局都乱了,但是牺牲了qt cr ...
应用程序主题生成很简单！界面控件DevExtreme有现成的主题生成器
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout ...
界面控件DevExtreme——轻松将TreeList数据导出为PDF格式
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout ...
C#多线程操作界面控件的解决方案
C#中利用委托实现多线程跨线程操作 - 张小鱼 2010-10-22 08:38 在使用VS2005的时候,如果你从非创建这个控件的线程中访问这个控件或者操作这个控件的话就会抛出这个异常.这是微软为了 ...
html5人脸拼图,面向眼机交互的界面控件设计方法研究.pdf
摘要摘要眼机交互是目前人机交互技术中具有前瞻性研究价值的新方向,目前已逐步应用在虚拟现实.残疾人辅助.医疗.教育和军事等诸多领域.近年来,越来越多的设备将眼机交互的方式加入到人机对话中,发挥其 ...
主流 .NET界面控件套包对比介绍
.NET Framework 类库是一个与公共语言运行时紧密集成的可重用的类型集合.该类库是面向对象的,并提供您自己的托管代码可从中导出功能的类型.这不但使 .NET Framework 类型易于使用 ...
界面控件DevExpress WinForms的数据网格，让业务数据管理更轻松！
DevExpress WinForms控件的Data Grid组件是一个性能优异的编辑/数据整型组件,附带了数十个高影响力的功能,用户可以轻松地管理信息并根据业务需求来展示数据信息. PS:DevEx ...
PyQt高级界面控件及操作
PyQt高级界面控件一.表格与树结构 1.表格 1.代码示例 2.代码解析: 3.补充说明属性参数 2.树结构 1.自定义树结构 2.系统定制模式二.QStackedWidget组件三.QTab ...
日积（Running）月累（ZSSURE）：WCF学习之“通过事件绑定控制WinForm宿主程序主界面控件”
背景: WCF服务需要寄宿到相应的可运行进程中执行,常见的有四种寄宿,分别是控制台程序.WinForm程序.IIS和Windows服务.之前学习老A博客和<WCF全面解析>时最常用到的是控 ...

界面控件DevExtreme v23.1抢先体验，增强的UI/UX自定义功能！

界面控件DevExtreme v23.1抢先体验，增强的UI/UX自定义功能！相关推荐

最新文章

热门文章