BlueBlazor 3.0.0

There is a newer version of this package available.
See the version list below for details.

dotnet add package BlueBlazor --version 3.0.0

NuGet\Install-Package BlueBlazor -Version 3.0.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="BlueBlazor" Version="3.0.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add BlueBlazor --version 3.0.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: BlueBlazor, 3.0.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

// Install BlueBlazor as a Cake Addin
#addin nuget:?package=BlueBlazor&version=3.0.0

// Install BlueBlazor as a Cake Tool
#tool nuget:?package=BlueBlazor&version=3.0.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Blue Blazor

Blue Blazor is an adaptation of Blue Web for Blazor.

Breaking change!

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.

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

Register services

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

Add layout

Put this to your MainLayout.razor file:

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

Add page

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

@page "/"

<Page>
    <Body>
        <h1>Hello, world!</h1>
    </Body>
</Page>

JavaScript (optional)

Single components require JavaScript. Take a look at the individual component page. You can embed them like this:

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

When you know, you will use all components, you can also embed them all together:

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

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

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 v2 to v3

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

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.11)
- Microsoft.Extensions.Localization (>= 8.0.11)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last updated
3.0.2	0	11/26/2024
3.0.1	27	11/25/2024
3.0.0	36	11/25/2024
2.1.1	90	10/25/2024
2.1.0	83	10/23/2024
2.0.0	105	10/10/2024
1.1.4	85	9/25/2024
1.1.3	87	9/20/2024
1.1.2	109	9/18/2024
1.1.1	112	9/5/2024
1.1.0	99	9/4/2024
1.0.5	145	8/8/2024
1.0.4	78	8/5/2024
1.0.3	97	8/1/2024
1.0.2	96	7/30/2024