SuperAPI AI 工具集

use-igniteui-blazor

前端与建站

查看项目

更新于 10-15 18:31

技能介绍

用途

该技能用于在 Blazor 应用中添加、配置或审查 Ignite UI for Blazor Lite 组件支持。适用场景包括安装 IgniteUI.Blazor.Lite 或 IgniteUI.Blazor.GridLite 包、注册服务、引用命名空间、链接主题样式表以及设置渲染模式。

主要能力

包安装

在添加包之前,需检查目标项目的目标框架和现有包引用。最低支持的目标框架版本为 .NET 8.0。如果已引用 IgniteUI.Blazor 或 IgniteUI.Blazor.Trial,应保持该包策略,不要添加 Lite 或 GridLite。仅在用户明确要求时才切换包系列,替换冲突引用而非同时保留两者。

dotnet add package IgniteUI.Blazor.Lite       # OSS core UI components (MIT)
dotnet add package IgniteUI.Blazor.GridLite   # OSS lightweight grid (MIT)

核心控件(如 IgbInput、IgbCombo、IgbDialog)使用 IgniteUI.Blazor.Lite,轻量网格使用 IgniteUI.Blazor.GridLite。仅当应用同时需要两者时才引用两个包。不要自行发明按组件拆分的包(如 IgniteUI.Blazor.Combo)。

图表、地图、仪表及其他高级组件不包含在 Lite 中。在推荐引用前,需检查所请求组件对应的包。

服务注册

通常在 Program.cs 中:

builder.Services.AddIgniteUIBlazor();   // no modules pre-loaded; each loads on first render

也可传入 typeof(Igb<Name>Module) 值以预先加载特定模块:

builder.Services.AddIgniteUIBlazor(
    typeof(IgbInputModule), typeof(IgbComboModule), typeof(IgbDialogModule));

模块名称始终遵循 Igb{ComponentName}Module 格式。传入模块会在启动时预先加载,增加初始传输量以降低首次渲染延迟。未列出的组件仍会在首次渲染时注册自己的模块。

对于仅使用 GridLite 的配置,不要调用 AddIgniteUIBlazor() 或添加手动 Ignite UI 脚本标签。引用 IgniteUI.Blazor.GridLite,添加控件命名空间,并链接下方所示的 GridLite 样式表。

拆分式 Blazor Web App:需将每个所需包同时添加到 Server 和 Client 的 .csproj 文件中。对于核心控件,请用实际项目路径替换以下示例。

dotnet add Server/Server.csproj package IgniteUI.Blazor.Lite
dotnet add Client/Client.csproj package IgniteUI.Blazor.Lite

如需 GridLite,也需将 IgniteUI.Blazor.GridLite 添加到两个项目。对于仅使用 GridLite 的应用,只添加该包并跳过下方的服务注册。

对于 Lite,需在 server 和 client 的 Program.cs 中都调用 AddIgniteUIBlazor()。

// Server
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddIgniteUIBlazor();

// Client (WebAssemblyHostBuilder)
builder.Services.AddIgniteUIBlazor();

对于单项目 Interactive Server Blazor Web App,在 server 的 Program.cs 中调用一次 AddIgniteUIBlazor()。不要添加 client 项目或 WebAssembly 服务。

_Imports.razor

@using IgniteUI.Blazor.Controls

在拆分式 Blazor Web App 解决方案中,需将其添加到两个 _Imports.razor 文件中。

宿主页主题样式表

宿主页为 wwwroot/index.html(WASM/MAUI)、Pages/_Host.cshtml(Server)或 Components/App.razor(Web App)。

IgniteUI.Blazor.Lite 0.1.1 通过 Blazor 初始化器自动加载其 JavaScript。保留现有的 Blazor 框架脚本,并添加下方主题样式表。不要添加手动 Ignite UI 脚本标签。

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

该样式表是必需的:没有它组件将渲染为无样式。

_content/IgniteUI.Blazor/themes/ 下的主题文件为 {light|dark}/{bootstrap|material|fluent|indigo}.css,只能链接其中一个。

.NET 9+ Web App 项目可使用带指纹的资源集合:

<link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/light/bootstrap.css"]" />

IgniteUI.Blazor.GridLite 从其自身的资源根目录提供自己的样式表,但仅在使用 GridLite 组件时才应使用。如果使用了其他 Ignite UI 组件,不要链接(或建议)GridLite 样式表,而应使用上方的主主题样式表。

<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />

渲染模式(仅 Blazor Web App)

Ignite UI 组件需要交互式渲染模式;静态 SSR 不会渲染出可用内容。

@rendermode InteractiveServer

或在 App.razor 中全局设置:<Routes @rendermode="InteractiveServer" />。

可根据需要使用 InteractiveWebAssembly 或 InteractiveAuto 替代 InteractiveServer。

适用场景

适用于需要在 Blazor 应用中集成 Ignite UI for Blazor Lite 核心 UI 组件或轻量网格的开发场景,包括新项目配置、现有项目审查以及包策略调整。

限制

最低支持 .NET 8.0。Lite 包不包含图表、地图、仪表等高级组件。GridLite 样式表仅在使用 GridLite 组件时使用。静态 SSR 无法渲染 Ignite UI 组件。