界面控件DevExtreme UI组件——增强的API功能

虽然DevExtreme刚刚发布了v23.1,但今天我们仍然要继续总结一下之前的主要更新(v22.2)中发布的一些与DevExtreme API相关的重要特性。

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

Hide/Display API增强

onshow /onHiding事件中的'cancel'参数现在支持Promise类型,允许用户在组件显示或隐藏之前执行异步操作。

此增强可用于以下UI组件:

  • Popup
  • Popover
  • Tooltip
  • Toast
  • LoadPanel

Show/hide方法现在返回一个Promise对象,该对象将在操作完成后解析。如果操作被取消,此Promise将被拒绝。

jQuery

const popup = $("#popup")
.dxPopup({
onShowing: (e) => {
e.cancel = confirm("Cancel showing?");
},
})
.dxPopup("instance");
$("#button").dxButton({
text: "Show",
onClick: () => {
popup
.show()
.then(() => {
alert("Show promise is resolved");
})
.catch(() => {
alert("Show promise is rejected");
});
},
});
Slider & Range Slider — 值改变模式

在之前,只要用户移动滑块句柄,
 Slider和
RangeSlider组件的值就会立即改变。我们新的
 valueChangeMode选项允许您选择不同的模式:值仅在句柄释放时更改。

React

<RangeSlider
value={value}
valueChangeMode="onHandleRelease"
onValueChanged={handleValueChange}
/>
SelectBox和TagBox - 提交自定义项目的附加事件

以前,
SelectBox和
TagBox只能在用户按Enter键时创建新项,这种默认操作已经改变:在按Enter键事件和组件失去焦点时都会创建项。用户可以将DOM事件分配给 customItemCreateEvent
属性,以更改创建新项时引发的事件。

Angular

<dx-select-box ...
[acceptCustomValue]="true"
(onCustomItemCreating)="addCustomItem($event)"
customItemCreateEvent="focusout"
></dx-select-box>
VectorMap — 控制面板自定义

现在用户可以改变VectorMap控件的工具条元素的可见性:平移控制和缩放工具条,为此使用panVisible

zoomVisible属性。

Vue

<DxVectorMap ... >
<DxControlBar
:pan-visible="true"
:zoom-visible="false"
/>
</DxVectorMap>
数据可视化组件 - 适应容器大小调整

在v22.2版本中,每当容器大小发生变化时,图表、量规和地图都会自动重新绘制。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉树进阶(搜索二叉树)

目录 引言 1.二叉搜索树的模拟实现 1.1 链式二叉树的定义 1.2 二叉搜索树的模拟实现 1.2.1 二叉搜索树的结点类 1.2.2 二叉搜索树类的构造与中序遍历实现 1.2.3 增 1.非递归实现 2.非递归实现 1.2.4 查 1.非递归实现 2.递归实现 1.2.5 删 1.非递归实现 (1)情…

基于C语言设计的足球信息查询系统

完整资料进入【数字空间】查看——baidu搜索"writebug" 需求分析与概要设计 2.1 项目说明 我们小组的选题主要是面向足球爱好者&#xff0c;在普通社交软件的基础之上&#xff0c;围绕足球的主题展开设计&#xff0c;以便于他们能够更好的交流相关的话题&#xff…

opencv 基础图像操作-彩色图像

opencv 基础图像操作-彩色图像 彩色图像 相比二值图像和灰度图像&#xff0c;彩色图像是更常见的一类图像&#xff0c;它能表现更丰富的细节信息。 神经生理学实验发现&#xff0c;在视网膜上存在三种不同的颜色感受器&#xff0c;能够感受三种不同的颜色&#xff1a;红色、绿色…

HarmonyOS/OpenHarmony应用开发-程序包安装、卸载、更新流程

一、应用程序包安装和卸载流程 1.开发者 开发者可以通过调试命令进行应用的安装和卸载&#xff0c;可参考多HAP的调试流程。 图1 应用程序包安装和卸载流程&#xff08;开发者&#xff09; 2.终端设备用户 开发者将应用上架应用市场后&#xff0c;终端设备用户可以在终端设…

ELK-日志服务【filebeat-安装使用】

目录 【1】安装Filebeat 【2】配置-测试 【3】配置使用Filebeat 【4】filebeat-收集系统文件日志 【5】配置filebeat&#xff0c;将/var/log/all.log日志采集到es集群中 【6】定制索引名称 【7】收集多个web节点的日志&#xff0c;输出到相同的索引中 【8】filebeat-收…

matlab处理数据

Matlab异常值处理https://blog.csdn.net/weixin_57345774/article/details/126965835?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126965835%22%2C%22source%22%3A%22qq_53011270%22%7D&fromshareblogdetail 异常值识别和…

【ELK企业级日志分析系统】部署Filebeat+Kafka+Logstash+Elasticsearch+Kibana集群详解(EFLFK)

部署FilebeatKafkaLogstashElasticsearchKibana集群详解 1. Kafka1.1 Kafka概述1.1.1 为什么需要消息队列&#xff08;MQ&#xff09;1.1.2 使用消息队列的好处 1.2 消息队列的两种模式1.3 Kafka定义1.3.1 Kafka简介1.3.2 Kafka的特性1.3.3 Kafka系统架构1.3.4 Partation数据路…

基于预测控制模型的自适应巡航控制仿真与机器人实现(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 自适应巡航控制技术为目前由于汽车保有量不断增长而带来的行车安全、驾驶舒适性及交通拥堵等问题提供了一条有效的解决途径&am…

OpenCV中的RGB与YUV转换

1 基本概念 YUV 颜色空间从模拟电视时代开始就被广泛应用于彩色图像的转换与处理。其基于一个 3x3 的矩阵&#xff0c;通过线性变换将 RGB 像素转换为一个亮度&#xff08;Luma&#xff09;分量 Y 以及两个色度&#xff08;Chroma&#xff09;分量 U 和 V。由于模拟电视存在着多…

3分钟阿里云轻量应用服务器和云服务器的区别对比

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;云服务器ECS是明星级云服务器&#xff0c;轻量应用服务器可以理解为简化版的云服务器ECS&#xff0c;轻量适用于单机应用&#xff0c;云服务器ECS适用于集群类高可用高容灾应用&#xff0c;阿里云百科来详细说下阿里云轻…

ArcGIS如何制作横版图例

如果你经常制图&#xff0c;肯定使用过插入图例这个功能&#xff0c;默认情况下&#xff0c;插入的图例是竖着的&#xff0c;在某些情况下&#xff0c;如果需要横着的图例是否可以实现呢&#xff0c;答案是肯定的&#xff0c;这里为大家介绍一下ArcGIS如何制作横版图例&#xf…

opencv 05 彩色RGB像素值操作

opencv 05 彩色RGB像素值操作 RGB 模式的彩色图像在读入 OpenCV 内进行处理时&#xff0c;会按照行方向依次读取该 RGB 图像的 B 通道、G 通道、R 通道的像素点&#xff0c;并将像素点以行为单位存储在 ndarray 的列中。例如&#xff0c; 有一幅大小为 R 行C 列的原始 RGB 图像…