DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗(yàn)，這個(gè)UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調(diào)度程序、圖表、數(shù)據(jù)編輯器和報(bào)表等）。

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

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

List Box（列表框）

全新的搜索和過濾API

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

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

全新的滾動(dòng)API

下面的新API允許您滾動(dòng)到一個(gè)特定的列表框項(xiàng)：

• – 滾動(dòng)到具有指定可見索引的項(xiàng)。
• – 在列表中查找數(shù)據(jù)項(xiàng)并滾動(dòng)到它。

日期編輯和時(shí)間編輯

支持DateOnly和TimeOnly

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

文件管理

全新的上傳外觀

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

表單布局

項(xiàng)目說明模板

新的屬性允許您在每個(gè)LayoutItem標(biāo)題附近設(shè)置圖標(biāo)、按鈕、鏈接或其他元素。

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允許您在運(yùn)行時(shí)修改表格布局、裝飾和結(jié)構(gòu)。

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導(dǎo)出/導(dǎo)入

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

自定義上下文菜單

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

• 添加或刪除內(nèi)置菜單項(xiàng)
• 添加自定義菜單項(xiàng)
• 自定義項(xiàng)目外觀/操作

在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);
}
}

更多產(chǎn)品更新咨詢，請(qǐng)