Skip to content

Latest commit

 

History

History
96 lines (70 loc) · 4.31 KB

Installation.md

File metadata and controls

96 lines (70 loc) · 4.31 KB
Raw
uid title
A.Installation
Installation

Installation

Either fork this repo or use the Nuget package linked at the top of this document. Once the package is referenced in your project you will need to add the CSS and JS in your html.

There are non-minified files of MaterialBlazor.css & MaterialBlazor.js available to reference if you need them for debugging purposes.

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

If you want, you can directly reference the Material Theme CSS and JS from the unpkg CDN (or download it for yourself). We package the css for Material icons. You will to add three items to your index.html/_Host.cshtml. Place this in the <head> tag:

<link href="https://unpkg.com/[email protected]/dist/material-components-web.css" rel="stylesheet" />
<link href="_content/Material.Blazor/MaterialBlazor.min.css" rel="stylesheet" />

and at the end of <body>:

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

Replace the unpkg 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.

Package versions

Material.Blazor works with the following package versions:

  • Material Components v9.0.0
  • Font Awesome Icons version 5.15 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/5.15.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 four services for animated navigation, snackbars, toasts, and tooltips. 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(
    toastServiceConfiguration: new MBToastServiceConfiguration()
    {
        InfoDefaultHeading = "Info",
        SuccessDefaultHeading = "Success",
        WarningDefaultHeading = "Warning",
        ErrorDefaultHeading = "Error",
        Timeout = 5000,
        MaxToastsShowing = 5
    },

    animatedNavigationManagerServiceConfiguration: new MBAnimatedNavigationManagerServiceConfiguration()
    {
        ApplyAnimation = true,
        AnimationTime = 300
    }
);

The three configurations are optional - see MBSnackbarServiceConfiguration, MBToastServiceConfiguration and MBAnimatedNavigationManagerServiceConfiguration.

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.