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

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

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

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

Ribbon选项卡属性

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

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

Razor

XML 复制代码

<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

XML 复制代码

<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

XML 复制代码

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

UI/UX功能增强

Accordion（折叠）

为了提高彩色和图像背景的可读性和对比度，官方增强了DevExpress Blazor Accordion的外观，如下所示：

过滤器面板现在包括一个可见的边框，来将其与列表项区分开来。
悬停和按下状态背景现在是半透明的。

Ribbon

DevExpress的Blazor Ribbon与Microsoft Office Ribbon设计更紧密地结合在一起。如下图所示，Blazor Ribbon的更新UI更加紧凑和一致：

TreeView

官方更新了Blazor TreeView组件的设计：

展开/折叠按钮现在更紧凑，并与Microsoft Office设计原则密切一致。
新的悬停和选定的状态颜色更好地适应不同的背景色。

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

Blazor Navigation

Ribbon选项卡属性

数据映射API功能增强

Accordion --- 延迟加载和预渲染

UI/UX功能增强

Accordion（折叠）

Ribbon

TreeView