FloatingInput 1.0.0
See the version list below for details.
dotnet add package FloatingInput --version 1.0.0
NuGet\Install-Package FloatingInput -Version 1.0.0
<PackageReference Include="FloatingInput" Version="1.0.0" />
<PackageVersion Include="FloatingInput" Version="1.0.0" />
<PackageReference Include="FloatingInput" />
paket add FloatingInput --version 1.0.0
#r "nuget: FloatingInput, 1.0.0"
#:package FloatingInput@1.0.0
#addin nuget:?package=FloatingInput&version=1.0.0
#tool nuget:?package=FloatingInput&version=1.0.0
FloatingInputComponent
FloatingInputComponent es un componente reutilizable para Blazor WebAssembly que implementa campos de entrada con etiquetas flotantes al estilo Material Design. Está diseñado para mejorar la experiencia de usuario en formularios, ofreciendo una apariencia moderna, validación en tiempo real y fácil integración.
Características
- Etiquetas flotantes dinámicas.
- Uso dinámico puede integrarse con o sin las validaciones.
- Soporte para validación en tiempo real.
- Totalmente personalizable mediante parámetros.
- Compatible con Blazor WebAssembly y Blazor Server.
- Integración sencilla con formularios editables y componentes de UI como BlazorBootstrap.
Instalación
Puedes instalar el paquete desde NuGet:
dotnet add package FloatingInputComponent
O desde Visual Studio, buscando FloatingInputComponent en el administrador de paquetes NuGet.
Uso básico Floating simple y Floating validado
Para el floating simple se utilizará FloatingInput, ejemplo:
<FloatingInput @bind-Value="userModel.test"
Label="Test"
Type="email"/>
Para el floating validado se utilizará ValidatedFloatingInput, ejemplo:
<ValidatedFloatingInput Label="User or Email"
Value="@model.Username"
ValueChanged="@((val) => model.Username = val)"
ValueExpression="(() => model.Username)" />
Parámetros disponibles
| Parámetro | Tipo | Descripción |
|---|---|---|
Label |
string |
Etiqueta flotante del campo. |
Value |
string |
Valor del campo (con soporte para binding). |
Placeholder |
string |
Opcional en caso de placeholder personalizado. |
ValueExpression |
string |
Mensaje de validación personalizado. |
Ejemplo avanzado
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator />
<FloatingInputComponent
@bind-Value="model.Email"
Label="Correo electrónico"
Placeholder="ejemplo@correo.com"
/>
<button type="submit">Enviar</button>
</EditForm>
Licencia
Este proyecto está bajo la licencia MIT.
| 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.20)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.