盘点界面组件DevExtreme 2023年值得期待的一些新功能!

news2024/11/17 21:39:09

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

在本文中,我们将总结DevExtreme v22.2中一些值得期待的新功能,这些功能适用于DevExtreme JavaScript (Angular, React, Vue, jQuery)和基于DevExtreme的ASP. NET MVC/Core控件。

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

UI/UX自定义增强

表单 - 自定义标签模板

目前我们的表单只能显示文本标签,然而一些用户需要在编辑器标签中显示图像或其他丰富的内容。为了满足这一需求,在新版本中引入自定义标签模板,这将利用许多DevExtreme组件中使用的技术——允许开发人员自定义应用程序UI的技术。为了帮助说明此功能的好处,下面的表单标签使用图标进行了增强。

<dx-form [formData]="employee">
<dxi-item dataField="name">
<div *dxTemplate="let data of 'label'">
<person-icon></person-icon> Name
</div>
...
</dxi-item>
</dx-form>

Accordion – 自定义标题模板的个别项目

DevExtreme Accordion允许开发者为所有项目标题指定一个共享的自定义模板,在某些情况下,您可能需要为每个项目使用不同的模板。在新版本中,开发者可以在项目级别上指定标题模板。例如在下面的例子中,第一项有一个副标题,当然您可以在Accordion中添加按钮、图像或任何自定义内容:

<dx-accordion>
<dxi-item>
<div *dxTemplate="let data of 'title'">
<h1>Super Mart of the West</h1>
<h2>Arkansas department</h2>
</div>
...
</dxi-item>
</dx-accordion>

编辑器 - 自定义验证消息位置

如果编辑器验证失败,则在编辑器下方显示一条消息。用户要求在这方面提供更大的灵活性,并允许控件在编辑器上方或左侧/右侧显示验证消息,官方将在下次主要更新中引入相应的' validationMessagePosition '配置选项。

<dx-text-box validationMessagePosition="left|right|top|bottom">
<dx-validator>
<dxi-validation-rule
type="number"
message="Value must be a number"
></dxi-validation-rule>
</dx-validator>
</dx-text-box>

日历 - 显示周数

另一个要求很高的UI增强是在Calendar组件中显示周数,开发者可以通过组件配置中的新“showWeekNumbers”选项激活此功能。

<dx-calendar
[showWeekNumbers]="true"
[(value)]="currentValue"
></dx-calendar>

复选框 - 由终端用户设置不确定值

DevExtreme CheckBox支持不确定状态,它是通过将组件值设置为null或undefined来启用的。一旦终端用户单击复选框,就不可能回到不确定状态。一些用户要求引入一种方法,将值重置回不确定的状态,为了实现这一点,新版本引入一个附加的价值变更模式。在这种模式下,每次点击都会旋转三个组件状态——选中、未选中和不确定。

<dx-check-box
[valueChangeMode]= "default|includeIndeterminate"
[(value)]="value"
></dx-check-box>

工具栏 - 多线路自适应模式

如果给定设备上没有足够的空间,工具栏可以自动隐藏下拉菜单中的项目,最终用户可以打开此菜单来调用与隐藏项关联的操作。在此模式下,通过换行到下一行,工具栏项仍然可见,因此最终用户可以立即访问所有可用的项目。

<dx-toolbar [multiline]="true">
</dx-toolbar>

数据透视网格导出到Excel - 导出字段面板标题

DevExtreme PivotGrid允许开发者将其内容导出到Microsoft Excel (v20.2+),目前导出的数据只包括列/行维度值(类别)和交叉点的聚合值(数字)。为了帮助解决特定的用例,我们将更新导出引擎,以便您也可以包括维度(字段)名称。

<dx-pivot-grid
[dataSource]="dataSource"
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[exportFieldHeaders] ="true"
></dxo-export>
</dx-pivot-grid>
API增强

弹出 - 隐藏/显示API增强

开发这可能已经在弹出窗口的onHiding/ ondisplays事件中使用了' cancel '标志来中止操作(基于特定的条件),有些人要求异步计算条件。例如,当您必须等待最终用户批准/拒绝请求时,对于这种情况,我们的一些组件支持' Promise '类型的' cancel '标志值,新版本以同样的方式支持弹出窗口的onHiding/ ondisplays事件中的promise。

onHiding: (e) => {
e.cancel = showConfirmation("Are you sure?"); // returns a Promise
},

