DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序。从Angular和Reac到ASP.NET Core或VueDevExtreme包含全面的高性能和响应式UI小部件集合可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。DevExtreme v24.1已全新发布新版本发布了全新的分割器组件、改进并增强了UI/UX和API等DevExpress新旧版本帮助文档下载可进QQ qun获取169725316全新的分割器组件新的Splitter分割器组件允许您将页面或部分划分为多个可调面板。这些面板可以是resizable - 带有拖拽图标的句柄允许用户修改大小。collapsible - 带有箭头图标的句柄允许用户折叠面板。如果启用这两个属性句柄将同时显示两个图标并且用户可以根据需要调整/折叠给定面板的大小。如果两个属性都为false则句柄仍然隐藏。Splitter分割器组件可以垂直或水平定向方向影响以下与面板相关的属性可以以像素或百分比指定。size - 指定面板的初始宽度(水平方向)或高度(垂直方向)。maxSize, minSize - 定义面板的调整大小限制。collapsedSize - 指定折叠时可折叠窗格的大小。Angulardx-splitter orientationvertical dxi-item [collapsible]true size50% minSize20px сollapsedSize30px /dxi-item /dx-splitterReactconst App () ( Splitter orientationvertical Item collapsible{true} size50% minSize20px сollapsedSize30px / /Splitter ); export default App;Vuetemplate DxSplitter orientationvertical DxItem :collapsibletrue size50% min-size20px collapsed-size30px / /DxSplitter /templatejQuery$(#splitter).dxSplitter({ orientation: vertical, items: [ { collapsible: true, size: 50%, minSize: 20px, collapsedSize: 30px, }, ], });Splitter分割器面板可以包含多种内容类型从简单的HTML到复杂的组件。您可以在item标签中放置HTML标记或者使用以下属性填充内容面板itemTemplate - 为所有面板定义自定义模板。template - 为每个特定面板设置自定义模板。若要自定义分割器外观请指定separatorSize属性来修改手柄较短边的大小您还可以通过CSS更改颜色和图标。启用Splitter分割器组件中的allowKeyboardNavigation 通过快捷键控制Splitter分割器操作、镜像鼠标功能。对于复杂的布局如我们的演示中所示的嵌套分割器(它还强调了使用模板进行内容插入)。UI/UX和API增强DropDownButton - 自定义按钮模板在v24.1中您可以自定义内容(例如头像或多行文本)替换DropDownButton中的基本按钮。Angulardx-drop-down-button iconspindown templatebutton-template div *dxTemplatelet data of button-template div classtext-container div classname {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} /div div classposition {{ currentEmployee.Position }} /div /div span classdx-icon-{{ data.icon }} dx-icon/span /div /dx-drop-down-buttonReactconst renderButton (data) { return ( React.Fragment div classNametext-container div classname {currentEmployee.FirstName} {currentEmployee.LastName} /div div classposition {currentEmployee.Position} /div /div span className{dx-icon- data.icon dx-icon}/span /React.Fragment ); }; export default function App() { return ( DropDownButton iconspindown render{renderButton} / ); }Vuetemplate DxDropDownButton iconspindown templatebutton-template template #button-template{ data } div classtext-container div classname {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} /div div classposition {{ currentEmployee.Position }} /div /div span :classdx-icon- data.icon dx-icon/span /template /DxDropDownButton /templatejQuery$(#myDropDownButton).dxDropDownButton({ icon: spindown, template: (data, $element) { const $textContainer $(div classtext-container).appendTo($element); $(div classname${currentEmployee.FirstName} {currentEmployee.LastName}/div).appendTo($textContainer); $(div classposition ${currentEmployee.Position} /div).appendTo($textContainer); $(span classdx-icon-${data.icon} dx-icon/span).appendTo($element); }, });菜单/ContextMenu - 项目滚动超过页面大小的子菜单(在菜单或上下文菜单中)现在可以滚动。您可以根据需要使用CSS样式表自定义子菜单例如下面的代码片段限制了ContextMenu中的子菜单高度CSS.dx-context-menu .dx-menu-items-container { max-height: 200px; }在Menu组件中使用onSubmenuShowing 函数来配置与滚动相关的设置。例如当项数超过指定限制时可以限制子菜单的大小AngularonSubmenuShowing({ submenuContainer, itemData } { if (itemData.items.length 5) { submenuContainer.style.maxHeight this.limitSubmenuHeight ? 200px : ; } }Reactconst onSubmenuShowing useCallback(({ submenuContainer, itemData }) { if (itemData.items.length 5) { submenuContainer.style.maxHeight limitSubmenuHeight ? 200px : ; } }, []);Vuefunction onSubmenuShowing({ submenuContainer, itemData } { if (itemData.items.length 5) { submenuContainer.style.maxHeight limitSubmenuHeight.value ? 200px : ; } }jQueryonSubmenuShowing: ({ submenuContainer, itemData }) { if (itemData.items.length 5) { $(submenuContainer).css(maxHeight, 200 || ); } }表单 - 组标题自定义内容新表单groupItem.captionTemplate选项为组标题启用自定义内容替换。HTML编辑器 - 拼写检查和CSP支持DevExtreme HTML编辑器现在在所有支持的浏览器中使用拼写检查功能这个新增功能通过实时拼写纠正/建议支持增强了文本编辑功能。以前的版本在向HTML编辑器传递带有内联样式的标记时需要Content Security Policy (CSP)指令DevExtreme HTML编辑器v24.1完全支持CSP。