BlazorWheelPicker 1.0.0
See the version list below for details.
dotnet add package BlazorWheelPicker --version 1.0.0
NuGet\Install-Package BlazorWheelPicker -Version 1.0.0
<PackageReference Include="BlazorWheelPicker" Version="1.0.0" />
paket add BlazorWheelPicker --version 1.0.0
#r "nuget: BlazorWheelPicker, 1.0.0"
// Install BlazorWheelPicker as a Cake Addin
#addin nuget:?package=BlazorWheelPicker&version=1.0.0
// Install BlazorWheelPicker as a Cake Tool
#tool nuget:?package=BlazorWheelPicker&version=1.0.0
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";
}
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;
}
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 | Versions 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.