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ù)編輯器等。

在構(gòu)建應(yīng)用程序時，靜態(tài)布局可能還不夠，通過使用 "splitter" （“拆分器”）組件時，您可以將靜態(tài)頁面布局轉(zhuǎn)換為適應(yīng)每個用戶需求的頁面布局。DevExtreme Splitter UI組件被設(shè)計成將頁面布局拆分為多個可調(diào)整大小的窗格（頁面部分）。

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

 在本文中我們將探索一個簡單但非常流行的與布局相關(guān)的用例：調(diào)整布局“部分”的大小來顯示更多的業(yè)務(wù)數(shù)據(jù)（當(dāng)然，我們將使用DevExtreme Splitter來完成此操作），下面的GIF圖是最終的頁面布局：

實現(xiàn)細(xì)節(jié)

DevExtreme Splitter將布局劃分為多個窗格，這些窗格可以通過以下基本設(shè)置進行配置：

DevExtreme UI組件依賴于嵌套配置（包括窗格）的Item聲明，要在Splitter窗格中包含組件，您需要創(chuàng)建一個單獨的模板或使用以下方法（直接使用Item標(biāo)記聲明）。

<Splitter onResize={onResize} id="splitter" height="auto">
<Item minSize={250}>
<DataGridComponent ref={grid} />
</Item>
<Item minSize={250} size="55%">
<ChartComponent />
</Item>
</Splitter>

本示例將DevExtreme 和組件添加到窗格中。

在這個特定的實例中，用戶可以通過展開Splitter最左邊的窗格來查看隱藏的DataGrid列。對于DataGrid自適應(yīng)模式，啟用選項。調(diào)用onResize函數(shù)中的方法來適應(yīng)容器大小的變化。

const onResize = useCallback(() => {
cancelAnimationFrame(animationRefFrame.current);
animationRefFrame.current = requestAnimationFrame(() =>
grid.current.instance().updateDimensions()
);
}, [grid]);

自定義Splitter（拆分器）外觀

一旦您設(shè)置了一個窗格布局，Splitter顯示窗格之間的分隔條，您可以自定義此視覺元素來匹配相關(guān)的設(shè)計需求。

例如，可以修改分隔條寬度（以像素為單位），還可以使用自定義CSS規(guī)則修改組件外觀。

對于這個示例，我們使用自定義CSS來修改Splitter和它的窗格：

// modifies the Splitter separator bar:
.dx-resize-handle {
border-radius: 50px;
}

// rounds the corners of the pane content:
.dx-datagrid-headers.dx-datagrid-nowrap.dx-bordered-top-view {
border-radius: 8px 8px 0 0 !important;
}
.dx-gridbase-container > .dx-bordered-bottom-view {
border-radius: 0 0 8px 8px !important;
}

如下圖所示，您可以根據(jù)需求（通過設(shè)置、CSS樣式等）個性化Splitter分隔符。

用于附加布局策略的UI模板

這個示例布局的靈感來自DevExtreme UI模板庫，這個UI模板庫（適用于Angular、React和Vue）包括各種頁面布局/使用場景的應(yīng)用模板，包括以下內(nèi)容：

無論您是在構(gòu)建客戶管理系統(tǒng)、項目規(guī)劃工具還是用戶身份驗證流程，UI模板都提供了一個堅實的基礎(chǔ)，您可以輕松地修改它來滿足特定的業(yè)務(wù)需求。

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購、技術(shù)選型、個性化維保等服務(wù)，幫助客戶實現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險可控。

慧都科技是DevExpress的中國區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強化交互體驗。