Ramboe.Blazor.UserFeedback
1.0.0
Ramboe UserFeedback: una biblioteca Blazor para mostrar mensajes de hilanderos, errores y éxito durante las llamadas de método asíncrono. Este marco simplifica el manejo de las actualizaciones de UI asincrónicas, lo que permite a los desarrolladores centrarse en su lógica principal y proporcionar una experiencia de usuario perfecta.
Con su API fácil de usar, esta biblioteca hace que sea fácil mostrar los hilanderos, los mensajes de error y los mensajes de éxito para las llamadas de métodos asíncronos. Dé a sus usuarios los comentarios que necesitan, sin sacrificar la simplicidad o el rendimiento.
dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0
La funcionalidad básica es mostrar una ruleta mientras se ejecuta una función
y mostrar cualquier excepción que pueda ocurrir (la interfaz de usuario sigue siendo receptiva)
También puede mostrar un mensaje de carga debajo del spinner
y opcionalmente muestra un mensaje de éxito (por ejemplo, para publicaciones HTTP exitosas)
Primero haga que su componente herede de TryWrapper
Luego envuelva la tarea de retroalimentación alrededor del marcado HTML que desea ocultar mientras Spinner está activo
El código del componente debería verse así
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
< table class =" table " >
< thead >
< tr >
< th > Date </ th >
< th > Temp. (C) </ th >
< th > Temp. (F) </ th >
< th > Summary </ th >
</ tr >
</ thead >
< tbody >
@foreach (var forecast in forecasts)
{
< tr >
< td > @forecast.Date.ToShortDateString() </ td >
< td > @forecast.TemperatureC </ td >
< td > @forecast.TemperatureF </ td >
< td > @forecast.Summary </ td >
</ tr >
}
</ tbody >
</ table >
</ FeedbackArea >DetnedyArea toma varios parámetros si necesita personalizar la ruleta para un área determinada dentro de su aplicación
Para determinar qué área girará mientras estamos ejecutando cosas, debemos adjuntarle un TargetTarget, que es responsable de mantener el estado del área de retroalimentación (Spinner Active, Mensaje de éxito que se muestra, etc.)
Dado que heredamos de TryWrapper, siempre obtenemos al menos un objetivo que podemos usar, el Target predeterminado
Si necesita más objetivos, simplemente agréguelos a su componente (no olvide inicializarse con "New ()")
Las áreas de retroalimentación deben configurarse al inicio. Puede usar el método addStandardFeedbackAlesa ()
que aplica la siguiente configuración
SpinnersizeMode = spinnersizeMode. VH5 ,
Colormodo = Colormodo. Primario ,
Spinnertype = spinnertype. Borderspinner
También puede usar una API fluida que viene junto con AddAndConfigureFeedbackAlesa () si desea configurar el estilo usted mismo
WithColor () también tiene una sobrecarga que funciona con el enumio del colormario
Se pueden configurar los siguientes atributos: tamaño, color, tipo
Tamaño: configurado a través de spinnersizeMode enum, que varía desde VH2 - VH90
Color: configurado a través de spinnerColormode enum, que representa las categorías de color que vienen con bootstrap (primaria, secundaria, éxito, ...)
Tipo: configurado a través de spinnertypemode enum, que actualmente contiene spinner-border y spinner-gow
Cualquier parámetros pasados directamente a una Atletsarea anulará cualquier configuración realizada en Program.cs. Por ejemplo, configurar el modo de color "primario" en Dipnethyarea #2 ...
Resulta en que el color de spinner de FealtyAreas se establezca en "primario", mientras que Delethyarea #1 solo toma la configuración de inicio:
Funciona de la misma manera que EventCallbacks. Si desea que el spinner gire mientras se ejecuta un determinado método, se necesitan 2 pasos:
async Task < List < WeatherForecast > > LoadData ( )
{
// simulate waiting for an api, so we can actually see the spinner spinning
await Task . Delay ( 2000 ) ;
return await ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ;
} protected override async Task OnInitializedAsync ( )
{
forecasts = await TryAsync ( LoadData , DefaultTarget ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
}También puede usar uno de los métodos explícitos
protected override async Task OnInitializedAsync ( )
{
// those to methods do the same thing
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Dado que funciona de la misma manera que EventCallbacks, ya sabe que necesita una expresión de Lambda para métodos que toman parámetros:
protected override async Task OnInitializedAsync ( )
{
await LambdaExample ( ) ;
}
async Task LambdaExample ( )
{
await Task . Delay ( 2000 ) ;
forecasts = await TryAsync (
( ) => ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ,
DefaultTarget ,
"loading, lambda" ,
"lambda successfull"
) ;
} Configurar la tarea de retroalimentación en el inicio:
builder . Services . AddAndConfigureFeedbackAreas ( )
. WithSize ( SpinnerSizeMode . Vh5 )
. WithType ( SpinnerTypeMode . BorderSpinner )
. WithColor ( SpinnerColorMode . Secondary )
. ConfigureFeedbackAreas ( ) ;Heredar de TryWrapper y envolver una Aterea de Feedback (incluido el objetivo) en torno a su contenido
@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper
< FeedbackArea Target =" DefaultTarget " >
@*Content here*@
</ FeedbackArea >Puedes usar las diversas sobrecargas.
forecasts = await TryAsync ( LoadData , DefaultTarget ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;
forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;... o ser explícito
protected override async Task OnInitializedAsync ( )
{
forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
}Los métodos se pasan a Delethyarea como delegados, lo que significa que se necesitan expresiones lambda cuando se trabaja con parámetros (al igual que en EventCallbacks).
