DevExpress Blazor UI組件使用了C#爲Blazor Server和Blazor WebAssembly創建高影響力的用戶體驗,這個UI自建庫提供了一套全面的原生Blazor UI組件(包括Pivot Grid、調度程序、圖表、數據編輯器和報表等)。
DevExpress Blazor控件目前已經升級到v23.2版本了,此版本進一步增強了可訪問性、網格及工具欄組件功能等,歡迎下載最新組件體驗!
可訪問性增強
此版本爲以下組件引入了一系列以可訪問性爲重點的增強:
- Grid(網格)
- Data Editors(數據編輯器)
- TreeView(樹視圖)
- Toolbar(工具欄)
- Menu 和 Context Menu(菜單)
這些增強包括:
- 所有元素的替代文本描述。
- 調整了元素結構,以確保更好地兼容屏幕閱讀器。
- 新的WAI-ARIA屬性和角色。
- 改進的鍵盤支持。
Grid(網格)
DevExpress Blazor Grid現在支持單元格編輯,在這個新的編輯模式中,您可以激活單元格編輯器併發布更改,而無需按Grid的Edit和Save按鈕。單元格編輯從單擊單個單元格開始,或在鍵盤聚焦的單元格上按Enter鍵,您可以使用鍵盤在單元格之間導航,並在焦點離開編輯行後自動發佈更改。
或者,如果您喜歡更可控的方法,可以在內存中積累更改並通過單擊外部Save按鈕保存它們。
單元格編輯支持驗證,並且可以無縫地與自動生成的編輯器、使用EditSettings定義的編輯器以及在CellEditTemplate中指定的DevExpress編輯器一起工作。
DevExtremeDataSource / CustomDataSource的分組和緩存支持
當使用DevExtremeDataSource或CustomDataSource連接到遠程數據時,您現在可以在DevExpress Blazor Grid中引入數據分組支持。Grid組件在不加載所有記錄的情況下從服務器請求有關組的信息,並在服務器端計算組摘要(總數)。
此外,DevExtremeDataSource和CustomDataSource現在都帶有內置的記錄緩存。緩存提高了網格的可用性,減少了請求的數量,特別是對於那些使用虛擬滾動模式的請求。
分級過濾菜單
DevExpress Blazor Grid現在爲DateTime列提供了一個分級過濾菜單,此功能允許您按月和年對可用日期進行分組,並簡化用戶在特定日期範圍內的記錄過濾。
列自動適配
爲了幫助改進數據表示和信息清晰度,DevExpress Blazor Grid列現在可以自動修改寬度以適應實際內容。您可以通過Grid的API(使用AutoFitColumnWidths方法)或簡單地雙擊列分隔符/分隔符來觸發此功能。
Toolbar(工具欄)
DevExpress Blazor Grid現在包括一個新的工具欄區域,位於其標題和組面板上方。該區域允許您在其中添加任何內容,它與DevExpress Blazor Toolbar配合得特別好,會自動調整其樣式以匹配網格。
快捷鍵和鍵盤支持增強
新版本引入了以下增強來改善Blazor Grid的鍵盤支持:
- 內置的彈出窗口和窗口現在更容易訪問。
- 焦點邊界現在只在用戶使用鍵盤導航Grid元素時出現,在鼠標導航後消失。
- 解決了一些與導航相關的問題。
此外,DevExpress Blazor Grid現在包括更多的快捷方式,以便用戶可以快速瀏覽數據:
- Home/End – 聚焦當前行的第一個/最後一個單元格。
- Ctrl + Home/Ctrl + End –聚焦當前頁面上的第一個/最後一個單元格。
- Page Up/Page Down – 向上/向下移動焦點一頁。
聚焦頁面時,可以使用以下快捷方式在網格頁面之間導航:
- Arrow Left/Arrow Right – 導航到上一頁/下一頁。
- Home/End – 導航到第一/最後一頁。
API增強
- DxGrid.AllowColumnReorder 和 DxGridColumn.AllowReorder – 防止用戶重新排序列選擇器和網格標題區域中的列。
- DxGrid.ColumnCaptionAligment 和 DxGridColumn.CaptionAlignment – 指定列標題的水平對齊方式。
- EmptyDataAreaTemplate – 自定義網格沒有記錄時顯示的佔位符。
- DisplayText – 指定摘要項的顯示文本模式,顯示文本字符串可以包括靜態文本和用於摘要值和列標題的佔位符。