Atc.Blazor

This repository contains packages with components for Blazor application:

Package	Description
Atc.Blazor.ColorThemePreference	A library for detecting the user preferred color theme

Requirements

• .NET 8 Runtime

Get started Atc.Blazor

Installation for Atc.Blazor

Install-Package Atc.Blazor

How to Use NavigationManager.TryGetQueryString

int myInt = 0;

NavigationManager.TryGetQueryString<int>("myKey", out var myInt)

How to Use QueryStringParameterAttribute and SetPropertiesWithDecoratedQueryStringParameterFromQueryString

@page "/"
@inject NavigationManager NavigationManager

<div>My age is: @Age</div>

@code
{
    [QueryStringParameter]
    public int Age { get; set; }

    public override Task SetParametersAsync(ParameterView parameters) // Overload from Blazor components lifecycle
    {
        this.SetPropertiesWithDecoratedQueryStringParameterFromQueryString(NavigationManager); // Bind from url-qyery-parameter 'age' to property 'Age'
        return base.SetParametersAsync(parameters);
    }
}

@page "/"
@inject NavigationManager NavigationManager

<div>My age is: @Age</div>

@code
{
    [QueryStringParameter("myAge")]
    public int Age { get; set; }

    public override Task SetParametersAsync(ParameterView parameters) // Overload from Blazor components lifecycle
    {
        this.SetPropertiesWithDecoratedQueryStringParameterFromQueryString(NavigationManager); // Bind from url-qyery-parameter 'myAge' to property 'Age'
        return base.SetParametersAsync(parameters);
    }
}

How to Use QueryStringParameterAttribute and UpdateQueryStringFromPropertiesWithDecoratedQueryStringParameter

@page "/"
@inject NavigationManager NavigationManager

<button type="button" @onclick="UpdateQueryStringWithAge(21)">Update url</button>

@code
{
    [QueryStringParameter]
    public int Age { get; set; }

    public void UpdateQueryStringWithAge(int age)
    {
        this.Age = age;
        this.UpdateQueryString(NavigationManager);
    }
}

Get started Atc.Blazor.ColorThemePreference

Installation for Atc.Blazor.ColorThemePreference

Install-Package Atc.Blazor.ColorThemePreference

How to Setup

Modify Program.cs by adding to the service builder:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddColorThemePreferenceDetector(); // Require package: Atc.Blazor.ColorThemePreference

await builder.Build().RunAsync();

Modify index.html by adding:

<script src="_content/Atc.Blazor.ColorThemePreference/ColorThemePreferenceDetector.js" type="module"></script>

How to Use

@inject IColorThemePreferenceDetector colorThemePreferenceDetector;

<p>Use Light-Mode: @useLightMode</p>
<p>Use Dark-Mode: @useDarkMode</p>

@code
{
    private bool useLightMode;
    private bool useDarkMode;

    protected override async Task OnInitializedAsync()
    {
        useLightMode = await colorThemePreferenceDetector.UseLightMode();
        useDarkMode = await colorThemePreferenceDetector.UseDarkMode();

        await base.OnInitializedAsync();
    }
}

How to contribute

Contribution Guidelines

Coding Guidelines