();
+```
## Joining the Community
-Looking to get answers to questions or engage with us in realtime? Our community is most active [on Discord](https://discord.gg/FcSNfg4). Submit requests and issues on [GitHub](https://github.com/dotnet/blazor-fluentui/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/dotnet/blazor-fluentui/labels/community:good-first-issue).
+Looking to get answers to questions or engage with us in real-time? Our community is most active [on Discord](https://discord.gg/FcSNfg4). Submit requests and issues on [GitHub](https://github.com/dotnet/blazor-fluentui/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/dotnet/blazor-fluentui/labels/community:good-first-issue).
If you don't find a component you're looking for, it's best to create the issue in our FAST repo [here](https://github.com/microsoft/fast) and limit issues on this repo to bugs in the Blazor component wrappers or Blazor-specific features.
diff --git a/examples/FluentUI.Demo.Shared/Pages/Index/Index.razor b/examples/FluentUI.Demo.Shared/Pages/Index/Index.razor
index 46a8989591..d75b25b8ca 100644
--- a/examples/FluentUI.Demo.Shared/Pages/Index/Index.razor
+++ b/examples/FluentUI.Demo.Shared/Pages/Index/Index.razor
@@ -7,7 +7,7 @@
Welcome to the Fluent UI Web Components for Blazor library
Introduction
-The Microsoft.Fast.Components.FluentUI package provides a lightweight set of Blazor component wrappers around Microsoft's official Fluent UI Web Components. The Fluent UI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI see the Getting Started section below.
+The Microsoft.Fast.Components.FluentUI package provides a set of Blazor component wrappers around Microsoft's official Fluent UI Web Components. The Fluent UI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI see the Getting Started section below.
The source for @@fluentui/web-components is hosted in the Fluent UI mono-repository. Documentation on the components is available on docs.microsoft.com.
Getting Started
@@ -19,6 +19,11 @@
To add the script from CDN use the following markup:
<script type="module" src="https://cdn.jsdelivr.net/npm/@@fluentui/web-components/dist/web-components.min.js"></script>
+
+ Note
+ If you prefer to use another CDN, that is entirely possible. Just make sure it is offering the Fluent UI package and you are getting the right web-components.min.js file)
+
+
The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here’s an example of the markup for that:
<script type="module" src="https://cdn.jsdelivr.net/npm/@@fluentui/web-components@2.0.2/dist/web-components.min.js"></script>
@@ -43,7 +48,7 @@
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
- It is possible that the line is already there (but commented out) if you used the Blazor WebAssembly template. If you are using the Blazor Server template, you will need to add it yourself.
+ It is possible that the line is already there (but commented out).
Reboot
@@ -52,12 +57,12 @@
components for Blazor. It provides an elegant, consistent, and simple baseline to build upon.
- If you want to use Reboot, you'll need to include it in your index.html or _Layout.cshtml file like this:
+ If you want to use Reboot, you'll need to add to your index.html or _Layout.cshtml file a line that includes the stylesheet (.css file). This can be done by adding the following line to the <head> section:
<link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" />
It is entirely possible to build a site without using Reboot. If you choose not to use it, please do add the variables.css file (which is otherwise imported through the reboot.css file)
- to your index.html or _Layout.cshtml file like this:
+ to your index.html or _Layout.cshtml file in the <head> section like this:
<link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />
The file contains a number of CSS variables that are required to be defined for the components to work correctly.
@@ -65,7 +70,7 @@
In your Program.cs file you need to add the following:
builder.Services.AddFluentUIComponents();
-This addition makes sure a HttpClient is set up for when you are using the library in Blazor Server.
+This addition makes sure all the necessary services the library uses are setup in a correct way.
Using the Fluent UI Web Components
@@ -89,7 +94,7 @@
Configuring the Design System
The Fluent UI Web Components are built on FAST’s Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various “Design Tokens”.
- You can use all of the (~160) individual Design Tokens, both from code as in a declarative way in your .razor pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work
+ The library exposes all of the (over 160) Design Tokens, which you can use both from code as in a declarative way in your .razor pages. See https://docs.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens for more information on how Design Tokens work
@@ -188,6 +193,91 @@
The result looks like this when applied to a <FluentButton>:
+Blazor Hybrid
+
+ Starting with the 2.0 release, you can also use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above, but to get everything to work you'll need to take two extra steps:
+
+
+ -
+ You need to add a MAUI specific IStaticAssetService implementation.
+ Due to some issues, this file can't be part of the library (yet) so this needs to be added manually to your MAUI Blazor project.
+ Create a new class in you project called FileBasedStaticAssetService.cs Replace it's contents with the following:
+
+
+using System.Net;
+using Microsoft.Fast.Components.FluentUI.Infrastructure;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+public class FileBasedStaticAssetService : IStaticAssetService
+{
+ private readonly CacheStorageAccessor _cacheStorageAccessor;
+
+ public FileBasedStaticAssetService(CacheStorageAccessor cacheStorageAccessor)
+ {
+ _cacheStorageAccessor = cacheStorageAccessor;
+ }
+
+ public async Task<string> GetAsync(string assetUrl, bool useCache = true)
+ {
+ string result = null;
+
+ HttpRequestMessage message = CreateMessage(assetUrl);
+
+
+ if (useCache)
+ {
+ // Get the result from the cache
+ result = await _cacheStorageAccessor.GetAsync(message);
+ }
+
+ if (string.IsNullOrEmpty(result))
+ {
+ //It not in the cache (or cache not used), read the asset from disk
+ result = await ReadData(assetUrl);
+
+ if (!string.IsNullOrEmpty(result))
+ {
+ if (useCache)
+ {
+ // If successful, create the response and store in the cache (when used)
+ HttpResponseMessage response = new()
+ {
+ StatusCode = HttpStatusCode.OK,
+ Content = new StringContent(result)
+ };
+
+ await _cacheStorageAccessor.PutAsync(message, response);
+ }
+ }
+ }
+
+ return result;
+ }
+
+ private static HttpRequestMessage CreateMessage(string url) => new(HttpMethod.Get, url);
+
+ private static async Task<string> ReadData(string file)
+ {
+ using var stream = await FileSystem.OpenAppPackageFileAsync($"wwwroot/{file}");
+ using var reader = new StreamReader(stream);
+
+ return await reader.ReadToEndAsync();
+ }
+}
+
+
+ -
+ You need to make some changes in your
MauiProgram.cs file
+ Make sure the following is added before the return builder.Build() line:
+
+
+builder.Services.AddFluentUIComponents(options =>
+{
+ options.HostingModel = BlazorHostingModel.Hybrid;
+});
+builder.Services.AddSingleton<IStaticAssetService, FileBasedStaticAssetService>();
+
Looking to get answers to questions or engage with us in realtime? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.