Blue Blazor

Blue Blazor is an adaptation of Blue Web for Blazor.

Getting started

Create project

Use one of the official Blazor project templates like Blazor Web App or Blazor Server App (Empty) to create a new project using Visual Studio or CLI. Make sure, no sample content will be added.

Installation

dotnet add package BlueBlazor

Import

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

@using BlueBlazor.Components
@using BlueBlazor.Shared

Register services

To use Blue Blazor components, you need to register the required services. Add the following lines to your Program.cs file:

builder.Services.AddBlueBlazor();

If you use DevExpress components you can should enable the DevExpressSupport support to avoid problems when using dialogs:

builder.Services.AddBlueBlazor(options =>
{
    options.DevExpressSupport = true;
});

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" />

In .NET 9 or higher you can do it like this:

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

Font family

As mentioned in Blue Web docs, Inter (licensed under SIL) with some default font settings is preconfigured. Blue Blazor ships the required files. You can embed them like this:

<link rel="stylesheet" href="_content/BlueBlazor/inter/web/inter.css">

In .NET 9 or higher you can do it like this:

<link rel="stylesheet" href="@Assets["_content/BlueBlazor/inter/web/inter.css"]">

Dynamic color mode

To support dynamic color modes (light/dark) using JavaScript you need to add the following script:

<script src="_content/BlueBlazor/blue-web/js/color-mode.js" type="module"></script>

In .NET 9 or higher you can do it like this:

<script src="@Assets["_content/BlueBlazor/blue-web/js/color-mode.js"]" type="module"></script>

Add layout

Put this to your MainLayout.razor file:

<Layout>
    <SideContent>
        <MenuItem Label="Home" Href="">
            <Icon>🏠</Icon>
        </MenuItem>
    </SideContent>
    <PageContent>@Body</PageContent>
</Layout>

Add page

Your project probably already has at least one page component. Change its content to this:

@page "/"

<div class="container">
    <h1>Hello, world!</h1>
</div>

Next steps

You now have a very basic app with Blue Blazor. To learn more, check out the examples and the component docs.

Theming

You can use the Theme Generator on Blue Web to create custom themes. Then add 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)"
/>

Use JavaScript from Blue Web

Blue Blazor comes with the whole output folder of Blue Web in it's wwwroot folder. That means, you can use all of Blue Web's JavaScript functions.

Example 1: Progress

@inject IJSRuntime JSRuntime

<script src="_content/BlueBlazor/blue-web/js/progress.bundle.js"></script>

<Button Label="Load data" OnClick="loadData" />

@code {
    async Task loadData()
    {
        await JSRuntime.InvokeVoidAsync("window.blueWeb.progress.start");

        // do something to load data

        JSRuntime.InvokeVoidAsync("window.blueWeb.progress.stop");
    }
}

Example 2: Dialog

@inject IJSRuntime JSRuntime

<script src="_content/BlueBlazor/blue-web/js/dialog.bundle.js"></script>

<Button Label="Delete" OnClick="delete" />

@code {
    async Task delete()
    {
        bool confirmed = await JSRuntime.InvokeAsync<bool>("blueWeb.dialog.verify", "Are you sure?");

        if (confirmed)
        {
            // do something to delete
        }
    }
}

Breaking changes

From v4 to v5

These rarely used components were removed:

• Body
• Header
• SidebarToggler

You no longer have to manually embed JavaScript files by Blue Blazor.

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

Menu Item changes:

• Removed Props
  • DropdownContent - Use Collapse or combination with Popover
  • IconClass
  • LabelClass
  • Draggable - You can still add draggable attribute, but the styling has been removed.
  • HideDraggableIcon
  • HideChevronIcon
  • ShowDropdown
  • ShdowDropdownChanged
  • SupportOutside
  • OutsideIgnoreClasses
• Renamed Props
  • IconForActive -> IconForCurrent
  • IsActive -> Current
  • Highlighted -> Active

From v3 to v4

Dialogs (Modal and Offcanvas) now use the new DialogService to open dialogs. Also these components were removed:

• Modal
• Offcanvas

Instead, you can use the DialogService to open dialogs. With <DialogProvider /> you define the place where the dialogs will be rendered.

To open a dialog, you can use the new DialogOpener component together with ModalDialog or OffcanvasDialog:

- <Modal TitleText="Modal Title">
-     <ToggleContent><Button Label="Show Modal" /></ToggleContent>
-     <BodyContent>
-         <p>Modal body content</p>
-     </BodyContent>
- </Modal>
+ <DialogOpener>
+     <ToggleContent><Button Label="Show Modal" /></ToggleContent>
+     <DialogContent>
+         <ModalDialog TitleText="Modal Title">
+             <BodyContent>
+                 <p>Modal body content</p>
+             </BodyContent>
+         </ModalDialog>
+     </DialogContent>
+ </DialogOpener>

For more information, check out the Getting Started section above and the doc pages for DialogProvider and DialogOpener.

From v2 to v3

Component Text has been renamed to TextInput to avoid conflicts with <text></text> and for a more fitting name. Also the default styling for the label has changed. You can the look back by using the SmallLabel attribute.

From v1 to v2

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" />