BlazorComponents

This project aims to provide reusable components foa Blazor application.

As for now to be able to use these components the CI build nuget repository for Blazor must be configured. Directions here

Live samples at

https://blazorcomponents.azurewebsites.net/ for inputs, layouts, spinners, dynamic grid, dynamic (grouped) table and SignlR

https://blazorbingmaps.azurewebsites.net/ for the bing maps component

Packages

• Inputs: https://www.nuget.org/packages/RPedretti.Blazor.Components
• Layouts: https://www.nuget.org/packages/RPedretti.Blazor.Components.Layout
• Sensors: https://www.nuget.org/packages/RPedretti.Blazor.Sensors
• BingMaps: https://www.nuget.org/packages/RPedretti.Blazor.BingMaps

Inputs

There are four custom inputs, with acessibility

Usage

On your _ViewImports.cshtml add the TagHelper

@addTagHelper *, RPedretti.Blazor.Components

• Checkbox: sample
• RadioGroup: sample
• SuggestBox: sample
• ToggleSwitch: sample
• ProgressBar: sample
• Spinner: sample

Layout

Usage

On your _ViewImports.cshtml add the TagHelper

@addTagHelper *, RPedretti.Blazor.Components

• Accordeon: There are many in sample Input page
• DynamicGroupedTable: sample
• DynamicTable: sample
• PagedGrid: sample
• Pager: sample

BingMaps

Usage

First add the TagHelper in your _ViewImports.cshtml

@addTagHelper *, RPedretti.Blazor.BingMap

Then load the maps script in yoyr app. There is a extension method that do that. Just it at the Startup.Configure method:

public void Configure(IBlazorApplicationBuilder app)
{
    app.AddComponent<App>("app");
    app.UseBingMaps("<your_maps_key>");
}

To acquire one key follow the instructions here

The component supports dynamic modue loading. The sample cover its features.

Sensors

Ambient Light Sensor (experimental)

api docs: https://developer.mozilla.org/en-US/docs/Web/API/AmbientLightSensor.

Only available in Chrome: must enable chrome://flags/#enable-generic-sensor and chrome://flags/#enable-generic-sensor-extra-classes

To use this sensor just call the AddAmbientLightSensor() at the Startup.ConfigureServices and InitAmbientLightSensor() at Startup.Configure

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddAmbientLightSensor();
    ...
}

public void Configure(IBlazorApplicationBuilder app)
{
    ...
    app.InitAmbientLightSensor();
    ...
}

Then the service will be registered and can be injected anywhere in the application with the AmbientLightSensor class. To get reading subscribe to the event AmbientLightSensor.OnReading and for error AmbientLightSensor.OnError

Geolocation

To use this sensor just call the AddGeolocationSensor() at the Startup.ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddGeolocationSensor();
    ...
}

Then the service will be registered and can be injected anywhere in the application with the GeolocationSensor class. To watch position change subscribe to OnPositionUpdate and for error OnPositionError

Network

SignalR

TBD

sample