How to Export Power BI Data to Excel
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Kapil Panchal - April 15, 2021
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
In this blog, we will learn how to integrate MudBlazor within the Blazor WebAssembly app, and thus create a Material UI Blazor project. We won't just learn about Blazor WebAssembly itself. If you're not familiar with Blazor WebAssembly, we strongly suggest reading our Blazor WebAssembly series article. There, you can learn everything you need to develop the great Blazor WebAssembly app.
If you would like to learn more about Blazor WebAssembly, we strongly recommend visiting the articles in our Blazor WebAssembly series, where you can also read about Blazor WebAssembly Development, Authentication, Authorization, JSInterop, and other topics.
Let's create a new Blazor WebAssembly standalone project and start with the name BlazorMaterialUI:
Once the creation is complete, we will install the Mudblazor library required for content UI components:
PM> Install-Package MudBlazor -Version 5.0.6
As soon as the installation is finished, we must add the required using the directive inside the _Imports.razor file:
@using MudBlazor
Mudblazor also relies on predefined CSS and fonts, we've to add these references within the index.html file:
...
In addition, to support components that require JavaScript functionality, we must add a reference to the MudBlazor.min.js file in the index html:
In the documentation, we found a recommendation to remove the bootstrap.min.css file and also all the styles from the app.css file. This should be done if we create a new blazor project, which we do.
That said, let's take away the Bootstrap folder - since it alone contains bootstrap.min.css file - From the wwwroot folder:
Also, we have safely removed the bootstrap.min.css reference from our index.html file since we don’t need it anymore:
All we want to do now is register all the necessary services for Mudblazor components. We can do this in the program class:
public static async Task Main (string [] args) { var build= WebAssemblyHostBuilder.CreateDefault(args); build.RootComponents.Add("#app"); build.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); build.Services.AddServices(); await builder.Build().RunAsync(); }
For this method, we need to add a new one using the directive:
using MudBlazor.Services;
As you'll see, we can only register all the required services by calling the AddServices method. This method includes registration of all other essential services for MudBlazorDialog, MudBlazorSnackbar, etc. We can see this in the implementation of the method:
public static IServiceCollection AddServices(this IServiceCollection services, MudServicesConfiguration configuration = null) { if (configuration == null) onfiguration = new MudServicesConfiguration(); return services .AddMudBlazorDialog() AddMudBlazorSnackbar(configuration.SnackbarConfiguration) .AddMudBlazorResizeListener(configuration.ResizeOptions) .AddMudBlazorScrollManager() .AddMudBlazorScrollListener() .AddMudBlazorDom(); }
In addition, we can see that the service configuration is set by default, but if we want, we can use another overload of this method to add our own custom configuration:
For the purpose of this project, we will leave the default configuration using only the parameterless AddServices method.
To complete the configuration process, we will be going to modify the MainLayout.razor component by adding the base theme component provider at the end of the file:
MudThemeProvider
We are only using the MudThemeProvider component as it is required for Mudblazor. Of course, there are additional component providers such as or , but we'll include this as soon as we need them.
The first issue we will be going to do is to create a new Components folder within the new Home.razor .
Now, let's modify the Home.razor file to create our home page:
Welcome to Code-Maze Shop Blazor UI Material design. Feel free to visit our shop any time you want.@code { }
First, we have to use the MudText component to show our welcome text on the page. In that component, we use some attributes. With the align attribute, we focus our text on the page. Using the Typo attribute, we specify that we want to render this text as the H4 element. Also, with the color attribute, we specify the color of the text. On the official typography documents, you can read more about Typo and align values.
After that, we use the MudPaper component, which represents the single box because of the wrapper around the material. With the elevation attribute, we specify the shadow around the box, and with the class attribute, we will add our classes. In this example, we use predefined distance classes for margin-top and bottom (my) and padding-top and bottom (py). Both are set to 20px. you'll read the documents for a lot of clarification about colors, elevation, and distance. We also use the MudLink component, to show a link on the page.
If you remember, in order to make the MudThemeProvider components work properly, we use the MudBlazor component in the MainLayout.razor file. This theme supplier provides all default colors, sizes, shapes, and shadows for content elements. Also, we can use it to create a custom theme in our project.
To do that, we will modify our MainLayout.razor file:
@inherits LayoutComponentBase@if (_isLightMode) {} else { } @Body
Here, we conditionally render the icons using the MudIconButton component. To select an icon, we use the icon property, and we also use the OnClick event to trigger theme switching.
Finally, we have modified the MudThemeProvider part by adding a value for the theme property.
Instead, let's add the @code part to the same file:
@code { private bool _lightMode = true; private MudTheme _currentTheme = new MudTheme(); private void ToggleTheme() { lightMode = !_lightMode ; if(!_lightMode ) { _currentTheme = GenerateDarkTheme(); } else { _currentTheme = new MudTheme(); } } private MudTheme GenerateDarkTheme() => new MudTheme { Palette = new Palette() { Black = "#27282f", Background = "#32343d", BackgroundGrey = "#27282f", Surface = "#373840", TextPrimary = "#ffffffb2", TextSecondary = "rgba(255,255,255, 0.50)" } }; }
First, we state that the default mode is the light mode and the current theme is the default theme. Then, within the ToggleTheme method, we change the present value of the _lightMode variable. If the value is incorrect, we generate a dark theme setting for the _currentTheme variable, otherwise, we set its value to the default theme. In the GeneratedDark theme method, we create a new dark theme configuration.
So, in this article, we learned how to integrate Mudblazor with the new Blazor WebAssembly app to create a material UI design for our app. In addition, we've learned more about the different content components and how to use the MudThemeProvider provider to customize content themes.
Build Your Agile Team
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Clear insights mean smarter decisions, and this is what data storytelling does. It helps you speak a language that you quickly understand. Like for example, you are a CTO dealing with...
You might ask “why migrate from AWS to Azure when it already offers so many options?” This question is valid, but there's a reason why businesses are moving to Azure. First, Azure's...