Ecs.Libs.Blazor.Visuals 0.1.1

Using the Ecs.Libs.Blazor.Visuals Library

The Ecs.Libs.Blazor.Visuals library offers a collection of visual components and utilities designed to enhance the user interface of Blazor applications. This guide will help you get started with using the library in your Blazor projects.

Installation

To install the Ecs.Libs.Blazor.Visuals library, you can use the NuGet Package Manager Console or the .NET CLI. Using the NuGet Package Manager Console:

Install-Package Ecs.Libs.Blazor.Visuals

Using the .NET CLI:

dotnet add package Ecs.Libs.Blazor.Visuals

Configuration

After installing the package, you need to configure the visual services in your Blazor application. Open the Program.cs file and add the following lines to register the visual services:

using Ecs.Libs.Blazor.Visuals;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddThemeStateService();

There is also an option to configure the theme state service with custom settings:

builder.Services.AddThemeStateService(options =>
{
	// Customize theme settings if needed
    options.UseSystemPreference = true; // Enable system theme preference detection
    options.Themes = new string[] { "light", "dark" };
});

Adding ThemeManager Component

To enable theme switching in your Blazor application, you can add the ThemeManager component to your MainLayout.razor or any other layout/component where you want to provide theme switching functionality.

@using Ecs.Libs.Blazor.Visuals
// Add the ThemeManager component, typically in MainLayout.razor and position it as needed
<ThemeManager class="position-absolute" style="top: 5px; right: 15px; z-index: 1000;" />

Adding BusyIndicator Component

To indicate loading states in your Blazor application, you can use the BusyIndicator component. Add it to your layout or specific components where you want to show a loading indicator.

@using Ecs.Libs.Blazor.Visuals
// Add the BusyIndicator component, typically in MainLayout.razor
<BusyIndicator />

Optionally use BusyIndicatorStateService

The BusyIndicatorStateService is currently applied by CascadingParameter in the BusyIndicator component. However, if you want to control the busy indicator state from other components or services, you can register the BusyIndicatorStateService in your Program.cs file:

@using Ecs.Libs.Blazor.Visuals
<CascadingValue Value="busyIndicatorStateService">
    <BusyIndicator />
</CascadingValue>

Then, you can inject the BusyIndicatorStateService into your components or services to control the busy indicator state:

@inject BusyIndicatorStateService busyIndicatorStateService

private async Task LoadDataAsync()
{
 // More coming in future versions
}

3rd party dependencies

The Ecs.Libs.Blazor.Visuals library relies on the following 3rd party libraries:

• Bootstrap 5.3+ - A popular CSS framework for building responsive and mobile-first websites.