Components for Blazor

Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.

Demos

Blazor WebAssembly

• Bootstrap Demo
• Material Demo
• Bulma Demo
• eFrolic Demo

Blazor Server

• Bootstrap Demo

Note: This project is still experimental so it's possible that some components will be removed or refactored.

Releases and Roadmap

Prerequisites

Before you continue, please make sure you have the latest version of Visual Studio and .Net Core installed. Visit an official Blazor site to learn more.

Installations

There are currently 4 different NuGet packages for each of the supported CSS frameworks. Available packages are:

- Blazorise.Bootstrap
- Blazorise.Bulma
- Blazorise.Material
- Blazorise.Frolic

This guide will show you how to setup Blazorise with Bootstrap and FontAwesome icons.

1. NuGet packages

First step is to install a Bootstrap provider for Blazorise:

Install-Package Blazorise.Bootstrap

And FontAwesome icon package:

Install-Package Blazorise.Icons.FontAwesome

2. Source files

The next step is to define links to Bootstrap and FontAwesome CSS or JS files. If you're using Blazor WebAssembly project template, those links will go to the index.html located inside of wwwroot folder. Otherwise, if you're using a Blazor Server project template you will place the links into the _Host.cshtml.

In this step we're also going to define the links for Blazorise content files that comes with nuget packages. You must follow the naming convention _content/{LIBRARY.NAME}/{FILE.NAME}.

<!-- inside of head section -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

<!-- inside of body section and after the <app> tag  -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

---

NOTE When Blazor project is created it will also include it's own Bootstrap and FontAwesome files that can sometime be of older versions. To ensure we're using the appropriate Bootstrap and FontAwesome files, you need to remove them or replace them with the links from above. If you forget to remove them it's possible that some of components will not work as expected.

---

3. Using's

In your main _Imports.razor add:

@using Blazorise

4. Registrations

Finally in the Startup.cs you must tell the Blazor to register Bootstrap provider and extensions:

using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;

public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.ChangeTextOnKeyPress = true; // optional
    } )
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();
}

---

Depending on the hosting model of your Blazor project you only need to apply either step 4.a or 4.b. You should not include both of them as that is generally not supported.

To Learn more about the different project types you can go to the official documentation.

---

4.a Blazor WebAssembly

This step is mandatory for Blazor WebAssembly(client-side) and also for ASP.NET Core hosted project types. You should place the code into the Startup.cs of your client project.

public void Configure( IComponentsApplicationBuilder app )
{
  app.Services
    .UseBootstrapProviders()
    .UseFontAwesomeIcons();

  app.AddComponent<App>( "app" );
}

4.b Blazor Server

This step is going only into the Startup.cs of your Blazor Server project.

public void Configure( IComponentsApplicationBuilder app )
{
  // other settings
  
  app.UseRouting();
  
  app.ApplicationServices
    .UseBootstrapProviders()
    .UseFontAwesomeIcons();

  app.UseEndpoints( endpoints =>
  {
      endpoints.MapBlazorHub();
      endpoints.MapFallbackToPage( "/_Host" );
  } );
}

Usage

@page "/counter"

<Heading Size="HeadingSize.Is1">Counter</Heading>

<Paragraph>Current count: @currentCount</Paragraph>

<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

Other frameworks

To setup Blazorise for other CSS frameworks, please refer the Usage page in the documentation.