Table of Contents

Installation

Either fork this repo or reference the Material.Blazor Nuget package. Once the package is referenced in your project you will need to add the CSS and JS in your html.

Add the Material.Blazor namespace to your project by appending @using Material.Blazor to the end of your project's _Imports.razor file. Do not use components from the Material.Blazor.Internal namespace: as the name implies these are intended for internal use by Material.Blazor, however Blazor has no mechanism for internally restricted Blazor components to mirror the internal directive for a C# class.

Obtaining the requisite CSS and JS

You will to add three items to your index.html/_Layout.cshtml. Place this in the <head> tag:

<link href="_content/Material.Blazor/material-components-web.min.css" rel="stylesheet" />
<link href="_content/Material.Blazor/material.blazor.min.css" rel="stylesheet" />

and at the end of <body>:

<script src="_content/Material.Blazor/material.blazor.min.js"></script>

Replace the material-components-web.min.css with your own if you have built a theme - you can see how we have done this in the Material.Blazor website's index.html.

material.blazor.min.css includes the Material icons for convenience. If you wish to use either (or both) Font Awesome or Open Iconic icon sets see the next section for the additional css required.

The non-minified versions of each of the css and js packages are also available if needed for debugging.

All styling really should be done with Material but the application created with the templates uses Bootstrap. Once you have your apllication fully in Material remove the reference to bootstrap.min.css.

Package versions

Material.Blazor works with the following package versions:

  • Material Components v14.0.0
  • Font Awesome Icons version 6.1.1 are optional and can be included in your HTML <head> with the CDN link: 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  • Open Iconic Icons version 1.1 are also optional and can be included in your HTML <head> with the CDN link: 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css" crossorigin="anonymous" rel="stylesheet" />

Services and Anchor

Material.Blazor has three services for logging, snackbars, and toasts. We strongly advise you to use these in your project because regular component tooltips will fail if you don't, although they are optional. To register the services:

services.AddMBServices();

The three configurations are either the default (as above) or custom - see MBSnackbarServiceConfiguration, MBToastServiceConfiguration, and MBLoggingServiceConfiguration.

When you use the services you must also place an anchor component at the top of App.razor - this must not be inside any other components or divs:

<MBAnchor />

Binding

Material.Blazor components support the EditForm environment. To that end Material.Blazor uses the

FieldIdentifier.Create(ValueExpression)

construct. This means that values to be bound are limited to fields and properties. As an example, should you try to bind to an array element as in

<Component @bind-Value="@boolArray[0]" />

you will be met with a runtime error of

Error: System.ArgumentException: The provided expression contains a SimpleBinaryExpression which is not supported. FieldIdentifier only supports simple member accessors (fields, properties) of an object.

Edit this page