DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

本文涵蓋了對DevExtreme的JavaScript工具欄組件在v22.2版本中的一些更改，簡要描述了相關(guān)的實現(xiàn)細節(jié)。

獲取DevExtreme最新正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進群討論

工具欄自適應(yīng)模式

在項目中使用DevExtreme 工具欄時，您可以向工具欄本身添加任意數(shù)量的工具欄項，不適合工具欄的項目將被隱藏。要避免這種操作并跨多行顯示控件，只需啟用組件的屬性。

Angular

<dx-toolbar ...
[multiline]="true"
>
<!-- ... -->
</dx-toolbar>

自定義Popup & Popover工具欄

DevExtreme 允許您自定義集成到/的頂部和底部工具欄(與我們的獨立工具欄組件相同的方式)。若要指定項目是顯示在頂部還是底部工具欄上，請將頂部或底部值分配給工具欄屬性，您可以使用以下屬性自定義工具欄項：

• / /

在溢出菜單中隱藏工具欄項

溢出菜單可以包含隱藏的工具欄項(以幫助節(jié)省屏幕空間)，如果希望在溢出菜單中永久顯示工具欄項，請將該項的屬性設(shè)置為always。如果您想只在彈出窗口的寬度減小時隱藏項目，也可以將相同的屬性設(shè)置為auto。如果未指定locateInMenu屬性，則工具欄項不會隱藏在溢出菜單中。

下圖永久顯示溢出菜單中的頂部工具欄項。

Angular

<dx-popup ... >
<dxi-toolbar-item
...
toolbar="top"
locateInMenu="always"
></dxi-toolbar-item>
</dx-popup>

自定義溢出菜單項

您可以根據(jù)需要自定義溢出菜單項的外觀， 屬性允許您指定用于呈現(xiàn)菜單項的模板。

如果您希望將自定義CSS類應(yīng)用于此項目，請將其分配給 屬性。

下圖顯示了一個自定義菜單項(使用 組件和文本標簽)，通過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應(yīng)用中，您應(yīng)該使用和屬性作為屬性的別名。

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;

更多DevExpress線上公開課、中文教程資訊請上中文網(wǎng)獲取