d20Tek Blazor-Components

Introduction

This package suite provides custom, resuable Blazor components. These components are easy to use right out of the box, so developers can focus on building their applications. To keep the libraries small and independent, we have a project and NuGet package for each component, so that developers can just include what they need (and a huge component library).

Supported components: Spinner, ContentSpinner, Timer, SpanTimer, CountdownTimer, ToggleSwitch. Future components: Modal.

Installation

These libraries are in NuGet packages so they are easy to add to your project. To install these packages into your solution, you can use the Package Manager. In PM, please use the following commands:

PM > Install-Package D20Tek.BlazorComponents.Spinner -Version 1.0.13
PM > Install-Package D20Tek.BlazorComponents.Timer -Version 1.0.13
PM > Install-Package D20Tek.BlazorComponents.ToggleSwitch -Version 1.0.13

To install in the Visual Studio UI, go to the Tools menu > "Manage NuGet Packages". Then search for D20Tek.BlazorComponents.Spinner and install it from there.

Read more about this release in our Release Notes.

Usage

Once you've installed the component NuGet package, you can start using it in your Blazor project. For this example we will use the Spinner component, but other components will follow the same usage pattern.

You must add our namespace to your Blazor project's _Imports.razor file to make our types available to all of your pages/components.

@using D20Tek.BlazorComponents

Place the component in your razor file (for example in your Index.Razor file):

<Spinner />

Many components have additional parameters that you can call (see the component documentation for list of available parameters).

<Spinner Type=SpinType.Pulse Label="Loading..." />

Further customization is available by defining your own CSS or styles on the component.

<Spinner Type=SpinType.Hourglass class="my-custom-spinner" style="color: red; height: 120px; width: 120px" />

The ContentSpinner component allows you to spin any child content, like an image.

<ContentSpinner Size=Size.Medium>
    <img src="./images/my-image.png" style="width: 100%; height: 100%" />
</ContentSpinner>

Samples:

For more detailed examples on how to use the D20Tek.BlazorComponents libraries, please review the following samples:

Sample - D20Tek.FullSample.Wasm See this sample app running live at https://components.d20tek.com.

Feedback