【亲测免费】 Microsoft Fluent UI Blazor 组件库使用教程

1. 项目介绍

Microsoft Fluent UI Blazor 是一个开源组件库，旨在为 .NET 8 和 9 的 Blazor 项目提供一组 UI 组件、工具和实用程序，以构建具有 Fluent 设计的应用程序（即具有现代 Microsoft 应用程序的外观和感觉）。

此库包含一些官方 Fluent UI Web 组件的包装器，以及其他利用 Fluent 设计系统或使与之交互更简便的组件。项目源代码托管在 GitHub 的 fluentui-blazor 仓库中。

2. 项目快速启动

首先，确保您的开发环境已安装 .NET SDK。

使用模板

最简单的开始方式是使用提供的模板。这些模板模仿了常规的 Blazor 模板，并预先配置了设计和组件。

安装模板：

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

创建新项目：

dotnet new fluentblazor --name MyApplication

对于创建新的独立 WebAssembly 项目，可以使用以下命令：

dotnet new fluentblazorwasm --name MyApplication

手动安装

如果要从头开始使用 Fluent 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

配置项目

在 Program.cs 文件中添加以下内容来注册服务：

builder.Services.AddFluentUIComponents();

如果是 Blazor Server 应用，确保在 AddFluentUIComponents 方法之前注册了默认的 HttpClient：

builder.Services.AddHttpClient();

在 MainLayout.razor 文件中添加以下组件提供者：

<FluentToastProvider />
<FluentDialogProvider />
<FluentTooltipProvider />
<FluentMessageBarProvider />
<FluentMenuProvider />

使用组件

安装包后，您可以像使用其他 Blazor 组件一样开始使用 Fluent UI Blazor 组件。

在你的 _Imports.razor 文件中添加命名空间引用：

@using Microsoft.FluentUI.AspNetCore.Components

在视图中使用组件：

<FluentCard>
    <h2>Hello World!</h2>
    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>

3. 应用案例和最佳实践

本节将介绍一些使用 Microsoft Fluent UI Blazor 组件库的应用案例和最佳实践。内容将包括如何创建响应式布局、如何定制主题，以及如何利用设计令牌进行个性化设计。

4. 典型生态项目

在本节中，我们将展示一些与 Microsoft Fluent UI Blazor 组件库相关联的生态项目，例如图表库、日期选择器等，以帮助开发者更好地了解如何扩展和利用这些组件构建丰富的应用程序界面。