Blazor.NumberInput
1.0.0
Suggested Alternatives
Additional Details
Versi ini mengandung metadata yang salah (GitHub link), silakan gunakan versi 1.0.1 ke atas.
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
dotnet add package Blazor.NumberInput --version 1.0.0
NuGet\Install-Package Blazor.NumberInput -Version 1.0.0
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="Blazor.NumberInput" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Blazor.NumberInput" Version="1.0.0" />
<PackageReference Include="Blazor.NumberInput" />
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 Blazor.NumberInput --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Blazor.NumberInput, 1.0.0"
#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 Blazor.NumberInput@1.0.0
#: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=Blazor.NumberInput&version=1.0.0
#tool nuget:?package=Blazor.NumberInput&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
๐ข Blazor NumberInput Component
Komponen Blazor kustom untuk input angka dengan dukungan validasi, format lokal, dan integrasi form yang fleksibel. Terdiri dari dua komponen utama:
๐ฆ Komponen
1. <NumberInput>
Komponen ringan dan fleksibel untuk input angka mandiri, tanpa tergantung pada EditForm.
โ Fitur Utama
- Binding:
@bind-NumberValue - Format angka (
N0,F2, dsb) - Validasi manual via parameter
Required - Prefix/Suffix (misal: Rp, %, kg)
- Dukungan
MinValue,MaxValue,Step - Dukungan parsing lokal (
CultureInfo) - Navigasi keyboard โ โ
- Event interaktif:
@oninput,@onchange,@onpaste - Atribut tambahan HTML (
AdditionalAttributes)
๐งฉ Contoh
<NumberInput @bind-NumberValue="amount"
Placeholder="Masukkan jumlah"
DisplayPrefix="Rp"
Format="N0"
Required="true"
RequiredValueValidationMessage="Wajib diisi" />
2. <NumberInputBase>
Turunan dari InputBase<decimal?>, ideal untuk integrasi EditForm dan validasi otomatis dengan anotasi data ([Required], [Range], dsb).
โ Fitur Tambahan
- Binding:
@bind-Value - Terintegrasi otomatis dengan
EditForm - Validasi otomatis dengan
DataAnnotations - Mendukung
ValidationMessage - Dukungan semua fitur
<NumberInput>(format, batasan, kultur, dsb) - Mengikuti pipeline Blazor standar
๐งฉ Contoh
<EditForm Model="model" OnValidSubmit="Submit">
<DataAnnotationsValidator />
<NumberInputBase @bind-Value="model.Amount"
Placeholder="Masukkan jumlah"
DisplayPrefix="Rp"
Format="N0" />
<ValidationMessage For="@(() => model.Amount)" />
</EditForm>
๐ฌ Perbandingan Singkat
| Fitur / Aspek | <NumberInput> |
<NumberInputBase> (InputBase) |
|---|---|---|
| Binding | @bind-NumberValue |
@bind-Value |
| Validasi Otomatis | โ Manual | โ
Ya, via EditForm |
Digunakan dalam EditForm |
Opsional | โ Direkomendasikan |
| Prefix / Suffix | โ | โ |
| Keyboard โ โ Step | โ | โ |
| Atribut HTML tambahan | โ | โ |
| Reusabilitas (form standar) | โ ๏ธ Perlu usaha | โ Sesuai konvensi Blazor |
| Berat & fleksibilitas | Ringan & bebas | Standar & konsisten |
๐ Dokumentasi Properti Umum
| Parameter | Tipe | Deskripsi |
|---|---|---|
NumberValue / Value |
decimal? |
Nilai angka (nullable). |
Format |
string |
Format angka, contoh: "N0", "F2" |
DecimalPlaces |
int |
Presisi parsing desimal |
Culture |
CultureInfo |
Kultur lokal seperti new("id-ID") |
MinValue, MaxValue |
decimal? |
Batas bawah & atas nilai |
Step |
decimal? |
Besar kenaikan nilai saat โโ |
Placeholder |
string? |
Placeholder input |
DisplayPrefix / Suffix |
string? |
Teks tambahan sebelum/sesudah nilai |
Required |
bool? |
Menandakan wajib diisi (manual) |
RequiredValueValidationMessage |
string? |
Pesan validasi jika Required=true |
AdditionalAttributes |
Dictionary<string, object>? |
Atribut tambahan seperti data-*, style, dll. |
๐ Rekomendasi Penggunaan
Gunakan
<NumberInput>jika:- Butuh komponen input angka ringan
- Tidak menggunakan
EditForm - Ingin kontrol validasi manual
Gunakan
<NumberInputBase>jika:- Menggunakan
EditForm - Ingin validasi otomatis dari model
- Mengikuti pola
InputBase<T>Blazor
- Menggunakan
๐จโ๐ป Pengembang
Dibuat oleh ganiputras ยท MIT License ยท Kompatibel Blazor Server & WASM
| 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. 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.
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.18)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Versi 1.0.0 Blazor.NumberInput:
- Komponen Input Angka dengan dukungan format dan validasi
- Support CultureInfo, Placeholder, DecimalPlaces