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

在構建應用程序時，靜態布局可能還不夠，通過使用 "splitter" （“拆分器”）組件時，您可以將靜態頁面布局轉換為適應每個用戶需求的頁面布局。DevExtreme Splitter UI組件被設計成將頁面布局拆分為多個可調整大小的窗格（頁面部分）。

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

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

實現細節

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

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

<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自適應模式，啟用選項。調用onResize函數中的方法來適應容器大小的變化。

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

自定義Splitter（拆分器）外觀

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

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

對于這個示例，我們使用自定義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;
}

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

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

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

無論您是在構建客戶管理系統、項目規劃工具還是用戶身份驗證流程，UI模板都提供了一個堅實的基礎，您可以輕松地修改它來滿足特定的業務需求。

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

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

慧都科技是DevExpress的中國區的合作伙伴，DevExpress作為用戶界面領域的優秀產品，幫助企業高效構建權限管理、數據可視化（如網格/圖表/儀表盤）、跨平臺系統（WinForms/ASP.NET/.NET MAUI）及行業定制解決方案，加速開發并強化交互體驗。