DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創建高影響力的用戶體驗，這個UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調度程序、圖表、數據編輯器和報表等）。

DevExpress Blazor控件目前已經升級到v24.1版本了，此版本文件管理器、表單布局、富文本編輯器等控件全新升級，歡迎下載最新組件體驗！

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

List Box（列表框）

全新的搜索和過濾API

DevExpress Blazor List Box（列表框）引入了新的API，允許您將其連接到外部搜索/過濾UI元素：

• – 指定列表框用來篩選和突出顯示搜索結果的文本。
• – 指定List Box（列表框）如何解釋按空格分隔得搜索字符串。
• // – 允許您使用CriteriaOperator語言應用過濾器（任何復雜性）。

全新的滾動API

下面的新API允許您滾動到一個特定的列表框項：

• – 滾動到具有指定可見索引的項。
• – 在列表中查找數據項并滾動到它。

日期編輯和時間編輯

支持DateOnly和TimeOnly

DevExpress Blazor Date Edit 和 Time Edit組件現在分別支持DateOnly和TimeOnly值，所有編輯器的特性——包括掩碼、格式化API和驗證，現在都可以在這些新數據類型下正常工作了！

文件管理

全新的上傳外觀

DevExpress Blazor Upload（上傳）組件的文件列表具有改進的外觀和樣式，為了使列表更易于理解和視覺緊湊，我們刪除了常見的進度條、調整和重新排列UI元素、更新圖標，并在某些操作按鈕中添加文本。

表單布局

項目說明模板

新的屬性允許您在每個LayoutItem標題附近設置圖標、按鈕、鏈接或其他元素。

Razor

<DxFormLayoutItem>
<CaptionTemplate>
<div class="email-caption">
<label for="contactEmail">Email</label>
<DxButton CssClass="info-icon-btn"
IconCssClass="info-icon text-info"
RenderStyle="@ButtonRenderStyle.None"
Click="() => IsInfoOpen = !IsInfoOpen" />
<DxFlyout @bind-IsOpen=@IsInfoOpen
PositionTarget=".info-icon-btn"
PreventCloseOnPositionTargetClick="true"
Width="240">
Email must contain the company's domain name.
</DxFlyout>
</div>
</CaptionTemplate>
<Template>
<DxTextBox @bind-Text="@Email" InputId="contactEmail"/>
</Template>
</DxFormLayoutItem>

富文本編輯器

全新的表格API

在v24.1中，DevExpress Rich Text Editor for Blazor允許您在運行時修改表格布局、裝飾和結構。

Razor

<DxRichEdit @ref="@richEdit" />
@code {
DxRichEdit richEdit { get; set; }
@* ... *@
try {
@* ... *@
var columnCount = 4;
var rowCount = 5;
richEdit.DocumentAPI.BeginUpdate();
await richEdit.DocumentAPI.Tables.CreateAsync(0, columnCount, rowCount);
for (int i = 0; i < rowCount; i++)
for (int j = 0; j < columnCount; j++) {
var myTable = await richEdit.DocumentAPI.Tables.GetAsync(0);
var cellPosition = myTable.Rows[i].Cells[j].Interval.Start;
await richEdit.DocumentAPI.AddTextAsync(cellPosition, "Row=" + (i + 1) + ",Column=" + (j + 1));
}
richEdit.DocumentAPI.EndUpdate();
@* ... *@
}
catch (OperationCanceledException e) {
@* ... *@
}
}

HTML導出/導入

DevExpress Rich Text Editor for Blazor現在支持HTML格式的文檔導入/導出，您可以在主子文檔中添加HTML標記（方法重載），獲取主子文檔的HTML文本和標記（方法重載），并將文檔內容下載到HTML格式的文件中。

自定義上下文菜單

v24.1為DevExpress Blazor富文本編輯器引入了擴展的UI自定義選項，現在可以自定義組件的上下文菜單和相關的子菜單。處理事件：

• 添加或刪除內置菜單項
• 添加自定義菜單項
• 自定義項目外觀/操作

在v24.1中，您還可以使用 屬性控制上下文菜單的可見性。

Razor

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
void OnCustomizeContextMenu(IContextMenuItemCollection items) {
if (selection.Intervals[0].Length > 0) {
var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
textToSearch = span.Text.Trim();
}
else
textToSearch = null;
var searchItem = items.AddCustomItem(0, "Google Search...", async () => {
var url = String.Format("http://www.google.com/search?q={0}", HttpUtility.UrlEncode(textToSearch));
await JSRuntime.InvokeVoidAsync("open", url, "_blank");
});
searchItem.Enabled = !string.IsNullOrEmpty(textToSearch);
searchItem.IconCssClass = "search-icon";
items.Remove(RichEditContextMenuItemNames.CutSelection);
items.Remove(RichEditContextMenuItemNames.CopySelection);
items.Remove(RichEditContextMenuItemNames.Paste);
var clipboardItem = items.AddCustomItem(1, "Clipboard");
clipboardItem.BeginGroup = true;
clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
}
}

更多產品更新咨詢，請