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 v24.1已全新發(fā)布，新版本發(fā)布了全新的分割器組件、改進(jìn)并增強(qiáng)了UI/UX和API等，歡迎下載最新版組件體驗！

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

全新的分割器組件

新的Splitter（分割器）組件允許您將頁面或部分劃分為多個可調(diào)面板。

這些面板可以是：

• resizable - 帶有拖拽圖標(biāo)的句柄允許用戶修改大小。
• collapsible - 帶有箭頭圖標(biāo)的句柄允許用戶折疊面板。

如果啟用這兩個屬性，句柄將同時顯示兩個圖標(biāo)，并且用戶可以根據(jù)需要調(diào)整/折疊給定面板的大小。如果兩個屬性都為false，則句柄仍然隱藏。

Splitter（分割器）組件可以垂直或水平定向，方向影響以下與面板相關(guān)的屬性（可以以像素或百分比指定）。

• size - 指定面板的初始寬度(水平方向)或高度(垂直方向)。
• maxSize, minSize - 定義面板的調(diào)整大小限制。
• collapsedSize - 指定折疊時可折疊窗格的大小。

Angular

<dx-splitter orientation="vertical">
<dxi-item
[collapsible]="true"
size="50%"
minSize="20px"
сollapsedSize="30px"
>
</dxi-item>
</dx-splitter>

React

const App = () => (
<Splitter orientation="vertical">
<Item
collapsible={true}
size="50%"
minSize="20px"
сollapsedSize="30px"
/>
</Splitter>
);
export default App;

Vue

<template>
<DxSplitter orientation="vertical">
<DxItem
:collapsible="true"
size="50%"
min-size="20px"
collapsed-size="30px"
/>
</DxSplitter>
</template>

jQuery

$('#splitter').dxSplitter({
orientation: 'vertical',
items: [
{
collapsible: true,
size: '50%',
minSize: '20px',
collapsedSize: '30px',
},
],
});

Splitter（分割器）面板可以包含多種內(nèi)容類型，從簡單的HTML到復(fù)雜的組件。您可以在item標(biāo)簽中放置HTML標(biāo)記，或者使用以下屬性填充內(nèi)容面板：

• itemTemplate - 為所有面板定義自定義模板。
• template - 為每個特定面板設(shè)置自定義模板。

若要自定義分割器外觀，請指定separatorSize屬性來修改手柄較短邊的大小，您還可以通過CSS更改顏色和圖標(biāo)。

啟用Splitter（分割器）組件中的allowKeyboardNavigation ，通過快捷鍵控制Splitter（分割器）操作、鏡像鼠標(biāo)功能。

對于復(fù)雜的布局，如我們的演示中所示的嵌套分割器(它還強(qiáng)調(diào)了使用模板進(jìn)行內(nèi)容插入)。

UI/UX和API增強(qiáng)

DropDownButton - 自定義按鈕模板

在v24.1中，您可以自定義內(nèi)容(例如頭像或多行文本)替換DropDownButton中的基本按鈕。

Angular

<dx-drop-down-button icon="spindown" template="button-template">
<div *dxTemplate="let data of 'button-template'">
<div class="text-container">
<div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
<div class="position"> {{ currentEmployee.Position }} </div>
</div>
<span class="dx-icon-{{ data.icon }} dx-icon"></span>
</div>
</dx-drop-down-button>

React

const renderButton = (data) => {
return (
<React.Fragment>
<div className="text-container">
<div class="name"> {currentEmployee.FirstName} {currentEmployee.LastName} </div>
<div class="position"> {currentEmployee.Position} </div>
</div>
<span className={"dx-icon-" + data.icon + " dx-icon"}></span>
</React.Fragment>
);
};
export default function App() {
return (
<DropDownButton
icon="spindown"
render={renderButton}
/>
);
}

Vue

<template>
<DxDropDownButton
icon="spindown"
template="button-template"
>
<template #button-template="{ data }">
<div class="text-container">
<div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
<div class="position"> {{ currentEmployee.Position }} </div>
</div>
<span :class="'dx-icon-' + data.icon + ' dx-icon'"></span>
</template>
</DxDropDownButton>
</template>

jQuery

$("#myDropDownButton").dxDropDownButton({
icon: 'spindown',
template: (data, $element) => {
const $textContainer = $('<div class="text-container">').appendTo($element);
$(`<div class='name'>${currentEmployee.FirstName} {currentEmployee.LastName}</div>`).appendTo($textContainer);
$(`<div class='position'> ${currentEmployee.Position} </div>`).appendTo($textContainer);
$(`<span class="dx-icon-${data.icon} dx-icon"></span>`).appendTo($element);
},
});

菜單/ContextMenu - 項目滾動

超過頁面大小的子菜單(在菜單或上下文菜單中)現(xiàn)在可以滾動。

您可以根據(jù)需要使用CSS樣式表自定義子菜單，例如下面的代碼片段限制了ContextMenu中的子菜單高度：

CSS

.dx-context-menu .dx-menu-items-container {
max-height: 200px;
}

在Menu組件中，使用onSubmenuShowing 函數(shù)來配置與滾動相關(guān)的設(shè)置。例如，當(dāng)項數(shù)超過指定限制時，可以限制子菜單的大?。?

Angular

onSubmenuShowing({ submenuContainer, itemData } {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = this.limitSubmenuHeight ? `200px` : '';
}
}

React

const onSubmenuShowing = useCallback(({ submenuContainer, itemData }) => {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = limitSubmenuHeight ? `200px` : '';
}
}, []);

Vue

function onSubmenuShowing({ submenuContainer, itemData } {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = limitSubmenuHeight.value ? '200px' : '';
}
}

jQuery

onSubmenuShowing: ({ submenuContainer, itemData }) => {
if (itemData.items.length > 5) {
$(submenuContainer).css('maxHeight', 200 || '');
}
}

表單 - 組標(biāo)題自定義內(nèi)容

新表單groupItem.captionTemplate選項為組標(biāo)題啟用自定義內(nèi)容替換。

HTML編輯器 - 拼寫檢查和CSP支持

DevExtreme HTML編輯器現(xiàn)在在所有支持的瀏覽器中使用拼寫檢查功能，這個新增功能通過實時拼寫糾正/建議支持增強(qiáng)了文本編輯功能。

以前的版本在向HTML編輯器傳遞帶有內(nèi)聯(lián)樣式的標(biāo)記時需要Content Security Policy (CSP)指令，DevExtreme HTML編輯器v24.1完全支持CSP。

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