本文涵蓋了最近對DevExtreme JavaScript工具欄組件(v22.2)所做的更改，並簡要描述了相關的實現細節。
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流羣8：523159565 歡迎一起進羣討論
工具欄自適應方式
在項目中使用我們的工具欄時，用戶可以向工具欄本身添加任意數量的工具欄項，不適合工具欄的項目將被隱藏。要避免這種行爲並跨多行顯示控件，只需啓用組件的multiline屬性。
Angular
<dx-toolbar ... [multiline]="true" > <!-- ... --> </dx-toolbar>
彈出窗口和彈出窗口工具欄自定義
DevExtreme v22.2允許用戶自定義集成到Popup/Popover的頂部和底部工具欄(與獨立工具欄組件相同的方式)，若要指定項目是顯示在頂部還是底部工具欄上，請將頂部或底部值分配給工具欄屬性。用戶可以使用以下屬性自定義工具欄項：
在溢出菜單中隱藏工具欄項
溢出菜單可以包含隱藏的工具欄項(以幫助節省屏幕空間)，如果希望在溢出菜單中永久顯示工具欄項，請將該項的locateInMenu 屬性設置爲always。如果想只在彈出窗口的寬度減小時隱藏項目，也可以將相同的屬性設置爲auto。如果未指定locateInMenu屬性，則工具欄項不會隱藏在溢出菜單中。
下圖永久顯示溢出菜單中的頂部工具欄項。
Angular
<dx-popup ... > <dxi-toolbar-item ... toolbar="top" locateInMenu="always" ></dxi-toolbar-item> </dx-popup>
自定義溢出菜單項
用戶可以根據需要自定義溢出菜單項的外觀，menuItemTemplate屬性允許指定用於呈現菜單項的模板。
如果您希望將自定義CSS類應用於此項目，請將其分配給cssClass屬性。
下圖顯示了一個自定義菜單項(使用Switch組件和文本標籤)，通過CSS類進行樣式化：
Angular
app.component.html
<dx-popup ... > <dxi-toolbar-item ... location="after" locateInMenu="always" cssClass="menuItemCustomStyle" menuItemTemplate="menuItemCustomTemplate" > </dxi-toolbar-item> <div *dxTemplate="let data of 'menuItemCustomTemplate'"> <span>Show details</span> <dx-switch></dx-switch> </div> </dx-popup>
app.component.ts
import { 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 menuItemCustomTemplate=React.useCallback(() => {
return `<div>
<span>Show details </span> <Switch/>
</div>`;
}, []);
function App() {
return (
<Popup ... >
<ToolbarItem
...
menuItemRender={menuItemCustomTemplate}
/>
</Popup>
);
}
export default App;