Bootstrap is all good and graceful, but let's go for different cuisine. MudBlazor is an open-source library that you want to look at if you are into Material Design. The community is welcoming, and they are pushing new updates every once in a while.
Consider this post as an intro to
MudBlazor. The default template for a
Blazor WebAssembly comes in with some layouts and pages. Although our flashcards application doesn't require these boilerplate markups, I'm keeping them for the time being. I'm going to try out some
MudBlazor components on these pages and layouts.
After creating a
Blazor WASM application, you would need to install the
NuGet package for
dontet new blazorwasm --no-https dotnet add package MudBlazor
_Imports.razor, add the following,
Roboto font-face &
MudBlazor style references in
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
While you are at it, delete the references of
app.css files. Also, delete
NavMenu.razor.css as we want to start from scratch.
You can delete the css folder under wwwroot altogether. We will add a custom css file whenever we need one.
Add the script file reference for
MudBlazor inside the
body right after
MudBlazor services with the built-in
IoC container. For
Program.cs class is the place where you register your services,
MudBlazor components need initialization beforehand. Here are the components you need to add in the
<MudThemeProvider /> <MudDialogProvider /> <MudSnackbarProvider />
Before moving forward, I would like to point out a new feature in
.NET 6.0 called
Hot reload is used to refresh only the file in which code is changed while preserving the application state
In every SPA framework (React/Angular/Vue), this feature is available. It is hugely beneficial if you think from a designer's perspective. You don't have to stop and start an application every time a tiny design change is needed.
To enable Hot Reload in a Blazor WASM app, in your launchSettings.json add the following lines under the profiles tag, To try out hot reload with an existing ASP.NET Core project based on .NET 6, add the "hotReloadProfile": "aspnetcore" property
You would run your application in watch mode using the following command,
dotnet watch run
And you will never have to stop and start your application from now on for a small change.
There are some ready-to-use wireframes from MudBlazor. These are some frequently seen layouts on the web built with different MudBlazor components like MudLayout, MudAppBar, MudDrawer, and MudMainContent. Replace the existing markup in the
MainLayout.razor with the following,
There are some ready-to-use wireframes from MudBlazor. These are frequently seen layouts on the web built with different MudBlazor components like MudLayout, MudAppBar, MudDrawer, and
MudMainContent. Replace the existing markup in the
MainLayout.razor with the following,
Moving on to the
NavMenu component, I'm using MudNavMenu and
MudNavLink automatically assigns an
active class on a selected menu item based on the current route.
For structuring individual pages, try out the MudGrid. Starting with
md, you define how many units in the grid the
MudItem will take based on different display real-estates. To stay consistent with the typography, MudText has been used with different
The same thing goes for the
Counter.razor page. Here, we have a new MudButton component,
FetchData.razor page, I'm using the MudTable. It has cool features like binding items directly to the
Items attribute instead of having to create a
foreach loop and a progress bar. Also, it changes its layout based on the screen width.
The last bit I wanna talk about is wiring up your modified theme to the <MudThemeProvider/>. You can create an instance of
MudTheme and add different Palettes, Shadows, Typography, Layout Properties, and z-index for your components to use universally.
Here is how you should do it in the
Part I - https://github.com/fiyazbinhasan/FlashCardsWasm/tree/Part-I-Hot-Reload-And-MudBlazor