Blazor.Fast is a component library which wraps the Fast and Fluent web components, with the following design aspects in mind:
- Keep the same API as the core library, without introducing a bunch of custom parameters or redundant work.
- If you know how to use FAST in another framework, it doesn’t take a lot of time to learn how to use the (very tiny) Blazor wrapper.
- The heavy lifting is done in the core FAST or Fluent library.
- Abstracts away the theme so we can use Fluent and/or FAST by changing the value of a switch.
- Make it easier for Blazor developers to integrate FAST or Fluent in their projects.
You can read more about why and how we did this in this blog post.
- The documentation and examples of Blazor.Fast can be found here
- The official documentation of FAST by Microsoft can be found here
Create a new Blazor Application
dotnet new blazorwasm -o WebApplication
You can install from NuGet using the following command:
Install-Package Append.Blazor.Fast
- Add the Javascript file to the
_host.cshtml
(server-side) orindex.html
(client-side) page below the Blazor framework script.
// Provided by default
<script src="_framework/blazor.webassembly.js"></script>
// FAST
<script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
// Fluent (optional)
<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
- Add the required namespaces in the
_imports.razor
file
@using Append.Blazor.Fast.Components
@using Append.Blazor.Fast.Core
- Adjust the
App.razor
file to the following, to provide a highest level ThemeProvider.
<SystemProvider Theme="new ThemeProvider(ThemeType.Fast)" use-defaults>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there is nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</SystemProvider>
- Use a component on the
index.razor
page
<Button appearance="accent">Click Me</Button>
- You can find documentation about the the core library Fast Design by Microsoft
- Examples provided in the core library can be found in the Component Explorer