響應式UI組件DevExtreme中文教程 - 工具欄的自適應模式

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和響應式UI小部件集合,可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

本文涵蓋了對DevExtreme的JavaScript工具欄組件在v22.2版本中的一些更改,簡要描述了相關的實現細節。

獲取DevExtreme最新正式版下載

工具欄自適應模式

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

DevExtreme中文教程圖集

Angular

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

自定義Popup & Popover工具欄

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

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

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

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

DevExtreme中文教程圖集

Angular

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

自定義溢出菜單項

您可以根據需要自定義溢出菜單項的外觀, menuItemTemplate 屬性允許您指定用於呈現菜單項的模板。

如果您希望將自定義CSS類應用於此項目,請將其分配給cssClass 屬性。

下圖顯示了一個自定義菜單項(使用 Switch 組件和文本標籤),通過CSS類進行樣式化:

DevExtreme中文教程圖集

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應用中,您應該使用menuItemComponentmenuItemRender屬性作爲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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章