BlazorWheelPicker 1.0.1

.NET 8.0 
dotnet add package BlazorWheelPicker --version 1.0.1
NuGet\Install-Package BlazorWheelPicker -Version 1.0.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="BlazorWheelPicker" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add BlazorWheelPicker --version 1.0.1
#r "nuget: BlazorWheelPicker, 1.0.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. 
// Install BlazorWheelPicker as a Cake Addin
#addin nuget:?package=BlazorWheelPicker&version=1.0.1

// Install BlazorWheelPicker as a Cake Tool
#tool nuget:?package=BlazorWheelPicker&version=1.0.1

BlazorWheelPicker

BlazorWheelPicker is a tiny NuGet package containing two component for Blazor mimicking the iOS style wheel select input. It is pretty handy for developers using Blazor on MAUI app or for a mobile version of your website.

I used this codepen from Max Kohler for the css part which made me discover css scroll snapping : https://codepen.io/maxakohler/pen/JZgXxe

Get Started

Add the NuGet package via Package Manager:

NuGet\Install-Package BlazorWheelPicker

via CLI :

dotnet add package BlazorWheelPicker

or simply add the reference in your .csproj file:

<PackageReference Include="BlazorWheelPicker" Version="1.0.0" />

Add the css reference to your index.html file located in /wwwroot

<link href="_content/BlazorWheelPicker/BlazorWheelPicker.css" rel="stylesheet" />

And the javascript:

<script src="_content/BlazorWheelPicker/wheelpicker.js"></script>

And finally add the namespace reference to _Imports.razor for more practicality:

@using BlazorWheelPickerLib;

Usage

This contains 2 components : WheelSelect and DateWheelSelect, the later is just an implementation for a date picker

WheelSelect

Name Type Description Default
Style string Additional style you want to apply -
T Type of the selectable items -
Items T Selectable item list -
WheelLevel int Level of displayed items 2
SelectionLines boolean Whether or not selection line in the middle are displayed true
Dense boolean Whether or not the item rows are dense false
WheelColor string Hexadecimal value of the background wheel color #ffffff
TextColor string Hexadecimal value of the text color #000000
Value T Selected value of the picker (or use @bind-Value) -
ValueChanged EventCallback<T> Value changed event (or use @bind-Value) -
ItemTemplate RenderFragment<T> Custom render template for rows -
Example:
<WheelSelect @bind-Value="_selectedCity" Style="width:50%" Dense="true" T="string" Items="Items">
    <ItemTemplate Context="test">
        <div style="display:flex;flex-direction:row;align-items:center;justify-content:center">
            @test
        </div>
    </ItemTemplate>
</WheelSelect>
@code
{
    public List<string> Items = new List<string>() { "Paris", "Rome", "London", "Berlin", "Madrid" };
    private string _selectedCity = "Paris";
}

Example of wheel select

DateWheelSelect

Name Type Description Default
Style string Additional style you want to apply -
WheelLevel int Level of displayed items 2
Dense boolean Whether or not the item rows are dense false
SelectionLines boolean Whether or not selection line in the middle are displayed true
WheelColor string Hexadecimal value of the background wheel color #ffffff
TextColor string Hexadecimal value of the text color #000000
Value DateTime Selected DateTime value of the picker (or use @bind-Value) -
ValueChanged EventCallback <DateTime> DateTime Value changed event (or use @bind-Value) -
MinYear DateTime? Minimum year displayed 1970
MaxYear DateTime? Maximum year displayed 2070
Example:
<DateWheelSelect MaxYear="DateTime.Now.AddYears(40)" MinYear="DateTime.Now.AddYears(-40)" WheelLevel="2" Dense="false" @bind-Value="SelectedDate">
</DateWheelSelect>
<p>Selected Date : @SelectedDate.ToString("dd-MM-yyyy")</p>
@code
{
    DateTime SelectedDate = DateTime.Now;
}

Example of date wheel select

Misc

If used with MAUI, i suggest to add a vibration when a value is changed for a native feel:

HapticFeedback.Default.Perform(HapticFeedbackType.Click);

License

This package is under the MIT license, feel free to fork it and modify it.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  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. 
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.0.1 118 1/24/2024
1.0.0 76 1/23/2024