BlazorSharedComponents 1.1.1

Suggested Alternatives

DSComponents

Additional Details

This package has been deprecated and will be replaced with the DSComponents package.

dotnet add package BlazorSharedComponents --version 1.1.1
                    
NuGet\Install-Package BlazorSharedComponents -Version 1.1.1
                    
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="BlazorSharedComponents" Version="1.1.1" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="BlazorSharedComponents" Version="1.1.1" />
                    
Directory.Packages.props
<PackageReference Include="BlazorSharedComponents" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add BlazorSharedComponents --version 1.1.1
                    
#r "nuget: BlazorSharedComponents, 1.1.1"
                    
#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.
#:package BlazorSharedComponents@1.1.1
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=BlazorSharedComponents&version=1.1.1
                    
Install as a Cake Addin
#tool nuget:?package=BlazorSharedComponents&version=1.1.1
                    
Install as a Cake Tool

A Blazor .wasm library of common components used in front end development.

Why?

I started this project after building some in-house Blazor custom components for the company I was working for. Since Blazor is so new, there aren't many of these components available, yet. Because of this, most dev shops are sticking with existing Javascript libraries, understandable, or making their own components, like we did. For the components that do exist, they're very niched, and often times, don't really fit the end user's needs. I wanted to create a set of components that does the desired job, but allow the end user to have more control.

In Progress

  • Drag and drop - V1.1.0

Completed

  • Base Drag and drop functionality

Description and code example

The drag and drop component is a simple drag and drop tool built in C#. It works as advertized, you drag items onto a drop zone and the dropped items populate the drop zone. There are two public facing components, the DropZone component and the DropItem component. Each component contains parameters that can be passed in to allow the end user more control over how it looks and behaves. The Drag and drop service is an interal class that basically works as a state container

DropZone component structure

Parameter Purpose Requirement
Class User defined css classes Optional
Text User defined text to display in the dropzone Optional
Items User defined parameter for items in the drop zone Optional
DragOver User defined callback for the dragover event. A DraggableItem can optionally be sent to the handler Optional
DragLeave User defined callback for the drag leave event Optional
Drop User defined callback for the drop event Optional

DropItem component structure

Parameter Purpose Requirement
Class User defined css classes Optional
Item Item to be dragged Required
IsDraggable User defined parameter that sets the element to draggable. Defaults to true Optional
OnDragStart User defined callback for the drag start event. A DraggableItem can optionally be sent to the handler Optional

Example and usage

Application page.razor

<div>
	@foreach(var item in items)
	{
		<DropItem Item="@item" />
	}
</div>
<div>
	<DropZone />
</div>

@code{
	IEnumerable<DraggableItem> items;

	protected override *LifecycleMethod()*
	{
		*Set list of items to be used.*
	}
}

Install

Package Manager - Install-Package BlazorSharedComponents -Version 1.1.0

.NET CLI - dotnet add package BlazorSharedComponents --version 1.1.0

Package Reference - <PackageReference Include="BlazorSharedComponents" Version="1.1.0" />

Direct Download - https://www.nuget.org/api/v2/package/BlazorSharedComponents/1.1.0

To-do

  • Nested Drag and drop
  • Drop down
  • Searchable drop down
  • Multi-select drop down
  • Filterable table
Product Compatible and additional computed target framework versions.
.NET net5.0 is compatible.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  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.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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
1.1.1 950 5/15/2022 1.1.1 is deprecated because it is no longer maintained.
1.1.0 607 9/19/2021
1.0.0 586 9/19/2021