mcpField
U
use-igniteui-blazor

use-igniteui-blazor

github.com/dotnet开发5.8k1.6k 次安装1 天前更新
代码仓库

关于 use-igniteui-blazor

用于在 Blazor 应用中配置 IgniteUI.Blazor 程序包和组件注册的技能，涵盖 Lite 与 GridLite 选择、服务注册、样式表及交互式渲染模式。

主要功能

  1. 01按组件需求选择 Lite 或 GridLite 程序包
  2. 02配置服务注册和模块加载
  3. 03指导拆分项目的程序包设置
  4. 04添加适用的主题样式表
  5. 05说明交互式渲染模式要求

适用场景

  1. 01在 Blazor 应用中添加 IgniteUI.Blazor 控件
  2. 02在仅使用 GridLite 的应用中配置 GridLite
  3. 03配置拆分的服务器和客户端解决方案
  4. 04为组件选择样式表和渲染模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dotnet/skills --skill use-igniteui-blazor

安装后在 Claude Code 中输入/use-igniteui-blazor确认已加载。

详细介绍

应用设置与组件注册

1. NuGet 包

添加包之前，请检查目标项目的目标框架和现有包引用。最低支持的目标框架版本为 .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 不包含图表、地图、仪表盘及其他高级组件。推荐添加引用前，请检查所需组件对应的包。

2. IgniteUI.Blazor.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，请在服务器端和客户端的 Program.cs 中都调用 AddIgniteUIBlazor()。

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

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

对于单项目的 Interactive Server Blazor Web App，请在服务器端 Program.cs 中调用一次 AddIgniteUIBlazor()。不要添加客户端项目或 WebAssembly 服务。

3. _Imports.razor

@using IgniteUI.Blazor.Controls

对于拆分式 Blazor Web App 解决方案，请将其添加到两个 _Imports.razor 文件中。

4. 宿主页 — 主题样式表

宿主页可以是 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/themes/light/bootstrap.css" rel="stylesheet" />

5. 渲染模式（仅限 Blazor Web App）

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

@rendermode InteractiveServer

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

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

评论

支持 Markdown