Blazorise Material Usage
Quickly install Blazorise with Material, one of the world's most popular Blazor UI framework.
Note: Before proceeding, ensure you have already created a Blazor project. If not, the simplest way to start with Blazorise is by using our Templates.
Since Material CSS is based on a Bootstrap you only need to change the CSS and JS sources. The code in _Imports.razor will stay the same as for the Bootstrap provider.
Install Packages
First step is to install a Material provider for Blazorise:
Install-Package Blazorise.Material
You also need to install the icon package:
Install-Package Blazorise.Icons.Material
Add Material CSS
Material CSS is not available through the CDN so you must download it yourself from djibe web page.
After the download is finished you must extract the CSS and JS to the wwwroot folder inside of you Blazor project.
blazorproject.client/ └── wwwroot/ ├── css/ └── js/
Add Static Files
Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:
- For WebAssembly, update index.html.
- For Server, update _Layout.cshtml or _Host.cshtml.
- For .NET 8, update App.razor.
Add these lines inside the
<head>
section:
<!-- Material CSS --> <link href="css/material.min.css" rel="stylesheet"> <!-- Add Material font (Roboto) and Material icon as needed --> <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto Mono:300,400,700|Roboto Slab:300,400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet"> <link href="_content/Blazorise/blazorise.css" rel="stylesheet" /> <link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" /> <link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css" rel="stylesheet" /> <!-- Optional JavaScript --> <!-- These are the standard js dependencies this provider typically dependes upon, but Blazorise deems these as optional as Blazorise Components should work correctly without these --> <!-- jQuery first, then Popper.js, then Material JS --> <script src="https://code.jquery.com/jquery-3.5.0.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <!-- Mandatory JavaScript --> <script src="js/material.min.js"></script> <script src="_content/Blazorise.Material/blazorise.material.js"></script>
Note: Don't forget to remove bootstrap JS and CSS files that comes with the default Blazor project template.
Add Imports
In your main _Imports.razor add:
@using Blazorise
Register Services
Add the following lines to the relevant sections of
Program.cs
.
using Blazorise; using Blazorise.Material; using Blazorise.Icons.Material; builder.Services .AddBlazorise( options => { options.Immediate = true; } ) .AddMaterialProviders() .AddMaterialIcons();
PWA & Offline Support (optional)
For information about PWAs & offline support, please take a look at our PWA docs.