弹出窗口的show/hide方法返回一个Promise对象,该对象在操作完成后被解析。用户要求在这方面有一些灵活性——特别是在事件处理程序通过' cancel '标志取消操作时拒绝Promise。

try {
await popup.hide();
// closed successfully
}
catch (e) {
// closing was cancelled
}

TagBox - 提交自定义项目的额外事件

DevExtreme TagBox允许终端用户添加自定义项目,一旦用户输入自定义文本并按Enter,新创建的项就会提交给数据源。为了加速数据输入过程,用户要求在TagBox失去焦点时(当用户按Tab键或单击表单的提交/保存按钮时)自动提交自定义项目,新版本扩展API来支持这些使用场景。

Slider & RangeSlider - 延迟' valueChanged '事件

当终端用户开始拖动Slider的句柄时,组件立即引发valueChanged事件。因此在用户释放句柄之前会引发一系列事件,新版本引入一个额外的模式,只在用户交互结束时触发一次valueChanged事件。

<dx-slider valueChangeMode="instant|eventual">
</dx-slider

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/353404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文学会进程控制

目录进程的诞生fork函数fork的本质fork的常规用法fork调用失败的原因进程的死亡进程退出的场景常见的进程退出方法正常终止&#xff08;代码跑完&#xff09;echo $?main函数返回调用exit调用_exitexit和_exit的区别进程等待进程等待的重要性进程等待的函数waitwaitpid进程退出…

uniapp中条件编译

官方&#xff1a;https://uniapp.dcloud.net.cn/tutorial/platform.html#%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9 #ifndef H5 代码段… #endif 表示除了H5其他都可以编译 #ifdef H5 代码段… #endef 表示只能编译H5&#xff0c;其他的都不能编译 其他编译平台请查看官方文档。 …

连接器产业深度分析报告,国产化替代如何突出重围?(附厂商名录)

前言 2022年3-4月&#xff0c;上海疫情的封城举措&#xff0c;使得其它地区连接器类产品难以进入上海产业链&#xff0c;车载连接器的终端供应受阻&#xff0c;最终影响到全国多家车企生产&#xff1b; 同年12月&#xff0c;欧洲理事会批准—2024年12月28日之前&#xff0c;各类…

MySQL数据库调优————索引调优技巧

长字段的索引调优 当某张表需要给一个长字段创建索引时&#xff0c;因为索引长度越长&#xff0c;效率越差&#xff0c;所以我们需要对其进行优化。 创建额外的长字段的Hash值列 当长字段需要创建索引时&#xff0c;我们可以为其创建额外的一列&#xff0c;用其Hash值作为值…

如何利用Power Virtual Agents机器人实现成绩查询服务

今天我们继续介绍如何利用Power Virtual Agents来实现成绩查询服务。设计思路是在PVA聊天机器人的对话框中输入学生的姓名和学号来进行成绩的查询。首先&#xff0c;在Microsoft 365的OneDrive中制作一个Excel格式的成绩单。 可以将学生的学号、姓名、各学科成绩进行添加。 在P…

【初探人工智能】2、雏形开始长成

【初探人工智能】2、雏形开始长成【初探人工智能】2、雏形开始长成安装Flask封装Web接口雏形设置接收参数功能验证聊天写代码代码补全生成图片写在后面笔者初次接触人工智能领域&#xff0c;文章中错误的地方还望各位大佬指正&#xff01; 【初探人工智能】2、雏形开始长成 在…

限时活动|凭徽章领披萨大奖,玩转Moonbeam治理论坛

动动手指&#xff0c;无需每天打卡&#xff0c;用刷手机的零碎时间领一份Web3惊喜&#xff01; 本次挑战的目标是鼓励大家参与社区治理、熟悉论坛操作。有关参与方式和原因的信息在Twitter上共享&#xff1a;有兴趣可以和ThinkWildCrypto一起探索论坛以解锁其功能、了解最近和正…

【虹科干货】如何有效运用虹科任意波形发生器工作模式?

图 1&#xff1a;显示从存储器到输出的数据路径的 AWG 概念框图 01引言 任意波形发生器 (AWG) 的强大功能之一是它们可以生成几乎无限数量的波形。 AWG 的工作模式控制这些波形输出方式的时序。 在本应用说明中&#xff0c;我们将研究虹科Spectrum M4i.66xx 系列 AWG 工作模式…

JVM的GC机制和常见GC算法

