BlueBlazor 2.1.1

Blue Blazor

Blue Blazor is an adaptation of Blue Web for Blazor.

Breaking change!

The way to embed Blue Web CSS has changed. You now need to change the following line to the head of your HTML:

- <link rel="stylesheet" href="_content/BlueBlazor/css/blue-web.min.css" />
+ <link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />

Getting started

Installation

dotnet add package BlueBlazor

Import

To make use of Blue Blazor, add the following to your _Imports.razor file:

@using BlueBlazor.Components

Register services

Register the service for localization in your Program.cs file:

builder.Services.AddLocalization();

Stylesheet

You can use the stylesheet of Blue Web by adding the following line to the head of your HTML:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />

JavaScript

Some components require JavaScript. You can embed all together:

<script src="_content/BlueBlazor/js/all.bundle.js"></script>

If you don't them all, you can also embed them individually:

<script src="_content/BlueBlazor/js/dialog.bundle.js"></script>
<script src="_content/BlueBlazor/js/modal.bundle.js"></script>
<script src="_content/BlueBlazor/js/qrCodeGen.bundle.js"></script>
<script src="_content/BlueBlazor/js/totpInput.bundle.js"></script>

Theming

You can use Themify to create custom themes. Enable "Export only CSS variables" for your theme and put the exported CSS to your project. It needs to be embedded after the Blue Blazor stylesheet:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />
<link rel="stylesheet" href="css/your-theme.css" />

To support dark mode, you should create a separated theme. You can then use media queries to switch between the themes:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />
<link
  rel="stylesheet"
  href="css/your-light-theme.css"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="css/your-dark-theme.css"
  media="(prefers-color-scheme: dark)"
/>

JavaScript helpers

Blue Blazor provides some JavaScript helpers that aren't bound to any component. You can use them by injecting the IJSRuntime service and calling the methods:

@inject IJSRuntime JSRuntime

@code {
	async Task ask()
	{
		if (firstRender)
		{
			await JSRuntime.InvokeVoidAsync("BlueBlazor.Helpers.scrollToTop");
		}
	}
}