界面控件DevExpress Blazor v26.1新版亮点 - Navigation（导航）

原创于 2026-08-20 16:35:27 发布 · 228 阅读

本内容遵循CC 4.0 BY-SA版权协议

DevExpress Blazor控件为使用C#为Blazor服务器和Blazor WebAssembly创建高影响力的用户体验，其附带了70+个原生的Blazor组件（包括DataGrid、Pivot Table、Scheduler、图表、数据编辑器和报表）。

在上文中（点击这里回顾>>）为大家介绍了DevExpress Blazor v26.1中Grid 和 TreeList控件增强功能，本文将继续介绍新版本增强的Navigation（导航）功能，希望能帮助到大家~欢迎点赞关注哦，不定期更新~

DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316

Blazor Navigation

Ribbon选项卡属性

DevExpress Blazor Ribbon Tab现在支持标准HTML属性，使用选项卡标题的Attributes属性，使用选项卡内容区域的ContentAttributes。

这些属性提高了可访问性，并确保UI自动化的稳定元数据。

Razor

<DxRibbon>
    <DxRibbonTab Text="Home"
                Attributes="tabHeaderAttributes"
                ContentAttributes="tabContentAttributes">
        <DxRibbonGroup>
            <DxRibbonItem Text="New" />
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>

@code {
    Dictionary<string, object> tabHeaderAttributes = new() {
        { "data-testid", "ribbon-tab-home" }
    };
    Dictionary<string, object> tabContentAttributes = new() {
        { "aria-label", "Home tab items" }
    };
}

数据映射API功能增强

DevExpress Blazor TreeView、Accordion和Toolbar数据映射API现在公开节点和项目设置的其他属性：

TreeView (DxTreeViewDataMapping)

Expanded — 映射用于指定节点的初始展开状态的布尔字段。
Selected — 映射用于指定节点的初始选定状态的布尔字段。
BadgeText — 将字符串字段映射到节点badge文本。
Attributes — 映射为节点提供自定义HTML属性的字段。

Accordion (DxAccordionDataMapping)

Expanded — 映射用于指定项的初始展开状态的布尔字段。
Selected — 映射用于指定项目的初始选定状态的布尔字段。
Attributes — 映射为项目提供自定义HTML属性的字段。

Toolbar (DxToolbarDataMapping)

Alignment — 映射指定项目位置的ToolbarItemAlignment字段。
RenderStyle — 映射定义项外观的ButtonRenderStyle字段。

Razor

<DxTreeView Data="@Departments">
    <DataMappings>
        <DxTreeViewDataMapping Children="Children"
                               Text="Name"
                               Expanded="IsExpanded" />
    </DataMappings>
</DxTreeView>

@code {
    List<Department> Departments = new List<Department> {
        new Department {
            Name = "Engineering",
            IsExpanded = true,
            Children = new List<Department> {
                new Department { Name = "Frontend" },
                new Department { Name = "Backend" }
            }
        },
        new Department {
            Name = "Marketing",
            Children = new List<Department> {
                new Department { Name = "Digital" },
                new Department { Name = "Content" }
            }
        }
    };
}

Accordion — 延迟加载和预渲染

RenderMode属性定义DevExpress Blazor Accordion渲染内容的时间：

使用Expanded仅在展开项时呈现Accordion项内容，并在折叠项时将其从DOM中移除。该模式以较小的呈现延迟为代价，提高了页面加载速度并减少了DOM大小。
使用All在页面加载时渲染所有Accordion项，这种模式提高了UI响应性，但增加了页面加载时间和DOM大小。
当项目首次展开时，使用OnDemand呈现Accordion项目内容，并在项目折叠后将其保留在DOM中。此模式平衡页面加载性能、响应性和资源消耗。

Razor

<DxAccordion RenderMode="ExpandableContentRenderMode.All">
    <Items>
        <DxAccordionItem Text="Shapes" Expanded="true">
            <Items>
                <DxAccordionItem Text="Circle" />
                <DxAccordionItem Text="Square" />
            </Items>
        </DxAccordionItem>
        <DxAccordionItem Text="Templates" />
    </Items>
</DxAccordion>