DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序。从Angular和Reac到ASP.NET Core或VueDevExtreme包含全面的高性能和响应式UI小部件集合可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。本文涵盖了对DevExtreme的JavaScript工具栏组件在v22.2版本中的一些更改简要描述了相关的实现细节。DevExpress新旧版本帮助文档 下载可进QQ qun获取169725316工具栏自适应模式在项目中使用DevExtreme工具栏时您可以向工具栏本身添加任意数量的工具栏项不适合工具栏的项目将被隐藏。要避免这种操作并跨多行显示控件只需启用组件的multiline属性。Angulardx-toolbar ... [multiline]true !-- ... -- /dx-toolbar自定义Popup Popover工具栏DevExtreme 允许您自定义集成到Popup/Popover的顶部和底部工具栏(与我们的独立工具栏组件相同的方式)。若要指定项目是显示在顶部还是底部工具栏上请将顶部或底部值分配给工具栏属性您可以使用以下属性自定义工具栏项locateInMenumenuItemTemplate / menuItemRender / menuItemComponentcssClassshowText在溢出菜单中隐藏工具栏项溢出菜单可以包含隐藏的工具栏项(以帮助节省屏幕空间)如果希望在溢出菜单中永久显示工具栏项请将该项的locateInMenu属性设置为always。如果您想只在弹出窗口的宽度减小时隐藏项目也可以将相同的属性设置为auto。如果未指定locateInMenu属性则工具栏项不会隐藏在溢出菜单中。下图永久显示溢出菜单中的顶部工具栏项。Angulardx-popup ... dxi-toolbar-item ... toolbartop locateInMenualways /dxi-toolbar-item /dx-popup自定义溢出菜单项您可以根据需要自定义溢出菜单项的外观 menuItemTemplate 属性允许您指定用于呈现菜单项的模板。如果您希望将自定义CSS类应用于此项目请将其分配给cssClass 属性。下图显示了一个自定义菜单项(使用 Switch 组件和文本标签)通过CSS类进行样式化Angularapp.component.htmldx-popup ... dxi-toolbar-item ... locationafter locateInMenualways cssClassmenuItemCustomStyle menuItemTemplatemenuItemCustomTemplate /dxi-toolbar-item div *dxTemplatelet data of menuItemCustomTemplate spanShow details/span dx-switch/dx-switch /div /dx-popupapp.component.tsimport { Component } from angular/core; import { DxPopupModule, DxSwitchModule, ... } from devextreme-angular; // ... export class AppComponent {} app.component.css ::ng-deep.customMenuItemStyle { padding: 8px; }在React应用中您应该使用menuItemComponent和menuItemRender属性作为menuItemTemplate属性的别名。import React from react; import { Popup, ..., ToolbarItem, Switch } from devextreme-react/popup; const menuItemCustomTemplateReact.useCallback(() { return div spanShow details /span Switch/ /div; }, []); function App() { return ( Popup ... ToolbarItem ... menuItemRender{menuItemCustomTemplate} / /Popup ); } export default App;