文章目录[toc]1. 堆内存的分代2. GC分类3. 什么是GC3.1 需要GC的内存区域3.2 GC回收的对象3.3 判断对象存活的两种算法3.3.1 引用计数3.3.2 可达性分析3.4 什么时候触发GC4. 常见的GC算法4.1 标记-清除算法4.2 复制算法4.3 标记-压缩算法1. 堆内存的分代 堆中内存分为新生代和老…

String类 [上]

一、编码的基础介绍 编码&#xff1a;是信息从一种形式或格式转换为另一种形式的过程。 ASCLL 编码表:主要表示的是英文的编码表 Unicode&#xff1a;是为了解决传统的字符编码方案的局限而产生的&#xff0c;它为每种语言中的每个字符设定了统一并且唯一的二进制编码二进制编码…

小白式linux系统怎么安装宝塔面板

有很多小白同学问我linux系统服务器怎么远程连接。那么今天我们重点来教教大家如何用电脑远程服务器配上图文教程&#xff0c;让不懂的新手小白一看就会&#xff0c;分分钟上手教程怎么安装宝塔面板&#xff1f;这个其实很简单接下来跟着我操作。以linux centos7.6 举例Centos安…

[计算机操作系统(慕课版)]第二章 进程的描述与控制(学习笔记)

2.1 前驱图和程序执行 2.1.1 前驱图 前驱图是指一个有向无循环图可记为DAG前驱图用于描述进程之间执行的先后顺序。前驱图的每个节点用来表示一个进程或程序段乃至一条语句节点间的有向边表示两个节点之间存在的偏序或前驱关系。进程或程序之间的前驱关系可用→来表示。如果进…

有了这些接口测试用例+工具,测试效率想不提升都难

写在前面&#xff1a;在日常开发过程中&#xff0c;有人做前端开发&#xff0c;有人负责后端开发。接口的主要作用就是连接前后台。但是&#xff0c;由于前端和后端开发的速度可能不一样&#xff0c;尤其是后端开发好了&#xff0c;但前端还未开发。这种时候我们需要做接口测试…

【原创】java+swing+mysql银行ATM管理系统

本文主要介绍使用javaswingmysql去设计一个银行ATM管理系统&#xff0c;模仿实现存款、取款、转账、余额查询等功能。 功能分析&#xff1a; 隐含ATM管理系统一般分为管理员和用户角色&#xff0c;管理员可以进行用户管理、账单管理&#xff0c;用户可以进行转取存款等功能如…

面试不到10分钟就被赶出来了,问的实在是太变态了...

干了两年外包&#xff0c;本来想出来正儿八经找个互联网公司上班&#xff0c;没想到算法死在另一家厂子。 自从加入这家外包公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到11月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资…

深度学习网络模型——ConvNeXt网络详解、ConvNeXt网络训练花分类数据集整体项目实现

深度学习网络模型——ConvNeXt网络详解、ConvNeXt网络训练花分类数据集整体项目实现1、介绍2、设计方案3、Macro design4、ResNeXt-ify5、Inverted Bottleneck7、Large Kernel Sizes8、Micro Design9、ConvNeXt variants10、ConvNeXt-T 结构图11、网络代码实现&#xff1a;Conv…

内网渗透(三十五)之横向移动篇-IPC配合系统服务横向移动

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…

Linux文件权限查看与修改

Linux文件的权限linu文件的权限可以分为四类&#xff1a;可读、可写、可执行、没有权限。分别用字符r、w、x、- 表示。2. 用户与用户组Liunx是一个多用户多任务的操作系统&#xff0c;可以通过用户和用户组来更好的控制文件的权限。每个文件都有一个拥有者&#xff08;某一个具…

批处理Batch学习

批处理Batch学习 前几天一个月薪35k的兄弟&#xff0c;给我推了一个人工智能学习网站&#xff0c;看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有&#xff0c;很详细&#xff0c;分享给大家。大家及时保存&#xff0c;说不定啥时候就没了。 基础认识 批…

Linux下Python脚本的编写解析fio(minimal格式)(三)

在服务器测试(storage)过程中&#xff0c;会看到很多人写跑fio的脚本用minimal格式来解析&#xff0c;因为这种格式返回的结果对与脚本(shell,python)解析log非常方便.下面介绍一下这种方式下,用Python来解析log 1 一般客户会要求结果中出现一下参数的值&#xff1a; bandwidth…