界面控件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和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress新旧版本帮助文档获取可点击这篇文章查看——>《界面控件DevExpress v26.1帮助文档大全(CHM版本)》
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版本中,每当容器大小发生变化时,图表、量规和地图都会自动重新绘制。
