Microsoft Fluent UI UI Blazor库
感谢您的明星，它有帮助！
该软件包用于.NET 8和9大发项目。如果您现在使用的是未支持的.NET 6或7，请使用v3版本的软件包（以Microsoft.Fast.Components.FluentUI开头的名称）
介绍
Microsoft.FluentUI.AspNetCore.*包装系列提供了一组剃须刀组件，用于构建利用Fluent Design System的大型应用程序（即具有现代Microsoft应用程序的外观和感觉）。
图书馆中的某些组件是Microsoft官方Fluent UI Web组件的包装纸。其他的是利用流利的设计系统或使其更容易使用流利的组件。要在图书馆中启动并运行，请参见下面的入门部分。
该库的来源位于Github的Fluentui-Blazor存储库中。该组件上的文档可在演示网站上找到。
从较早版本升级
如果您正在从库的较早版本中升级，请查看有关（破坏）更改的信息的新内容。
入门
使用我们的dotnet模板
最简单的入门方法是使用我们的模板。这些模仿了常规的燃料模板，并具有预先配置的设计和组件。您使用此命令安装它们：
dotnet new install Microsoft.FluentUI.AspNetCore.Templates导航到要创建新项目并运行以下命令以创建新项目的文件夹。
dotnet new fluentblazor --name MyApplication如果要创建一个新的独立WebAssembly项目，则可以使用以下命令：
dotnet new fluentblazorwasm --name MyApplication其他可用模板是：
- Fluent .Net Aspire Starter App（Fluentaspire-Starter）
- 流利的.NET毛伊岛大麻混合动力车和Web应用程序（fluentmaui-blazor-web）
使用Visual Studio时，您还可以使用新的项目对话框来创建一个新项目。模板可以通过在搜索字段中流利找到。
手动安装
要开始从头开始使用Fluent UI UI Blazor库，您首先需要在要使用库及其组件的项目中安装主要的Nuget软件包。您可以在IDE中使用Nuget软件包管理器，也可以在使用CLI时使用以下命令：
dotnet add package Microsoft.FluentUI.AspNetCore.Components如果要使用图标或表情符号扩展库的功能，则可以为此安装其他软件包：
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji脚本
如前所述，我们包装了在脚本文件中实现的Fluent UI Web组件。该文件包含在库本身中，不必从cdn下载或提取。
通过在库中包含脚本，我们可以保护您始终使用最佳匹配脚本版本。
即使使用SSR（静态服务器渲染） ，脚本也会自动包含并自动加载。如果您希望脚本在爆炸启动之前加载脚本，请将其添加到您的App.razor文件中：
< script src =" _content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js " type =" module " async > </ script >如果稍后添加交互性，则大风脚本将启动并尝试再次加载Web组件脚本，但是JavaScript将通过设计优雅地处理该脚本。
重新启动（可选）
重新启动是单个文件中特定于元素的CSS更改的集合，可帮助启动使用Fluent UI UI julazor组件构建站点。它提供了优雅，一致且简单的基线。
如果要使用重新启动，则需要添加到app.razor ， index.html或_Layout.cshtml文件中，其中包括样式表（ .css file）。这可以通过将以下行添加到<head>部分来完成：
< link href =" /_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css " rel =" stylesheet " />当使用模板创建应用程序时，重新启动已经为您设置。
在创建托管在不同基本路径中的站点时，可能有必要从样式表链接中删除领先的'/'。
登记服务
在Program.cs中添加以下内容
builder . Services . AddFluentUIComponents ( ) ;如果您在Blazor Server上运行您的应用程序，请确保在AddFluentUIComponents方法之前注册默认的HttpClient 。
builder . Services . AddHttpClient ( ) ;添加组件提供商
在MainLayout.razor文件的末尾添加以下组件。
这些提供商由关联的服务使用，以正确显示吐司，对话框，工具提示或消息栏。
< FluentToastProvider />
< FluentDialogProvider />
< FluentTooltipProvider />
< FluentMessageBarProvider />
< FluentMenuProvider />注意：您可以删除您在应用程序中未使用的提供商。
与图标和表情符号合作
我们还有其他软件包，包括完整的Fluent UI系统图标和Fluent UI表情符集。有关更多信息，请参考图标和表情符号页面。
用法
安装了包装后，您可以开始使用Fluent UI UI Blazor库组件的方式与任何其他剃须刀组件相同。
添加导入
添加软件包后，您需要在_Imports.razor中添加以下内容
@ using Microsoft . FluentUI . AspNetCore . Components快速开始
从字面上看，您需要在您的应用程序中使用流利的UI UI Blazor库。
< FluentCard >
< h2 >Hello World!</ h2 >
< FluentButton Appearance = " @Appearance.Accent " >Click Me</ FluentButton >
</ FluentCard >配置设计系统
Fluent UI剃须刀组件建立在FAST的（自适应UI）技术的基础上，该技术可实现设计定制和个性化，同时自动保持可访问性。这是通过设置各种“设计令牌”来完成的。该库揭露了所有设计令牌，您可以在.razor页面中以声明性的方式从代码中使用它们。设计令牌页面中描述了使用设计令牌的不同方式。
巨品混合动力
您可以在Blazor Hybrid （MAUI/WPF/Windows表单）项目中使用此库。设置几乎与上面的“入门”部分中所述的几乎相同，但是要使所有工作都可以使用，您需要采取下面描述的额外步骤（现在）。
MAUI/WPF/Windows表单问题的临时解决方法
笔记
下面的解决方法仅适用于.NET 8。从.NET 9起，不再需要此解决方法。如果您对.NET 9进行此解决方法，那么您的大型混合动力项目将不会加载。
当前，当使用WebView运行大麻布（因此所有混合变体）时，Web-Components脚本不是自动导入的（请参见＃404）。加载由Web-Components脚本配置的自定义事件处理程序也存在问题。在将它们固定在WebView端之前，有一个可靠的可用方法，即拦截'_framework/blazor.modules.json'并提供适当的JS初始化器文件（由build创建）。所需的initializersLoader.webview.js已添加到库中，需要在_framework/blazor.webview.js脚本标签之前与脚本标签一起包含。
< script app-name = " {NAME OF YOUR APP} " src = " ./_content/Microsoft.FluentUI.AspNetCore.Components/js/initializersLoader.webview.js " ></ script >
< script src = " _framework/blazor.webview.js " ></ script > app-name属性需要匹配您的应用程序的汇编名称-InitializersLoader使用'app-name'用初始化器来解析文件的名称。 InitializersLoader将标准fetch函数替换为提供正确的文件代替空的blazor.modules.json 。一旦_framework/blazor.modules.json请求截获截获，将fetch为原始状态。
有关该错误的更多信息，请参见《毛伊岛仓库》中的第15234期。
使用具有EF Core或ODATA客户端的DataGrid组件
如果要将<FluentDataGrid>与通过EF Core或ODATA客户端提供的数据一起使用，则需要安装一个附加的软件包，以便网格知道如何异步解析查询以提高效率。有关更多信息，请参阅Datagrid页面。
其他资源
- Microsoft Fluent UI UI Blazor库文档和演示网站
支持
Microsoft Fluent UI UI Blazor库是一个开源项目，也不是ASP.NET Core的官方部分，这意味着它不受正式支持，也不承诺作为任何官方.NET更新的一部分运送更新。它是由Microsoft员工（以及其他贡献者）构建和维护的，并且与大多数其他开源项目一样，仅通过GitHub存储库提供最佳努力基础。
为该项目做出贡献
我们提供了一些有关如何开始为该项目做出贡献的准则。我们还有一个文档，可以解释和展示如何编写和开发单元测试
?贡献者
用贡献制成。
加入社区
想要获得问题的答案或实时与我们互动？我们的社区活跃于不和谐。在GitHub上提交请求和问题，或通过GitHub为一些好的第一期贡献我们加入我们。
我们期待与您建立惊人的开源社区！
接触
- 加入Dotnetevolution服务器，并在Discord上实时与我们聊天。
- 在GitHub上提交请求和问题。
- 通过在Github上提供一些建议的第一个问题来做出贡献。
通过命令行克隆项目: