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.